開源一款基於 Typecho 開發的導航主題

老朱独立开发發表於2024-06-30

主題介紹

BeaconNav是基於typecho開發的一款導航主題，Beacon是燈塔的意思，希望使用者在知識的海洋裡能夠如同有燈塔指引一樣目標明確，永遠不會迷失方向。

演示站點：https://nav.ilaozhu.com

主題特點

  • 響應式設計，適配手機、平板、電腦等裝置；
  • 支援自定義 LOGO、背景圖片；
  • 支援日曆、時鐘元件；
  • 支援背景粒子特效；
  • 支援 PJAX 無重新整理載入；
  • 支援友情連結模板頁；
  • 支援點贊數、訪問量統計，並支援按時間、點贊數、訪問量、權重(約定為 100*點贊數+訪問量)自定義排序方式；
  • 支援最近訪問和本地收藏功能；
  • 整合Google AdSense，內建風格一致的廣告位；
  • 評論支援emoji表情等...

主題安裝

  1. 到Github下載 BeaconNav 主題壓縮包，解壓後放到/usr/themes/目錄下，將資料夾命名為 BeaconNav，確保index.php檔案直接在BeaconNav資料夾下；
  2. 登入部落格後臺，進入控制檯->外觀，選擇BeaconNav主題；
  3. 啟用主題即可。

主題使用

1. 導航編輯

主題中主要包含導航選單和導航項兩個部分，其中，導航選單是透過一級分類實現的，而導航項是透過文章實現的。因此，編輯時，只需要建立一級分類，並將文章分配到該分類下即可。

值得注意的是，編輯文章時，會有跳轉連結和站點圖示兩個設定項，其中跳轉連結必須指定，而站點圖示則為可選項，如果不填，則會自動獲取目標站點根路徑下的favicon.ico作為站點圖示。

2. 導航列表

為了保證介面的美觀，主題去掉了翻頁的按鈕，因此，為了確保資料能夠顯示完整，需要到部落格後臺的設定->閱讀下面，將每頁文章數目設定大一些（如50或100等），然後保證每個分類下的導航項數量不超過這個值，後續可能會考慮實現滾動載入。

3. 友情連結

主題中實現了一個友情連結模板頁，可在新增友情連結獨立頁面時，在自定義模板中選擇友鏈頁面。
然後透過如下 markdown 語法來新增友情連結：

- ![站點名稱1](站點圖示1) [站點名稱1](跳轉連結1)
- ![站點名稱2](站點圖示2) [站點名稱2](跳轉連結2)

4. 外掛依賴

  • LZStat：主題中的點贊數、訪問量統計，以及自定義排序是透過 LZStat 外掛實現的，如果不需要這些功能，也可以不使用該外掛。

最後

本主題是為自用而設計的，因此，整體上會以清爽為主，不會新增太多花裡胡哨的元件（現有的元件也是可以透過後臺設定去掉的），由於剛完成開發，所以可能會有較多的bug，後續會繼續最佳化，也歡迎大家多提bug，給出寶貴的意見！

本主題採用 GPL 協議開源，您可以自由的修改、使用和傳播，但請保留底部版權資訊，以表示對作者的支援與尊重，謝謝！

相關文章