next-theme博客園主題

e x T

1 特性

• A 高度還原next-theme^[1]
• A 論文規范排版,正文字體、代碼高亮、表格樣式
• A 文章頁顯示摘要、關鍵詞
• A 導航區歸檔、相冊、搜索
• A 作者信息、聯系、訂閱
• A 響應式設計
• A 自動生成目錄、滾動貼頂
• A 閱讀進度、一鍵至頂、頂部進度條
• U 優化評論區顯示
• U 優化上下文切換

2 預覽

2.1 截圖

2.2 樣例

博客園 <=> hexo

3 選型

3.1 為什么選擇博客園

• 經常使用搜索引擎查找某些問題會發現博客園有着良好的SEO,相比自主建站或者其他靜態站點方式，省去了SEO優化和推送，便於更好的呈現和分享。
• 博客園用戶大多是早期開發者，內容可信度高。由於沒有其他平台類似的激勵計划(比如X幣)，寫文章出發點很純粹，也就不會存在用一兩句話湊一篇文章、湊一篇原創（比如CSDN）,即便存在也往往就是標准答案。
• 搜索結果比較真實，不像CSDN，通過在大量相干不相干的廣告和文章鏈接中夾帶着文章，導致可能搜索概要中含關鍵詞但是打開文章卻毫無干系，迫使在其環境下跳來跳去增加點擊率和廣告曝光率，卻永遠找不到答案。
• 免備案,免服務器,https,自動二級域名(xxx.cnblogs.com)
• 支持標准markdown，渲染准確，可完美遷移。圖片不會像其他平台一樣強制轉內鏈，但還往往轉不成功需要找原圖再上傳。
• 重要:支持高度自定義，jquery於網頁的意義就好比ssh的22端口於服務器的意義。不像CSDN，只能換頭圖和底圖，還得開會員.

3.2 為什么選擇next-theme(Pisces)

• 真正大道至簡。很多主題標榜極簡、專注閱讀，但往往花樣繁多。
• 可配置、可自定義、可擴展。

4 使用

4.1 基本步驟

下載源碼:https://github.com/MakerGYT/cnblogs-theme-next/releases/tag/v0.1.0

打開后台

1. 選擇博客皮膚為custom,勾選禁用模板css,申請js權限
2. 將三個文件內容分別復制入相應區域(頁首、頁尾、定制css)
3. 在選項中勾選首頁僅列出標題與摘要,控件顯示勾選公告
4. 通過隨筆寫文章，填寫摘要和標簽后發布。
5. (可選),由於無法在首頁獲取頭像，如需正常顯示，手動在foot.html頭部配置avatar(可在頭像設置上傳后右鍵頭像獲取鏈接)

4.2 配置

4.2.1 信息配置

• github: 右上角跳轉github用戶名,默認為本倉庫鏈接
• author: 作者，默認取后台設置
• siteTitle: 網站標題默認取后台設置
• gallery: 要展示的相冊ID(新建相冊后在url中獲取ID，如1796566)

4.2.2 主題色配置

下列色值參考了Ant Design^[2]

/*custom.css*/
:root {
  --primary-color:#027AFF;/* 全局主色*/
  --body-bg-color: #f5f7f9; /*頁面背景色*/
  --content-bg-color: #fff; /*頁面內容背景色*/
  --heading-color: rgba(0, 0, 0, 0.85); /* 標題色 */
  --text-color: #353535; /*主文本色*/
  --text-color-secondary:rgba(0, 0, 0, 0.45);/*次文本色*/
  --text-color-grey:rgba(0, 0, 0, 0.25); /*失效色，無需關注色*/
  --link-color: #555; /*鏈接色*/
  --code-bg-color:#f0f0f0; /*代碼塊背景色*/
}

可通過devtools調試來選擇預覽

4.2.3 建議

對編輯器類型沒有要求，但建議使用markdown編輯器，語法可參考github^[3]，實際編輯規范可參考另一篇文章^[4]

5 開發

5.1 原則

• 能通過腳本獲取的信息，如用戶已經在管理后台設置的信息，就無需再次配置
• 不應該完全自定義而脫離博客園設置，比如個人信息應該以默認設置為主,盡可能作為補充而不沖突
• 專注於閱讀體驗而非花里胡哨
• 不必苛求完全與next原主題一致，畢竟該主題也一般需要改動，適合、可用即可。

5.2 Todo

• 優化配置方式
• 顯示代碼行和復制
• 修復可能存在的時序問題
• 修復訂閱(非導航區id="blog_nav_rss"無法綁定事件)

License

開源地址:https://github.com/MakerGYT/cnblogs-theme-next
MIT © MakerGYT

---

1. stevenjoezhang.Next-theme documentation[EB/OL].https://theme-next.js.org/ .2020 ↩︎

2. Ant design.定制主題[EB/OL].https://ant.design/docs/react/customize-theme-cn .2020 ↩︎

3. Github.Mastering Markdown[EB/OL].https://guides.github.com/features/mastering-markdown/ .2014 ↩︎

4. MakerGYT.排版規約[EB/OL].https://www.cnblogs.com/makergyt/p/12673064.html .2020 ↩︎