創建多頁面應用程序

在附加功能中，我們介紹了多頁面應用程序，包括如何定義頁面、構建和運行多頁面應用程序，以及如何在用戶界面的頁面間導航。更多詳情，請參閱多頁面應用程序指南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,