上一章節，我們介紹了Hexo的基礎搭建，搭建完大家一定發現，是英文版本的，并且頁面有點丑陋，這一章節，就來跟大家介紹Hexo的配置和主題的設定，
站點資訊
上一章有跟大家提到過_config.yml這個檔案，這個我們先稱之為站點全域的組態檔，后續我們說到主題的時候，也會有一個這樣的檔案，暫時稱它主題組態檔，
我們先來看一下全域組態檔主要有哪些內容：
# Site 站點主配置
title: Hexo # 網站標題
subtitle: # 網站副標題
description: # 網站描述
keywords: # 可以不填寫保持默認
author: John Doe # 網站擁有者昵稱
language: # 網站語言設定，一般根據依賴的主題而定
timezone: # 網站時區設定，一般不填寫保持默認
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: # 網站url設定
root: # 網站根目錄鏈接
permalink: :year/:month/:title.html # 文章鏈接，默認是按照 /年/月/日/文章標題 設定的鏈接
permalink_defaults: # 默認鏈接形式
......
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: #主題
這些可根據需要設定，其余默認即可，git配置和站點地圖配置后續用到再介紹，
資訊配置完記得執行hexo g && hexo s，重繪瀏覽器查看效果，
安裝Next主題
主題大家可以在官網下載（https://hexo.io/themes）也可以到GitHub搜索，我推薦使用Next主題，該主題幾乎占領了Hexo博客的半壁江山，
Next主題下載地址：https://github.com/theme-next/hexo-theme-next.git
這邊介紹的版本是Next6，在Next6版本上其實增加了很多Next5需要手動配置的東西，并且Next5已經停止維護了，所以建議使用Next6版本，
下載Next主題
兩種方式：
1.使用git clone命令將Next倉庫克隆到hexo目錄下的themes/next，需要在根目錄下執行，命令為：git clone https://github.com/theme-next/hexo-theme-next.git themes/next
2.直接在Github頁面上選擇綠色的按鈕Clone or Download下載壓縮包，然后解壓到themes目錄下，名字可自行修改，
設定為Next主題
打開全域組態檔_config.yml，找到theme，設定如下：
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hexo-theme-next #此處填入你在themes目錄下的next主題目錄名
測驗Next主題
在Git Bash中執行如下命令：
hexo clean && hexo g && hexo s
命令執行完成后在瀏覽器中輸入http://localhost:4000即可查看安裝好的Next主題，
配置Next主題
在主題目錄下面，也有一個_config.yml的組態檔，我們就叫它主題組態檔，下面我們開始配置，
網站圖示設定
打開_config.yml，找到favicon的位置，如下所示：
favicon:
small: /images/favicon-16x16-next.png
medium: /images/favicon-32x32-next.png
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg
#android_manifest: /images/manifest.json
#ms_browserconfig: /images/browserconfig.xml
將圖片放到你的next主題下面的source/images目錄下面，然后在主題組態檔中設定即可，
關閉底部由hexo強力驅動
在footer中，將powered和theme下的屬性全部設定為false
footer:
...
powered:
# Hexo link (Powered by Hexo).
enable: false
# Version info of Hexo after Hexo link (vX.X.X).
version: false
theme:
# Theme & scheme info link (Theme - NexT.scheme).
enable: false
# Version info of NexT after scheme info (vX.X.X).
version: false
選單欄設定
menu:
home: / || home
#about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat
# Enable / Disable menu icons / item badges.
menu_settings:
enable: true #表示是否顯示選單圖示icons
badges: false # 顯示每個選單下面有多少個內容
||后面是fontawesome中的圖示名稱，如果想要修改圖示，可以去FontAwesome官網找自己喜歡的圖示樣式，
主題風格設定
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
默認是Muse，我是使用Gemini，大家可以每個都試看看，看喜歡哪個，
社交鏈接設定
social:
GitHub: https://github.com/codernice || github
#E-Mail: mailto:[email protected] || envelope
#Weibo: https://weibo.com/yourname || weibo
#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
yourname改成你自己在對應網站的ID，前面的#注釋去掉即可，
友情鏈接設定
# Blog rolls
links_icon: link
links_title: Links
links_layout: block
#links_layout: inline
links:
#Title: http://example.com
#Title: http://example.com換成對于網站名稱和鏈接即可
開啟閱讀更多按鈕
auto_excerpt:
enable: true
length: 150
默認是false，首頁上會顯示整篇文章，設定為true開啟閱讀更多按鈕，
文章元資料設定
post_meta:
item_text: true
created_at: true
updated_at:
enable: false
another_day: true
categories: true
顯示在home頁的文章創建于、更新于、閱讀次數之類的資料
文章字數統計設定
# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: false
awl: 4
wpm: 275
該設定必須要添加hexo-symbols-count-time模塊依賴，在hexo站點根目錄下使用npm install hexo-symbols-count-time --save命令安裝模塊，
側邊欄頭像設定
# Sidebar Avatar
avatar:
# In theme directory (source/images): /images/avatar.gif
# In site directory (source/uploads): /uploads/avatar.gif
# You can also use other linking images.
url: 你的頭像地址
# If true, the avatar would be dispalyed in circle.
rounded: true # 設定頭像是否為圓形
# The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
opacity: 1 # 設定不透明度，1為完全不透明，0為完全透明
# If true, the avatar would be rotated with the cursor.
rotated: true # 設定滑鼠放到頭像上是否旋轉
代碼塊設定
codeblock:
# Manual define the border radius in codeblock, leave it blank for the default value: 1
border_radius: 7 # 按鈕圓滑度
# Add copy button on codeblock
copy_button:
enable: true # 設定是否開啟代碼塊復制按鈕
# Show text copy result
show_result: true # 是否顯示復制成功資訊
開啟文章打賞按鈕
# Reward (Donate)
reward_settings:
# If true, reward would be displayed in every article by default.
# You can show or hide reward in a specific article throuth `reward: true | false` in Front Matter.
enable: true #開啟打賞功能
animation: false
#comment: Donate comment here
reward:
wechatpay: # 微信收款圖片地址
alipay: # 支付寶收款圖片地址
#bitcoin: /images/bitcoin.png
開啟相關文章推薦功能
related_posts:
enable: true #開啟
title: # custom header, leave empty to use the default one
display_in_home: false #顯示在首頁
params:
maxCount: 5
#PPMixingRate: 0.0
#isDate: false
#isImage: false
#isExcerpt: false
需要安裝hexo-related-popular-posts模塊，在hexo站點根目錄下執行npm install hexo-related-popular-posts --save安裝模塊，
代碼塊風格設定
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal
有normal 、night 、 night eighties 、 night blue 、night bright這幾種風格，大家可以都試看看，
添加valine評論系統
# Valine
# You can get your appid and appkey from https://leancloud.cn
# More info available at https://valine.js.org
valine:
enable: true # 開啟valine評論
appid: # your leancloud application appid
appkey: # your leancloud application appkey
notify: false # mail notifier, See: https://github.com/xCss/Valine/wiki
verify: false # Verification code
placeholder: # comment box placeholder
avatar: monsterid # gravatar style
guest_info: nick,mail,link # custom comment header
pageSize: 10 # pagination size
language: # language, available values: en, zh-cn
visitor: false # leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors' for counter compatibility. Article reading statistic https://valine.js.org/visitor.html
comment_count: true # if false, comment count will only be displayed in post page, not in home page
valine是第三方插件，需要到https://leancloud.cn注冊賬號，獲取到appid和appkey后放到這里即可，avatar是設定默認頭像，可以到https://valine.js.org/avatar選擇默認頭像，然后在這里設定名字即可，
開啟百度分享
# Baidu Share
# Available values: button | slide
# Warning: Baidu Share does not support https.
baidushare:
type: button # 設定分享按鈕的風格，有button何slide形式
開啟needmoreshare分享
needmoreshare2:
enable: false
postbottom:
enable: false
options:
iconStyle: box
boxForm: horizontal
position: bottomCenter
networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
float:
enable: false
options:
iconStyle: box
boxForm: horizontal
position: middleRight
networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
needmoreshare2依賴theme-next-needmoreshare2模塊，要開啟的朋友可以到https://github.com/theme-next/theme-next-needmoreshare2 找到方法，
設定文章閱讀量
leancloud_visitors:
enable: true
app_id:
app_key:
# Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
# If you don't care about security in leancloud counter and just want to use it directly
# (without hexo-leancloud-counter-security plugin), set `security` to `false`.
security: false
betterPerformance: true
appid和appkey跟上面開啟valine評論使用的leanCloud是一樣的，如果發現文章閱讀量不顯示，可以到leanCloud后臺的存盤選單下，創建Class，命名為Counter.
開啟不蒜子統計功能
busuanzi_count:
enable: true
total_visitors: true #開啟總訪客（uv）
total_visitors_icon: user
total_views: true #開啟總訪問數（pv）
total_views_icon: eye
post_views: false
post_views_icon: eye
這邊的post_views和上面的leanCloud_visitors沖突，兩者都是顯示文章閱讀量，只開啟一個就可以了，
開啟本地博客搜索功能
local_search:
enable: false
# If auto, trigger search by changing input.
# If manual, trigger search by pressing enter key or search button.
trigger: auto
# Show top n results per article, show all results by setting to -1
top_n_per_article: 1
# Unescape html strings to the readable one.
unescape: false
該功能依賴hexo-generator-searchdb插件，使用命令npm install hexo-generator-searchdb --save來進行安裝，然后在全域組態檔的末尾，加入以下代碼即可，
search:
path: search.xml
field: post
format: html
limit: 10000
總結
以上就是hexo博客常用的基本配置以及基于Next主題的一些設定，更多功能大家可在使用中逐摸索，歡迎討論交流，
需要安裝的模塊依賴
1.字數統計：npm install hexo-symbols-count-time --save
2.相關文章推薦：npm install hexo-related-popular-posts --save
3.本地博客搜索功能：npm install hexo-generator-searchdb --save，然后在全域組態檔末尾加入代碼
第三方插件
1.valine評論系統：需要到https://leancloud.cn注冊賬號，獲取到appid和appkey
2.文章閱讀量：同樣需要用到leancloud的appid和appkey
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/123486.html
標籤：Html/Css
上一篇：在vue專案中使用less