Streamlit 自 v1.10 以後新增了 Multipage App 機制, 做法是在主目錄下建立一個 pages 資料夾 (一定要用 pages 否則無效), 然後把不同頁面的 Python 檔案放進此 pages 資料夾內, Streamlit 就會自動產生側邊欄來顯示這些頁面的選單讓使用者切換至不同頁面 (每個檔案就是一個獨立頁面), 毋須使用 st.sidebar 容器手刻側邊欄 (實際上 Streamlit 在背後也是隱匿地使用 st.sidebar 來實現多頁面切換功能).
資料夾 pages 下的 Python 檔名可以自由命名, 但檔案名稱會影響該頁面在側邊欄的頁面選單中的排序及顯示效果 :
- 排序：
Streamlit 預設會依檔名的字母順序來排序頁面選單, 如果想自訂順序，可以在檔名前加上數字前綴, 例如 01_首頁.py, 02_資料.py, 03_關於.py 等), 這樣頁面就會依數字排序. - 顯示名稱：
側邊欄會自動將主檔名中的底線替換成空白並去除前綴數字後做為頁面選項的標題, 例如 2_Page_two.py 會顯示為 Page two. - 支援 emoji 表情圖案 :
可以在檔名中加入 emoji 圖示字元 (例如 1_🏠_Home.py), 這樣側邊欄選單上就會顯示 emoji 圖示, 可提升辨識度與美觀.
使用這種機制建立的多頁面 App 具有如下好處 :
- 每一頁是一個獨立 .py 檔, 所有頁面邏輯獨立
- 每一頁有各自對應的 URL 路徑可方便分享
- 會自動重新載入被修改的頁面 (熱重載)
- Streamlit 自動處理頁面切換與狀態
當然缺點是分頁選單會固定顯示在側邊欄區域, 無法自由控制 (例如放在主頁面).
例如 :
測試 1 : 簡單的多頁面 App [看原始碼]
首先建立一個 app_1 目錄, 在底下建立一個主頁面程式 Home.py :
# Home.py
import streamlit as st
st.title('🏠 首頁')
st.write('這是首頁內容')
然後在 app_1 下建立一個 pages 子目錄, 在裡面建立三個頁面程式 :
第一頁程式 :
# 01_Page_1.py
import streamlit as st
st.title('📄 頁面一')
st.write('這是第一頁的內容')
第二頁程式 :
# 01_Page_2.py
import streamlit as st
st.title('📄 頁面二')
st.write('這是第二頁的內容')
第三頁程式 :
# 01_Page_3.py
import streamlit as st
st.title('📄 頁面三')
st.write('這是第三頁的內容')
檔案目錄結構如下 :
這樣就完成多頁面的配置了, 在 app1 目錄下執行 Home.py 即可 :
D:\python\test\app1>streamlit run Home.py
You can now view your Streamlit app in your browser.
Local URL: http://localhost:8501
Network URL: http://192.168.77.135:8501
結果如下 :
可見檔名在去除副檔名與前綴的數字, 用空白取代底線後就成為側邊欄中頁面選單的選項標題了, 按這些超連結即可切換頁面 :
在前面測試側邊欄時曾使用 st.sidebar 屬性來製作多頁面 App, 但那些頁面邏輯都寫在同一個 Python 檔案裡, 若系統很大的話管理不易, 參考 :
下面改用 pages 的多頁面 App 機制來做 :
測試 2 : 從 st.sidebar 改寫的多頁面 App [看原始碼]
先建立一個 app_2 目錄, 在底下建立一個主頁面程式 :
# 首頁.py
import streamlit as st
st.write('歡迎來到首頁！這是應用程式的起始頁面。')
然後在 app_2 下建立一個 pages 子目錄, 在裡面建立三個頁面程式 :
第一頁程式 :
# 1_資料.py
import streamlit as st
import pandas as pd
st.write('這裡是資料頁面，可以顯示資料表或圖表。')
st.write(pd.DataFrame({'欄位1': [1, 2, 3], '欄位2': [4, 5, 6]}))
第二頁程式 :
# 2_關於.py
import streamlit as st
st.write('這是關於頁面，介紹應用程式的資訊。')
檔案目錄結構如下 :
執行首頁程式 :
D:\python\test\app2>streamlit run 首頁.py
You can now view your Streamlit app in your browser.
Local URL: http://localhost:8501
Network URL: http://192.168.77.135:8501
結果如下 :
可見分頁效果與使用 st.sidebar 是一樣的.
沒有留言 :
張貼留言