開源一款基於 Typecho 開發的部落格主題

老朱独立开发發表於2024-07-01

主題介紹

WaterDrop 是 水滴 的意思，其實並沒有什麼特殊含義，只是因為每一次專案取名都絞盡腦汁，太麻煩了，於是就想著效法一些大佬，乾脆取名隨性一點。例如，Java 語言因作者經常在辦公室喝 Java 咖啡而得名，MySQL和MariaDB的作者是同一人，命名分別是他兩個女兒的名字（看樣子作者也是個女兒奴），這樣的例子還有很多，不過多列舉了。

而我在開發該專案的時候，恰好在看《三體 Ⅱ：黑暗森林》，被其磅礴的想象力所震撼，更被其中探討的人性、文明、歷史、哲學等問題所折服，本來想取名叫“黑暗森林”或“森林”之類的，但擔心被誤認為是黑色科技風格或綠色叢林風格的主題，使用後才發現上當受騙就不好了。後來一想還是就叫水滴吧，外表樸素，實則內藏乾坤，貌似也挺不錯的！

該主題就是一個簡約且普通的寫作主題，主要是我自己記錄各種圖文並茂的技術文章、經驗心得以及產品文件用的，因此目前沒有，未來也不會加入各種除了酷炫，沒有多少實際用途的花哨元件，如果你也是技術人員，目的就是為了作為產品文件或者記錄經驗心得，它應該也會適合你！

預覽站點：https://ilaozhu.com

主題特點

  • 響應式設計，適配手機、平板、電腦等裝置；
  • 支援公告、輪播圖、熱門文章、最新評論、分類、標籤雲等可選元件；
  • 標籤雲實現3D旋轉動畫效果；
  • 支援 PJAX 無重新整理載入；
  • 實現友情連結、文章歸檔以及作品列表模板頁；
  • 適配LZStat外掛，支援點贊數、訪問量統計，並支援按時間、點贊數、訪問量、權重(約定為 100*點贊數+訪問量)自定義排序方式；
  • 支援自定義根據建立時間、點贊數、訪問量等排序的側邊欄最新文章、熱門文章列表；
  • 文章內容實現類似github的渲染效果；
  • 文章支援手動指定封面；
  • 整合Google AdSense，內建風格一致的廣告位；
  • 評論支援emoji表情等...

主題安裝

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

主題使用

主題的使用方式很簡單，直接到設定外觀中按需設定即可，基本就是所見即所得，下面簡單介紹一些需要單獨說明的地方。

1. 友情連結

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

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

2. 文章歸檔

主題中實現了一個文章歸檔頁面模板，可在新增文章歸檔獨立頁面時，在自定義模板中選擇文章歸檔頁面模板，文字區不需要填寫，空著即可。

3. 作品列表

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

- 作品標題1
- 作品連結地址1
- 作品封面圖片地址1
- 作品描述1
- 作品標題2
- 作品連結地址2
- 作品封面圖片地址2
- 作品描述2

需要特別注意的是：

  1. 上述markdown中，順序必須是標題、連結地址、圖片地址、描述，不可錯亂；
  2. 如果描述有多段文字，換行後開頭需要有4個空格，這是markdown的標準語法。另外，描述中能夠識別html標籤，因此，如有必要，也可以從語法上做一些增強，如高亮、加粗、斜體等。

4. 外掛依賴

  • LZStat：主題中的點贊數、訪問量統計，以及側邊欄中的熱門文章是透過 LZStat 外掛實現的，如果不需要這些功能，也可以不使用該外掛。

5. 額外說明

5.1 側邊欄設定

  1. 如果顯示最新評論，則可以到設定->評論中設定評論列表數目；
  2. 如果顯示文章榜單，則可以到設定->閱讀中設定文章列表數目。

5.2 文章封面

文章封面主要是文章列表頁面顯示的圖片，可以在編寫文章時透過封面欄位手動指定，如果沒有指定，則預設使用文章第一張圖片作為封面。

如果既沒有指定封面，文章正文中也沒有圖片，則隨機使用一張主題外觀中設定的文章預設封面作為封面。

如果文章預設封面也沒有設定，則預設顯示主題內建的post-default-cover.png圖片作為封面，該圖片你可以替換為符合自己網站風格的佔點陣圖。

也就是說，文章列表必然會顯示一張封面，當然，任何一種形式的封面如果獲取不到，都會顯示post-default-cover.png預設封面。

這裡其實也緩解了前面 透過 Github + jsDelivr + PicGo 配置免費圖床 時，由於 jsDelivr不穩定帶來的使用者體驗差的問題，也就是當 jsDelivr 無法訪問的時候，臨時顯示一張預設圖片作為封面，而當jsDelivr 恢復之後又立即顯示出原圖。這麼做只是讓使用者體驗好一點而已，並沒有從根本上解決問題，但好在不穩定只是少數情況，不能忍受的還是老老實實的用本地圖片或付費產品吧，畢竟免費總歸還是需要代價的！

最後

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

相關文章