使用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

picture10


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

  • 進入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,再進主頁,問題就解決了!


(四) 增加本地搜尋功能

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

  1. 安裝 hexo-generator-searchdb,在站點的根目錄下執行以下命令:

     npm install hexo-generator-searchdb --save
    複製程式碼
  2. 編輯部落格配置檔案,新增以下內容到任意位置:

     search:
     	  path: search.xml
     	  field: post
     	  format: html
     	  limit: 10000
    複製程式碼
  3. 編輯主題配置檔案,啟用本地搜尋功能:

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

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


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

相關文章