由于我們新搭建的基于Hexo的博客默認的博客主題都為主題默認,系統默認多多少少會有點不如人意,那么這就需要我們自己一步步的進行設置了。
在 Hexo 中有兩份主要的配置文件,其名稱都是_config.yml
。 其中,一份位于站點根目錄下(Blog目錄下),主要包含 Hexo 本身的配置;另一份位于主題目錄下(Blog-->themes-->next),這份配置由主題作者提供,主要用于配置主題相關的選項。
為了描述方便,在以下說明中,將前者稱為站點配置文件, 后者稱為 主題配置文件。
** 切記所有的配置文件所有屬性的設置,其:
后必須有一個空格。
安裝theme
你可以到Hexo官網主題頁去搜尋自己喜歡的theme。那么我們這里以hexo-theme-next為例
終端cd到 blog
目錄下執行如下命令:
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
將blog
目錄下_config.yml
里theme
的名稱landscape
修改為next
終端cd到blog
目錄下執行如下命令(每次部署文章的步驟):
$ hexo clean //清除緩存文件 (db.json) 和已生成的靜態文件 (public)
$ hexo g //生成緩存和靜態文件
$ hexo d //重新部署到服務器
到這里,接著上篇文章的配置,就可以看到如下的界面:
主題設定
選擇 Scheme
NexT為我們提供了多種不同的外觀,我們可以根據自己的喜好進行配置。
- Muse - 默認 Scheme,這是 NexT 最初的版本,黑白主調,大量留白
- Mist - Muse 的緊湊版本,整潔有序的單欄外觀
- Pisces - 雙欄 Scheme,小家碧玉似的清新
修改的話去主題配置文件下搜索scheme
取消前邊的#即可。
#scheme: Muse
#scheme: Mist
scheme: Pisces
設置預覽摘要
設置完模式后,讀者們會發現,盡管首頁顯示的是所有文章的列表,但是每一篇文章都顯示了所有內容,這樣感覺看起來不舒服,這時候可以啟用預覽摘要模式,在主題配置文件中找到auto_excerpt
屬性,將enable
設置為true
,將length
設置為想要預覽到的字數
auto_excerpt:
enable: true
length: 150
設置語言
編輯站點配置文件
搜索language
設置你需要的語言,例如簡體中文:
language: zh-Hans
設置菜單
菜單配置包括三個部分,第一是菜單項(名稱和鏈接),第二是菜單項的顯示文本,第三是菜單項對應的圖標。 NexT 使用的是 Font Awesome 提供的圖標, Font Awesome 提供了 600+ 的圖標,可以滿足絕大的多數的場景,同時無須擔心在 Retina 屏幕下 圖標模糊的問題。
編輯主題配置文件
搜索menu字段,菜單內容的設置格式是:item name: link
。其中 item name 是一個名稱,用于匹配圖標以及翻譯。
menu:
home: /
archives: /archives
#about: /about
#categories: /categories
tags: /tags
#commonweal: /404.html
設置菜單項的顯示文本。在上一步中設置的菜單的名稱并不直接用于界面上的展示。Hexo 在生成的時候將使用 這個名稱查找對應的語言翻譯,并提取顯示文本。這些翻譯文本放置在 NexT 主題目錄下的 languages/{language}.yml ({language} 為你所使用的語言)。
當我們需要增加我們自定義的菜單選項的時候,可以采用下邊的方法
以簡體中文為例,若你需要添加一個菜單項,比如 something。那么就需要修改簡體中文對應的翻譯文件 languages/zh-Hans.yml,在 menu 字段下添加一項:
menu:
home: 首頁
archives: 歸檔
categories: 分類
tags: 標簽
about: 關于
search: 搜索
commonweal: 公益404
something: 有料
設定菜單項的圖標,對應的字段是 menu_icons
。 此設定格式是 item name: icon name
,其中 item name
與上一步所配置的菜單名字對應,icon name
是 Font Awesome
圖標的 名字。而 enable
可用于控制是否顯示圖標,你可以設置成 false
來去掉圖標。(注意嚴格區分大小寫)
menu_icons:
enable: true
# Icon Mapping.
home: home
about: user
categories: th
tags: tags
archives: archive
commonweal: heartbeat
然后在Hexo根目錄執行指令如下:
// 添加分類頁面
hexo new page "categories"
// 添加標簽頁面
hexo new page "tags"
// 添加關于頁面
hexo new page "about"
執行完上述指令后,在Hexo根目錄/source/
文件夾下創建三個文件夾,命名分別為:categories
、tags
、about
文件夾,在這些文件夾中分別會創建一個以index
命名的Markdown
文件,對這三個Markdown
文件內容進行修改,使之分別為:
---
title: categories
date: 2017-03-12 22:06:24
type: "categories"
---
---
title: 標簽
date: 2017-03-12 17:27:16
type: "tags"
---
---
title: about
date: 2017-03-12 22:07:26
type: "about"
---
完成文件的修改,然后部署Hexo即可完成菜單選項的添加。
設置側邊欄
可以通過修改 主題配置文件
中的 sidebar
字段來控制側欄的行為。側欄的設置包括兩個部分,其一是側欄的位置, 其二是側欄顯示的時機。
sidebar:
position: left 或者 right
設置側欄顯示的時機,修改 sidebar.display
的值
- post - 默認行為,在文章頁面(擁有目錄列表)時顯示
- always - 在所有頁面中都顯示
- hide - 在所有頁面中都隱藏(可以手動展開)
- remove - 完全移除
sidebar:
display: post
設置頭像
編輯 主題配置文件
, 修改字段 avatar
, 值設置成頭像的鏈接地址。其中,頭像的鏈接地址可以是:
完整的互聯網url: http://example.com/avatar.png
站點內的地址: 將頭像放置主題目錄下的 source/uploads/(新建 uploads 目錄若不存在)
配置為:avatar: /uploads/avatar.png
或者 放置在 source/images/ 目錄下
配置為:avatar: /images/avatar.png
avatar: uploads/avatar.png
設置作者昵稱
設置站點配置文件
,編輯author
字段。
站點描述/個性簽名
設置站點配置文件
,編輯description
字段。
閱讀次數統計
閱讀統計我這邊使用的是LeanCloud。參考 Doublemine 的文章 為NexT主題添加文章閱讀量統計功能
集成流程如下:
進入LeanCloud注冊賬號且驗證郵箱之后。
點擊控制臺 --------> 點擊創建應用-------->彈出的對話框,給應用起個相對有意義的名字-------->左邊的側邊欄點擊創建class-------->新建的class命名為Counter
,權限設置為無限制-------->點擊頁面側邊欄上的設置按鈕-------->點擊應用Key-------->賦值AppID和AppKey-------->在主題配置文件
的相應位置填入既可(在配置文件中搜索leancloud_visitors
進行填寫,防止重復設置):
leancloud_visitors:
enable: true
app_id: joaeuuc4hsqudUUwx4gIvGF6-gzGzoHsz
app_key: E9UJsJpw1omCHuS22PdSpKoh
為了安全起見,選擇剛才的設置界面下的安全中心,在Web 安全域名
中填入我們自己的博客域名,來確保數據調用的安全.
添加社交鏈接
我們如果希望在個人博客中加入自己的簡書和Github鏈接以提高訪問量,接下來了解一下社交鏈接如何添加:
- 添加鏈接
在主題配置文件
中找到social
屬性,在其下方添加社交鏈接,其格式為:社交平臺名稱:鏈接
。例如:
social:
Github: https://github.com //這里寫你個人的github的主頁地址
- 添加鏈接圖表
鏈接的圖標全部來自于Font Awesome ,其配置方式也很簡單,在主題配置文件中找到social_icons
,修改其狀態值為true
,然后配置對應鏈接的圖標,其格式為:社交平臺名稱(與添加鏈接名稱保持一致): Font Awesome中的圖標的名字(區分大小寫)
social_icons:
enable: true
Github: github
添加評論功能
- 注冊有言賬號
打開友言官網,單擊“注冊”按鈕后,按照流程注冊賬號。 - 獲取uid
注冊完成之后會在下方看到后臺管理,點擊進入可看到自己的用戶ID,將其復制下來。
- 主題配置文件設置uid
打開主題配置文件
在其中找到屬性youyan_uid
,然后在:后添加之前復制的uid
youyan_uid: 你剛才復制的有言uid
到這里,進行部署,在我們的博客上就能看到評論功能了。
添加搜索功能
更多搜索服務可以點擊這里傳送門
- 注冊Algolia,創建Index
在Algolia官網注冊一個賬戶,完成賬戶注冊后,創建一個Index,如下圖:
![Uploading QQ20170802-104759@2x_135446.png . . .]
- 安裝Hexo Algolia(我按照官方給出的教程進行安裝,當我
Hexo Algolia
的時候提示我FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
,網上查了下,說可能是因為git的版本太新,卸載換舊版本就好。為此我放棄了這種方法。)
在Hexo根目錄執行如下指令,進行Hexo Algolia的安裝:
npm install --save hexo-algolia
執行完指令后,讀者們可能會發現安裝失敗,或發現安裝成功后實現的搜索功能可以搜索但是不可以點擊搜索到的文章,這是因為5.1.0版本NexT在package.json
文件的配置中存在錯誤。
到Hexo
的根目錄,在其中找到package.json
文件,修改其中的hexo-algolia
屬性值為^0.2.0
"hexo-algolia": "^0.2.0"
然后再執行上述的安裝指令。
- 獲取Key,修改站點配置
完成Hexo Algolia后,回到Algolia官網的Dashboard,在左側導航欄選擇API Keys一項,跳轉到如下圖所示的頁面:
基于這個頁面的Key,編輯站點配置文件,在文件內容最后添加如下圖所示的信息,包括 ApplicationID
、Search-Only API Key
、 Admin API Key
和indexName
,其中apiKey
就是Search-Only API Key
:
algolia:
applicationID: 'applicationID'
apiKey: 'apiKey'
adminApiKey: 'adminApiKey'
indexName: 'indexName'
chunkSize: 5000
當配置完成,在站點根目錄下執行 hexo algolia
來更新 Index。請注意觀察命令的輸出。
![Upload QQ20170802-134155@2x.png failed. Please try again.]
更改主題配置文件
,找到 Algolia Search
配置部分:
# Algolia Search
algolia_search:
enable: false
hits:
per_page: 10
labels:
input_placeholder: Search for Posts
hits_empty: "We didn't find any results for the search: ${query}"
hits_stats: "${hits} results found in ${time} ms"
將 enable
改為 true
即可,根據需要你可以調整 labels 中的文本。
Local Search搜索服務(這個搜索服務相對簡單,只需要簡單三步就能實現搜索服務)
- 安裝
hexo-generator-searchdb
,在站點的根目錄下執行以下命令:
$ npm install hexo-generator-searchdb
- 編輯
站點配置文件
,新增以下內容到任意位置:
search:
path: search.xml
field: post
format: html
limit: 10000
- 編輯
主題配置文件
,啟用本地搜索功能:
# Local search
local_search:
enable: true
添加友情鏈接功能
相信我們的朋友之間也有很多使用其他博客搭建工具如wordpress、jekyll等來搭建自己的博客,寫的文章多了,當然希望可以收獲更多的流量,這時候好友之間就會互相幫忙,在自己的博客上添加好友的博客鏈接。實現功能如下:
在主題配置文件中找到links
屬性,修改links_title
屬性的值為“友情鏈接”(也可以是其他文案),然后添加上好友的博客名稱和博客地址,其格式如下:
博客名稱: 博客鏈接
例如:
links_title: 友情鏈接
links:
Mr_默: https://moandroid.github.io
部署好之后,這樣就實現了友情鏈接了,大家可以去自己博客地址看下。
更多炫酷的效果可以參照[ hexo的next主題個性化教程]