next-theme部落格園主題
阿新 • • 發佈:2020-07-01
# 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
- 優化配置方式
- 程式碼行
- 修復可能存在的時