1、安裝NexT
1.1肆资、下載主題:
-
通過clone最新版本:(推薦)
之后的更新就可以使用git pull來更新郑原,而不用再次下載壓縮包替換
cd your-hexo-site #切換到站點(diǎn)目錄
git clone https://github.com/iissnan/hexo -theme-next themes/next
-
下載壓縮包:
NexT版本的發(fā)布頁面
選擇下載 Download 區(qū)域下的 Source Code (zip) 到本地
解壓重命名為next犯犁,放置到thems目錄下
1.2女器、 啟用主題 :
打開 站點(diǎn)配置文件, 找到 theme 字段涣澡,并將其值更改為 next
theme: next
在切換主題之后入桂、驗(yàn)證之前, 我們最好使用 hexo clean 來清除 Hexo 的緩存
1.3馁蒂、 驗(yàn)證主題:
首先啟動(dòng) Hexo 本地站點(diǎn)远搪,并開啟調(diào)試模式(即加上 --debug)逢捺,整個(gè)命令是 hexo s --debug劫瞳。 在服務(wù)啟動(dòng)的過程,注意觀察命令行輸出是否有任何異常信息涮因,如果你碰到問題伺绽,這些信息將幫助他人更好的定位錯(cuò)誤奈应。 當(dāng)命令行輸出中提示出:
INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
此時(shí)即可使用瀏覽器訪問 http://localhost:4000,檢查站點(diǎn)是否正確運(yùn)行肩榕。
2株汉、主題設(shè)定
主題特性
目前 NexT 支持三種特性歌殃,通過修改Scheme可以選擇特性褒翰,他們分別是:
- Muse - 默認(rèn) Scheme优训,這是 NexT 最初的版本揣非,黑白主調(diào)躲因,大量留白
- Mist - Muse 的緊湊版本大脉,整潔有序的單欄外觀
- Pisces - 雙欄 Scheme,小家碧玉似的清新
打開主題配置文件琐驴,搜索 scheme 關(guān)鍵字秤标。 你會(huì)看到有三行 scheme 的配置苍姜,將你需用啟用的 scheme 前面注釋 # 去除即可衙猪。
#scheme: Muse
#scheme: Mist
scheme: Pisces
設(shè)置語言
編輯站點(diǎn)配置文件,將language設(shè)置成你需要的語言丝格,以簡(jiǎn)體中文為例:
language: zh-Hans
目前NexT支持的語言如以下表所示:
設(shè)置菜單
菜單配置包括三個(gè)部分铁追,第一為菜單項(xiàng)(名稱和鏈接)琅束,第二是菜單項(xiàng)顯示的文本算谈,第三是菜單項(xiàng)對(duì)應(yīng)的圖標(biāo)然眼,NexT 使用的是 Font Awesome提供的圖標(biāo)。
編輯主題配置文件屿岂,找到menu字段:
- 設(shè)定菜單項(xiàng)名稱
menu:
home: / || home
archives: /archives/ || archive
categories: /categories/ || th
#schedule: /schedule
tags: /tags/ || tags
about: /about/ || user
#search: /search/
commonweal: /404.html/ || heartbeat
#sitemap: /sitemap.xml
此處填坑:
item_name后除了名稱外爷怀,還需要跟一個(gè)對(duì)應(yīng)名稱圖標(biāo)名字运授,比如archive的圖標(biāo)名為archive,如若不然圖標(biāo)將顯示為柒室?(默認(rèn))逗宜。
archives: /archives/ || archive
NexT默認(rèn)的菜單項(xiàng)有(標(biāo)注 的項(xiàng)表示需要手動(dòng)創(chuàng)建這個(gè)頁面):
- 設(shè)置菜單的顯示文本
若你需要添加一個(gè)菜單項(xiàng)不脯,首先要設(shè)定菜單項(xiàng)的名稱防楷,再設(shè)定菜單項(xiàng)的顯示文本则涯,最后設(shè)定菜單項(xiàng)圖標(biāo)粟判;比如添加一個(gè)something,那么就需要到next目錄下的language/zh-Hans.yml(以簡(jiǎn)體中文為例)文件中角钩,找到menu字段递礼,添加一項(xiàng):
menu:
home: 首頁
archives: 歸檔
categories: 分類
tags: 標(biāo)簽
about: 關(guān)于
search: 搜索
commonweal: 公益404
something: 有料 #新添加的
- 設(shè)定菜單項(xiàng)圖標(biāo)
對(duì)應(yīng)字段為menu_icons,此設(shè)定格式是 item name: icon name脊髓,其中 item name 與上一步所配置的菜單名字對(duì)應(yīng)栅受,icon name 是 Font Awesome 圖標(biāo)的 名字。而 enable 可用于控制是否顯示圖標(biāo)痰腮,你可以設(shè)置成 false 來去掉圖標(biāo)律罢。
menu_icons:
enable: true
# Icon Mapping.
home: home
archives: archive
categories: th
tags: tags
about: user
commonweal: heartbeat
#search: search
設(shè)置側(cè)欄
可以通過修改 主題配置文件 中的 sidebar 字段來控制側(cè)欄的行為弟翘。側(cè)欄的設(shè)置包括兩個(gè)部分稀余,其一是側(cè)欄的位置趋翻, 其二是側(cè)欄顯示的時(shí)機(jī)踏烙。
- 設(shè)置側(cè)欄的位置,修改sidebar.position值
sidebar:
position: left #設(shè)定在左邊顯示
#position: right
- 設(shè)定側(cè)欄顯示時(shí)機(jī)辟癌,修改sdiebar.display的值
#display: post #默認(rèn)行為黍少,在文章頁面(擁有目錄列表)時(shí)顯示
#display: always #再所以頁面都顯示
display: hide #在所有頁面中都隱藏(可以手動(dòng)展開)
#display: remove #完全移除
設(shè)置頭像
編輯主題配置文件厂置,修改avatar字段魂角,值設(shè)置為頭像圖片的鏈接地址野揪。
avatar: http://example.com/avatar.png
也可以將圖片放置到theme/source/images目錄下囱挑,命名為avatar.png:
avatar: /images/avatar.png #配置
設(shè)置作者、描述
編輯站點(diǎn)配置文件:
# Site
title: #博客主頁名字
subtitle: #副標(biāo)題(第二個(gè)名字)
description: #描述
author: #作者
language: zh-Hans
timezone: #時(shí)區(qū)游添,可不設(shè)置
添加標(biāo)簽頁面
-
新建頁面:
前面通過修改next主題下的_config.yml文件中的menu選項(xiàng)唆涝,可以在主頁面的菜單欄添加標(biāo)簽選項(xiàng)廊酣,但是此時(shí)點(diǎn)擊標(biāo)簽,跳轉(zhuǎn)的頁面會(huì)顯示page not found晓猛。
cd your-hexo-site
hexo new page tags #新建標(biāo)簽頁面
輸入命令后戒职,在xx.github.io/source會(huì)生成一個(gè)tags文件夾透乾,其中有個(gè)index.md文件乳乌。
-
設(shè)置頁面類型:
修改index.md汉操,添加type:tags
---
title: tags
date: 2016-11-15 19:10:05
type: tags
---
-
設(shè)置文章的標(biāo)簽:
當(dāng)要為某篇文章添加標(biāo)簽時(shí),只需在文章開頭設(shè)置相應(yīng)標(biāo)簽即可客情。
---
title: test1 #文章標(biāo)簽
date: 2017-09-20 13:29:11
tags: #標(biāo)簽
- test1
- one
- two
categories: 測(cè)試 #分類
---
ps:注意這是在新建文章里添加標(biāo)簽
添加分類梭伐、關(guān)于頁面
cd your-hexo-site
hexo new page categories/about
--------------------------------------
修改index.md文件中type類型分別為categories和about即可
- 文章添加分類
---
title: test1
date: 2017-09-20 13:29:11
tags:
- test1
- one
- two
categories: 測(cè)試 #添加為測(cè)試類
---
ps:注意這是在新建文章里添加分類
- 添加關(guān)于我
---
title: 關(guān)于我
date: 2017-09-17 10:22:54
type: about
comments: false
---
一只學(xué)習(xí)pyhton的小菜鳥糊识,歡迎分享知識(shí)摔蓝。
QQ:12345678
Email:12345678@qq.com
ps:注意這是在about文件夾里修改index.md文件
效果如下:
添加本地搜索功能
- 安裝 hexo-generator-searchdb贮尉,在站點(diǎn)的根目錄下執(zhí)行以下命令:
npm install hexo-generator-searchdb --save
- 編輯 站點(diǎn)配置文件猜谚,新增以下內(nèi)容到任意位置:
search:
path: search.xml
field: post
format: html
limit: 10000
- 編輯 主題配置文件,啟用本地搜索功能:
# Local search
local_search:
enable: true #true開啟
效果如下:
3坚芜、 引入第三方功能
加入數(shù)據(jù)統(tǒng)計(jì)與分析功能
-
注冊(cè)百度統(tǒng)計(jì):
在這里使用的是百度統(tǒng)計(jì)進(jìn)行數(shù)據(jù)統(tǒng)計(jì)和分析鸿竖,
點(diǎn)擊百度統(tǒng)計(jì)缚忧,注冊(cè)站長賬戶杈笔,并填寫域名,完成注冊(cè)登錄桩撮。
- 在跳轉(zhuǎn)的頁面中,復(fù)制hm.js后的id值:
-
添加baidu_analytics字段:
編輯 主題配置文件峰弹, 修改字段 baidu_analytics店量,值設(shè)置成你的百度統(tǒng)計(jì)腳本 id
參考文章:
NexT官網(wǎng)文檔
Hexo的Next主題配置
基于Hexo+Node.js+github+coding搭建個(gè)人博客——進(jìn)階篇(從入門到入土)
nMask's Blog
hexo參考文檔