next-theme博客園主題

e x T

特性

• 高度還原next-theme
• 響應式設計
• 支持目錄、閱讀進度
• 論文規範排版、襯線字體
• 與博客園既有特性融合
• 代碼高亮選用github風格
• 優化評論區、上下文切換

預覽

截圖

樣例

博客園 <=> hexo

選型

爲何選擇博客園

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

爲何選擇next-theme(Pisces)

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

使用

打開後臺

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

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

配置主題色

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

開發

原則

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

Todo

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