1. 程式人生 > >next-theme部落格園主題

next-theme部落格園主題

# e x T # cnblogs-theme-next next-theme部落格園主題,使用論文格式設計,專注閱讀體驗 ## 特性 - 高度還原[next-theme](https://theme-next.js.org/) - 響應式設計 - 支援目錄 - 論文規範排版、襯線字型 - 與部落格園既有特性融合 ## 預覽 ### 截圖 ![](https://static01.imgkr.com/temp/8afda14ed79b4a6393fd07026520c96e.gif) ![](https://static01.imgkr.com/temp/4e9579bc084e4740873687ef112722f5.gif) ### 樣例 [部落格園](https://www.cnblogs.com/makergyt) <=> [hexo](https://blog.makergyt.com/) ## 選型 ### 為什麼選擇部落格園 - 經常使用搜索引擎查詢某些問題會發現部落格園有著良好的SEO,相比自主建站或者其他靜態站點方式,省去了SEO優化和推送,便於更好的呈現和分享。 - 部落格園使用者大多是早期開發者,內容可信度高。由於沒有其他平臺類似的激勵計劃(比如X幣),寫文章出發點很純粹,也就不會存在用一兩句話湊一篇文章、湊一篇原創(比如CSDN),即便存在也往往就是標準答案。 - 搜尋結果比較真實,不像CSDN,通過**在大量相干不相干的廣告和文章連結中夾帶著文章**,導致可能搜尋概要中含關鍵詞但是開啟文章卻毫無干系,迫使在其環境下跳來跳去增加點選率和廣告曝光率,卻永遠找不到答案。 - 免備案,免伺服器,https,自動二級域名(xxx.cnblogs.com) - 支援標準markdown,渲染準確,可完美遷移。圖片不會像其他平臺一樣強制轉內鏈,但還往往轉不成功需要找原圖再上傳。 - **重要**:支援高度自定義,jquery於網頁的意義就好比ssh的22埠於伺服器的意義。 ### 為什麼選擇next-theme(Pisces) - 真正大道至簡。很多主題標榜極簡、專注閱讀,但往往花樣繁多。 - 可配置、可自定義、可擴充套件。 ## 使用 開啟[後臺](https://i.cnblogs.com/settings) 1. 選擇部落格面板為custom,勾選禁用模板css,申請js許可權 2. 將三個檔案內容分別複製入相應區域(頁首、頁尾、定製css) 3. 在[選項中](https://i.cnblogs.com/preference)勾選**首頁僅列出標題與摘要**,控制元件顯示勾選**公告** 4. 通過[隨筆](https://i.cnblogs.com/posts)寫文章,填寫**摘要**和**標籤**後釋出。 5. (可選),由於無法在首頁獲取頭像,如需正常顯示,手動在`foot.html`頭部配置`avatar`(可在[頭像設定](https://account.cnblogs.com/settings/account/avatar)上傳後右鍵頭像獲取連結) 其他可配置部分如下 - github:右上角跳轉github使用者名稱,預設為本倉庫連結 - author:作者,預設取後臺設定 - siteTitle:網站標題預設取後臺設定 ### 配置主題色 ```css /*custom.css*/ :root { --primary-color:#027AFF;/*預設支付寶藍*/ --body-bg-color: #f5f7f9; --content-bg-color: #fff; --text-color: rgba(0,0,0,0.65); --link-color: #555; --code-bg-color:#f0f0f0; } ``` 可通過devtools除錯來選擇 ![通過devtools除錯來選擇](https://static01.imgkr.com/temp/70ca34797054440395ffa98e2db628b7.gif) ## 開發 ### 原則 - 能通過指令碼獲取的資訊,如使用者已經在管理後臺設定的資訊,就無需再次配置 - 不應該完全自定義而脫離部落格園設定,比如個人資訊應該以預設設定為主,儘可能作為補充而不衝突 - 專注於閱讀體驗而非花裡胡哨 - 不必苛求完全與next原主題一致,畢竟該主題也一般需要改動,適合、可用即可。 ### Todo - 優化配置方式 - 程式碼行 - 修復可能存在的時