1. 靜態部署
到 https://github.com/WebStackPage/WebStackPage.github.io 將作者寫的導航代碼 clone 下來，
下載到本地后，洗掉掉404.html、en檔案夾，將cn里面的index.html替換掉根目錄的index.html，洗掉cn檔案夾，
上面的步驟是因為我不需要中英文切換，懶，完成后你的目錄下應該只剩下assets檔案夾和index.html檔案，
打開index.html應該能看到如下圖所示的初始界面，
注意這里我是在 pycharm 里面拖動檔案的，pycharm 會自動調整代碼中的檔案路徑，如果是手動移動的話，需要自行修改，否則會出現靜態檔案找不到的情況，
你可以自行修改標題，圖示等等，這里我修改后的效果是這樣的（這里用最終效果的圖片），
2. 使用flask管理
由于不可能每次添加一個導航都要去修改代碼和重啟程式，所以使用flask來動態管理，不過由于懶得寫后臺什么的，干脆直接用json檔案來當導航的組態檔吧，
左側導航欄的組態檔格式
右側導航項的組態檔格式
模板渲染出左側導航欄，右側的實作效果類似
3. 總結
當然導航都是采集來的，一個一個去收集的話實在太麻煩了，寫個爬蟲腳本就搞定，整個專案并沒有什么難度，還是要感謝WebStackPage作者提供的導航原始碼！
4. Demo
制作完畢，請看風洞網安全導航演示站：aHR0cHMlM0EvL25hdi5iZXdpbmR3YXJkLmNvbS8=
加入風洞網的知識星球獲取原始碼，星球會不定期分享各種網路安全干貨知識！
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/319732.html
標籤：python