在上篇文章中提到了如何免費通過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主題個性化教程:打造炫酷網站
最後附上部落格地址 拾憶的部落格