使用next主題配置部落格基本資訊

拾憶sky發表於2018-03-05

在上篇文章中提到了如何免費通過github和hexo建立一個自己的部落格，在此將通過next為例，演示一遍配置的過程（喜歡其他主題的可以在此繞過了）

一、前言

常用命令及檔案地址：

部署到本地預覽檢視三部曲：
hexo clean （清除快取）
hexo g (生成靜態網頁)
hexo s (本地啟動預覽檢視)

部署到git伺服器上：
hexo deploy 

部落格配置檔案地址：
~/blog/_config.yml
主題配置檔案地址
~/blog/themes/next/_config.yml
複製程式碼

後面不再重複解釋

二、next主題的安裝和基本配置

（一）安裝

首先從github上clone到本地，在終端cd 到blog資料夾（即你通過Hexo init生成的根目錄），然後在終端輸入命令：

git clone https://github.com/iissnan/hexo-theme-next themes/next
複製程式碼

進入blog的全域性配置檔案：_config.yml （在blog資料夾下 /blog/_config.yml）

找到theme欄位：設定為

theme: next
複製程式碼

此時可以檢視下主題是否配置成功，執行上面提到的三部曲（ 終端cd到blog資料夾執行 hexo clean , hexo g , hexo s ）然後訪問http://localhost:4000/,在本地檢視效果，進行預覽

（二）基本資訊的配置

更多的部落格和主題的配置可參考 hexo官方文件和 next主題文件，如不想那麼麻煩，可以繼續往下看，下面就是我使用的一些常用的功能，足夠自己使用了

1、網站標題、作者、語言

在部落格配置檔案_config.yml中進行如下配置

# Site
title: 拾憶的技術部落格
subtitle: 小白的技術成長之路
description: 小白的技術成長之路
author: 拾憶
language: zh-Hans
timezone: Asia/Shanghai （如不填，則表示預設電腦的時區）
複製程式碼

這裡設定標題作者名字等資訊，其中language一項最好配置成zh-Hans（簡體中文），（檢視next主題支援哪些語言可檢視~/blog/themes/next/languages資料夾）

2、next主題的風格設定

在主題配置檔案_config.yml中進行如下配置

next預設有四種風格，可根據自己喜歡的樣式去設定檢視

# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini
複製程式碼

我這裡使用的是Mist樣式，其中#表示註釋，使用哪種去掉前面的#即可，後不再說明

3、設定選單選項

開啟主題配置檔案：

先奉上我的配置方便大家去參考：

menu:
  home: / || home
  categories: /categories || th
  about: /about || user
  archives: /archives || archive
  tags: /tags || tags
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

# Enable/Disable menu icons.
menu_icons:
  enable: true
  # Icon Mapping.
  home: home
  about: user
  categories: th
  tags: tags
  archives: archive
複製程式碼

其中menu表示配置選單內容，menu_icons表示選單圖片，如需使用圖片則在menu中設定值的後面加上 || 圖片名

（1）常用的預設選單項，其中home和archives兩頁是系統預設的就有的，其他的需要自己建立，後面會講到

鍵值	設定值	顯示文字（簡體中文）
home	home: /	主頁
archives	archives: /	歸檔頁
categories	categories: /categories	分類頁
tags	tags: /tags	標籤頁
about	about: /about	關於頁面

（2）設定選單項的顯示文字。在第一步中設定的選單的名稱並不直接用於介面上的展示。Hexo 在生成的時候將使用這個名稱查詢對應的語言翻譯，並提取顯示文字。這些翻譯文字放置在 NexT 主題目錄下的 languages/{language}.yml （{language} 為你所使用的語言）。

以簡體中文為例，若你需要新增一個選單項，比如 something。那麼就需要修改簡體中文對應的翻譯檔案 languages/zh-Hans.yml，在 menu 欄位下新增一項：

menu:
  home: 首頁
  archives: 歸檔
  categories: 分類
  tags: 標籤
  about: 關於
複製程式碼

（3）設定選單項的圖示，對應的欄位是 menu_icons。此設定格式是 item name: icon name，其中 item name 與上一步所配置的選單名字對應，icon name 是 Font Awesome 圖示的名字,去掉字首icon-(或使用圖示庫中的圖片名稱)。而 enable 可用於控制是否顯示圖示，你可以設定成 false 來去掉圖示。next主題預設整合了識別Font Awesome圖片的方式，只需要在裡面找到想要圖示的名稱，就可以拿過來使用

# Enable/Disable menu icons.
menu_icons:
  enable: true
  # Icon Mapping.
  home: home
  about: user
  categories: th
  tags: tags
  archives: archive
複製程式碼

請注意鍵值（如 home）的大小寫要嚴格匹配

4、建立上述選單選項中對應的頁面

（1）分類頁面

終端中cd 進入blog資料夾，執行 hexo new page "categories" 然後在~/blog/source 資料夾中即可看到categories資料夾，開啟裡面的index.md檔案，設定如下（注意：後面要加空格）：

---
title: 分類 （title可以自定義）
type: categories （記住你寫的type型別，後面分類文章需要使用）
---
複製程式碼

這時候上一步中選單項的配置才會生效

menu:
    home: /
    archives: /archives
    categories: /categories
複製程式碼

這時候如執行本地檢視會發現開啟後沒有任何東西，下面會告訴大家使用方法

（2）標籤頁面

同分類介面相同，終端中cd 進入blog資料夾，執行 hexo new page "tags" 然後在~/blog/source 資料夾中即可看到tags資料夾，開啟裡面的index.md檔案，設定如下（注意：後面要加空格）：

---
title: 標籤 （title可以自定義）
type: tags （記住你寫的type型別，後面分類文章需要使用）
---
複製程式碼

執行開啟後同樣什麼都不會有

（3）關於頁面

同理，開啟index.md檔案後，只需要配置標題即可

---
title: 自我介紹
date: 2018-02-28 17:11:54
---
複製程式碼

然後下面填寫正文即可（這是我使用的方式，但是“關於”介面也可以使用其他方式配置，如配置個連結等，這裡大家自行百度即可）

5、給文章新增分類和標籤

首先建立一個文章，上篇文章末尾有講到，終端cd 進入blog資料夾，執行 hexo new "文章名字"，開啟文章（在~/blog/source/_posts資料夾下）,然後進行如下配置：

---
title: 標題
date: 2018-03-02 09:36:14
tags: [blog] （注意：使用[]，將需要新增的標籤寫進去，多個標籤用,分隔，categories同理）
categories: [blog]
---
複製程式碼

儲存，此時再去執行檢視，點選分類和標籤頁面就會看到自己的文章了，不再是空的了

但是經過上述操作，發現每建立一篇文章都要在上面去加標籤等欄位，如果後期功能多的話，可能會要加很多欄位，比較麻煩，這裡有個比較相對容易的方式不用每次都去新增那些欄位首先開啟檔案 ~/blog/scaffolds/post.md ,進行如下配置：

---
title: {{ title }}
date: {{ date }}
tags: {{ tags }}
categories: 
---

你會發現，之後再建立文章時，文章上方會自動新增這些欄位
複製程式碼

6.修改作者頭像並旋轉

開啟主題配置檔案，修改欄位 avatar，值設定成頭像的連結地址

將頭像放置主題目錄下的 source/uploads/ （新建 uploads 目錄若不存在）配置為：

avatar: /uploads/avatar.png

或者放置在 source/images/ 目錄下配置為：

avatar: /images/avatar.png

或直接放上鍊接，如： avatar: http://example.com/avatar.png

此時頭像設定完成，如需實現旋轉效果則按如下過程：

開啟~\blog\themes\next\source\css_common\components\sidebar\sidebar-author.styl，在裡面新增如下程式碼：

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;

  /* 頭像圓形 */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;

  /* 設定迴圈動畫 [animation: (play)動畫名稱 (2s)動畫播放時長單位秒或微秒 (ase-out)動畫播放的速度曲線為以低速結束 
    (1s)等待1秒然後開始動畫 (1)動畫播放次數(infinite為迴圈播放) ]*/
 

  /* 滑鼠經過頭像旋轉360度 */
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  transition: transform 1.0s ease-out;
}

img:hover {
  /* 滑鼠經過停止頭像旋轉 
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/

  /* 滑鼠經過頭像旋轉360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}

/* Z 軸旋轉動畫 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}
複製程式碼

7.頭像下方新增自己的github等資訊

開啟主題配置檔案，找到social欄位，配置如下，大家可根據自己情況去配置，圖片的使用方法同選單欄一樣

social:
  GitHub: https://github.com/username || github
  #E-Mail: 
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype

social_icons:
  enable: true
  #icons_only: false
  #transition: false
  GitHub: github
複製程式碼

8.給站點新增友情連結功能

開啟主題配置檔案，進行如下配置：

	links_title: 友情連結
	links:
	    #百度: http://www.baidu.com/
	    #新浪: http://example.com/
複製程式碼

三、next主題的高階配置和一些炫酷的效果

（一）增加評論系統

百度了一下最新的訊息，當前版本的next主題中已經內建支援了各種各樣的評論系統，但由於政策的原因（需要實名評論），導致大多數的評論外掛都已經失效了，而國外的一些載入比較慢。

這裡附上gitment的評論整合方式整合流程

gitment（依託於github issue，能夠自己管理，而且被牆的概率小），不過相容性不太好（需要chrome核心才行），本人使用的gitment，有一個小問題，就是每次釋出文章時需要登入下自己的github賬號去初始化一下評論，評論功能才能使用，否則會提示“未開放評論”

Hypercomments 是國外的一個第三方評論平臺

多說在2017年06月01日就關閉評論服務了

網易雲跟貼 2017年08月01日也停止服務了

來必力 (韓國人弄的)總是亂碼

DISQUS 外國的，載入慢

（二）隱藏網頁底部powered By Hexo / 強力驅動

開啟主題配置檔案，找到如下圖位置，將powered設定為 false，theme下的enable 設定為 false

（三）設定首頁文章列表不顯示全文(只顯示預覽)

進入hexo部落格專案的themes/next目錄
開啟_config.yml檔案

搜尋"auto_excerpt",找到如下部分：

  # Automatically Excerpt. Not recommand.
  # Please use <!-- more --> in the post to control excerpt accurately.
  auto_excerpt:
    enable: false
    length: 150
複製程式碼

把enable改為對應的false改為true，length設定下，然後hexo d -g，再進主頁，問題就解決了！

（四）增加本地搜尋功能

新增百度/谷歌/本地自定義站點內容搜尋

安裝 hexo-generator-searchdb，在站點的根目錄下執行以下命令：
```
 npm install hexo-generator-searchdb --save
複製程式碼
```

編輯部落格配置檔案，新增以下內容到任意位置：

 search:
 	  path: search.xml
 	  field: post
 	  format: html
 	  limit: 10000
複製程式碼

編輯主題配置檔案，啟用本地搜尋功能：

 # Local search
 local_search:
   enable: true
複製程式碼

（五）其他炫酷效果可參考 hexo的next主題個性化教程:打造炫酷網站

最後附上部落格地址 拾憶的部落格

GitHub + Hexo搭建自己部落格(二) Next主題配置
2019-02-20
GithubHexo
用Hexo主題next做了一個部落格！
2020-12-15
Hexo
next主題配置與優化
2020-12-16
優化
部落格園主題&美化
2024-04-05
部落格園主題美化
2024-08-28
修改部落格園主題
2024-10-28
部落格園SimpleMemory主題美化
2020-08-01
部落格園主題設定
2024-08-07
部落格園主題美化教程
2024-06-08
部落格園美化-Awescnb主題
2024-11-03
自定義部落格園主題
2022-06-15
部落格園 SimpleMemory 主題美化
2020-11-29
手摸手帶你用Hexo擼部落格(二)之配置主題
2020-12-30
Hexo
部落格園主題折騰記
2024-03-09
VuePress部落格美化之reco主題
2020-07-28
Vue
部落格園自用主題美化 - Light
2020-06-12
GithubPages+Hexo部落格主題Yilia
2019-02-19
GithubHexo
部落格園 geek 主題備份
2024-11-26
你要的部落格園主題都有！！！
2020-05-19
搭建部落格 (Hexo + github + butterfly主題)
2024-06-09
HexoGithub
部落格園主題美化（僅相容 Markdown）
2022-07-11
WordPress主題 Hankin v2.0.1部落格主題模板
2022-02-20
Hexo部落格搭建+主題優化+外掛配置+常用操作+錯誤分析
2019-03-24
Hexo優化
搭建自己的技術部落格系列（六）酷炫主題icarus常用配置整合版，快速搞定部落格首頁
2019-09-14
Hexo+NexT（零）：最全Hexo+Next搭建部落格教程
2019-06-30
Hexo
關於 CLOI 頭像&部落格主題徵集
2024-07-17
部落格園主題修改分享 - 過年篇
2023-01-10
部落格園主題樣式更改總結
2022-03-24
還在美化部落格嗎？試試一鍵更換部落格主題吧！
2019-07-22
部落格主頁地址
2024-10-10
【hexo】一個好看的個人部落格主題
2018-12-20
Hexo
部落格折騰記——tranquilpeak主題個性化
2018-10-14
UI
hexo主題更換以及怎麼寫部落格
2018-07-23
Hexo
如何處理CSDN部落格主頁404問題
2020-10-21
部落格園主題美化中BUG修復方法
2022-03-27
Hexo部落格（Snail主題）搭建回顧概覽
2022-01-29
HexoAI
部落格園主題分享-仿FANFOU-小清新主題
2021-08-13
個人部落格配置
2024-08-14