本篇旨在測試 Streamlit 的頁面設定函式 st.page_config() 的功能.
st.page_config() 用來設定整個 Streamlit 應用程式的頁面外觀與行為, 讓 Web app 在瀏覽器中呈現符合需求的頁面, 呼叫此函式並傳入參數可設定頁籤標題, 圖示, 佈局與側邊欄的初始狀態等. 注意, 此函式必須在 .py 檔案一開頭就呼叫才有效.
st.set_page_config() 的參數結構如下 :
st.set_page_config(page_title=None, page_icon=None, layout="centered", initial_sidebar_state="auto", menu_items=None)
參數說明如下表 :
| st.set_page_config() 參數 | 說明 |
|---|---|
| page_title | 設定瀏覽器分頁 (tab) 的標題文字, 通常顯示在頁籤上 |
| page_icon | 設定網頁 favicon, 可為 emoji (如 🚀) 或圖檔路徑 (如 "logo.png") |
| layout | 頁面版面配置, 可設為 "centered" (預設值, 置中) 或 "wide"（全寬） |
| initial_sidebar_state | 設定側邊欄初始狀態: "auto" (預設), "expanded", "collapsed" |
| menu_items | 設定自訂選單項目 (說明, 回報錯誤, 關於）, 以 dictionary 形式提供 |
首先來測試參數 page_title 與 page_icon 的效果 :
測試 1 : 參數 page_title 與 page_icon 的效果 [看原始碼]
# st-set-page-config-test-1.py
import streamlit as st
st.set_page_config(
page_title='我的儀表板',
page_icon='📊'
)
st.title('歡迎來到我的網站')
此例用 page_title 設定網頁頁籤的標題, 用 page_icon 設定標題前面的小圖示 (此處使用 emoji), 結果如下 :
參數 layout 用來設定頁面內容 (即 body 標籤的內容) 的擺放方式, 預設為 "center" (置中), 左右兩側會保留空白邊距, 適合窄版內容閱讀; 若設為 "wide" 則頁面內容會撐滿整個瀏覽器寬度, 適合需要顯示大量資訊, 圖表, 表格, 或使用 st.columns() 多欄容器的場合.
下面利用 Numpy 與 Pandas 產生一個 DateFrame 表格資料來測試預設 layout 的頁面效果 :
測試 2 : 參數 layout 預設值 "centered" 的效果 [看原始碼]
# st-set-page-config-test-2.py
import streamlit as st
import pandas as pd
import numpy as np
st.set_page_config(
page_title='我的儀表板',
page_icon='📊'
)
st.subheader('預設頁面參數 layout="centered"')
df=pd.DataFrame(
np.random.randn(10, 20),
columns=[f'欄 {i+1}' for i in range(20)]
)
st.dataframe(df, use_container_width=True)
此例用 Pandas 產生一個 10 列 x 20 欄的隨機數表格, 然後用 st.dataframe() 輸出, 預設頁面為 layout="center" 設定之效果如下 :
可見表格置中, 且版面較窄, 僅顯示 11 欄內容, 需拖曳水平捲軸才能看見全部內容. 下面是將 layout 設為 "wide" 的範例 :
測試 3 : 參數 layout 設為 "wide" 的效果 [看原始碼]
# st-set-page-config-test-2.py
import streamlit as st
import pandas as pd
import numpy as np
st.set_page_config(
page_title='我的儀表板',
page_icon='📊',
layout='wide'
)
st.subheader('設定頁面參數 layout="wide"')
df=pd.DataFrame(
np.random.randn(10, 20),
columns=[f'欄 {i+1}' for i in range(20)]
)
st.dataframe(df, use_container_width=True)
此例在呼叫 se_page_config() 時傳入 layout='wide', 其餘與上例相同, 結果如下 :
可見 DataFrame 表格寬度擴展至與其父容器同寬, 可顯示 16 個欄位, 雖然還是需要水平捲軸, 但可視版面較寬.
參數 initial_sidebar_state 用來設定使用側邊欄時的預設狀態, 預設為 "auto", 會根據瀏覽器頁面寬度自動決定是否顯示 (在大畫面螢幕時顯示側邊欄, 在小畫面螢幕例如手機預設會將側邊欄隱藏為漢堡選單). 可以設為 "expanded" (展開), "collapsed" (收合).
測試 4 : 參數 initial_sidebar_state 設為 "collapsed" 的效果 [看原始碼]
# st-set-page-config-test-2.py
import streamlit as st
st.set_page_config(initial_sidebar_state='collapsed')
# 側邊欄內容
st.sidebar.title('側邊欄')
st.sidebar.write('這是側邊欄的內容')
if st.sidebar.button('點擊我'):
st.sidebar.write('你點擊了側邊欄按鈕！')
# 主頁面內容
st.title('主頁面')
st.write('這是主頁面的內容。')
此例將側邊欄強制設為收合, 初始化時在 PC 大螢幕下就不會顯示側邊欄 :
按左上角的向右按鈕可展開側邊欄 :
參數 menu_items 設定頁面右上角漢堡選單的項目, 其值為一個字典, 包括下列三個鍵 :
- "About" : 說明資訊
- "Get help" : 說明網頁的超連結
- "Report a bug" : 回報錯誤的超連結
例如 :
測試 5 : 參數 menu_items 的效果 [看原始碼]
# st-set-page-config-test-5.py
import streamlit as st
st.set_page_config(
menu_items={
"Get help": "https://docs.streamlit.io",
"Report a bug": "https://github.com/streamlit/streamlit/issues",
"About": "這是一個示範用的 Streamlit App。"
}
)
st.subheader('st.set_page_config() 的 menu_items 參數')
執行結果如下, 點頁面的右上角 Deploy 右邊的三個點按鈕會出現一個選單, 裡面會出現 menu_items 參數中的三個鍵, 點選其中的 Get help 與 Report a bug 分別會開啟 Streamlit 官網的說明文件頁面與 GitHub 頁面; 點選 About 則會彈出一個關於資訊框 :
上面的 Get help 與 Report a bug 鍵是以 Streamlit 為例, 在實際的應用程式中要指定自己的網址.
沒有留言 :
張貼留言