创建多页面应用程序

在附加功能中，我们介绍了多页面应用程序，包括如何定义页面、构建和运行多页面应用程序，以及如何在用户界面的页面间导航。更多详情，请参阅多页面应用程序指南Multipage apps - Streamlit Docs

在本指南中，让我们通过将上一版本的 streamlit hello 应用程序转换为多页面应用程序，运用我们对多页面应用程序的理解！

开发动机

在 Streamlit 1.10.0 之前，streamlit hello 命令是一个大型单页面应用程序。由于不支持多页面，我们只能使用侧边栏中的 st.selectbox 来分割应用程序的内容，以选择运行哪些内容。内容包括绘图、映射和数据帧三个演示。

下面是代码和单页应用程序的外观：

import streamlit as stdef intro():import streamlit as stst.write("# Welcome to Streamlit! 👋")st.sidebar.success("Select a demo above.")st.markdown("""Streamlit is an open-source app framework built specifically forMachine Learning and Data Science projects.**👈 Select a demo from the dropdown on the left** to see some examplesof what Streamlit can do!### Want to learn more?- Check out [streamlit.io](https://streamlit.io)- Jump into our [documentation](https://docs.streamlit.io)- Ask a question in our [communityforums](https://discuss.streamlit.io)### See more complex demos- Use a neural net to [analyze the Udacity Self-driving Car ImageDataset](https://github.com/streamlit/demo-self-driving)- Explore a [New York City rideshare dataset](https://github.com/streamlit/demo-uber-nyc-pickups)""")def mapping_demo():import streamlit as stimport pandas as pdimport pydeck as pdkfrom urllib.error import URLErrorst.markdown(f"# {list(page_names_to_funcs.keys())[2]}")st.write("""This demo shows how to use
[`st.pydeck_chart`](https://docs.streamlit.io/develop/api-reference/charts/st.pydeck_chart)
to display geospatial data.
""")@st.cache_datadef from_data_file(filename):url = ("http://raw.githubusercontent.com/streamlit/""example-data/master/hello/v1/%s" % filename)return pd.read_json(url)try:ALL_LAYERS = {"Bike Rentals": pdk.Layer("HexagonLayer",data=from_data_file("bike_rental_stats.json"),get_position=["lon", "lat"],radius=200,elevation_scale=4,elevation_range=[0, 1000],extruded=True,),"Bart Stop Exits": pdk.Layer("ScatterplotLayer",data=from_data_file("bart_stop_stats.json"),get_position=["lon", "lat"],get_color=[200, 30, 0, 160],get_radius="[exits]",radius_scale=0.05,),"Bart Stop Names": pdk.Layer("TextLayer",data=from_data_file("bart_stop_stats.json"),get_position=["lon", "lat"],get_text="name",get_color=[0, 0, 0, 200],get_size=15,get_alignment_baseline="'bottom'",),"Outbound Flow": pdk.Layer("ArcLayer",data=from_data_file("bart_path_stats.json"),get_source_position=["lon", "lat"],get_target_position=["lon2", "lat2"],get_source_color=[200, 30, 0, 160],get_target_color=[200,