Hexo之Next主題

由于我們新搭建的基于Hexo的博客默認的博客主題都為主題默認,系統默認多多少少會有點不如人意,那么這就需要我們自己一步步的進行設置了。

在 Hexo 中有兩份主要的配置文件,其名稱都是_config.yml。 其中,一份位于站點根目錄下(Blog目錄下),主要包含 Hexo 本身的配置;另一份位于主題目錄下(Blog-->themes-->next),這份配置由主題作者提供,主要用于配置主題相關的選項。

為了描述方便,在以下說明中,將前者稱為站點配置文件, 后者稱為 主題配置文件
** 切記所有的配置文件所有屬性的設置,其:后必須有一個空格。

安裝theme

你可以到Hexo官網主題頁去搜尋自己喜歡的theme。那么我們這里以hexo-theme-next為例

next配置文件的文檔傳送門

終端cd到 blog
目錄下執行如下命令:

$ git clone https://github.com/iissnan/hexo-theme-next themes/next

blog目錄下_config.ymltheme的名稱landscape修改為next

終端cd到blog目錄下執行如下命令(每次部署文章的步驟):

$ hexo clean           //清除緩存文件 (db.json) 和已生成的靜態文件 (public)
$ hexo g             //生成緩存和靜態文件
$ hexo d             //重新部署到服務器

到這里,接著上篇文章的配置,就可以看到如下的界面:

QQ20170801-190321.png

主題設定

選擇 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 nameFont 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/文件夾下創建三個文件夾,命名分別為:categoriestagsabout文件夾,在這些文件夾中分別會創建一個以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,將其復制下來。
32352346-7342-4DC5-A633-8127A99BA860.png
  • 主題配置文件設置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一項,跳轉到如下圖所示的頁面:
QQ20170802-111306@2x.png

基于這個頁面的Key,編輯站點配置文件,在文件內容最后添加如下圖所示的信息,包括 ApplicationIDSearch-Only API KeyAdmin API KeyindexName,其中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主題個性化教程]

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容