e x T

1 特性

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

2 預覽

2.1 截圖

2.2 樣例

博客園 <=> hexocss

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.0html

打開後臺react

選擇博客皮膚爲custom,勾選禁用模板css,申請js權限
將三個文件內容分別複製入相應區域(頁首、頁尾、定製css)
在選項中勾選首頁僅列出標題與摘要,控件顯示勾選公告
經過隨筆寫文章，填寫摘要和標籤後發佈。
(可選),因爲沒法在首頁獲取頭像，如需正常顯示，手動在foot.html頭部配置avatar(可在頭像設置上傳後右鍵頭像獲取連接)

4.2 配置

4.2.1 信息配置

github: 右上角跳轉github用戶名,默認爲本倉庫連接
author: 做者，默認取後臺設置
siteTitle: 網站標題默認取後臺設置
gallery: 要展現的相冊ID(新建相冊後在url中獲取ID，如1796566)

4.2.2 主題色配置

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

/*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調試來選擇預覽

git

4.2.3 建議

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

5 開發

5.1 原則

能經過腳本獲取的信息，如用戶已經在管理後臺設置的信息，就無需再次配置
不該該徹底自定義而脫離博客園設置，好比我的信息應該以默認設置爲主,儘量做爲補充而不衝突
專一於閱讀體驗而非花裏胡哨
沒必要苛求徹底與next原主題一致，畢竟該主題也通常須要改動，適合、可用便可。

5.2 Todo

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

6 License

stevenjoezhang.Next-theme documentation[EB/OL].https://theme-next.js.org/ .2020 ↩︎markdown
Ant design.定製主題[EB/OL].https://ant.design/docs/react/customize-theme-cn .2020 ↩︎hexo
Github.Mastering Markdown[EB/OL].https://guides.github.com/features/mastering-markdown/ .2014 ↩︎ssh
MakerGYT.排版規約[EB/OL].https://www.cnblogs.com/makergyt/p/12673064.html .2020 ↩︎

next-theme博客園主題

e x T

1 特性

2 預覽

2.1 截圖

2.2 樣例

3 選型

3.1 爲何選擇博客園

3.2 爲何選擇next-theme(Pisces)

4 使用

4.1 基本步驟

4.2 配置

4.2.1 信息配置

4.2.2 主題色配置

4.2.3 建議

5 開發

5.1 原則

5.2 Todo

6 License