寫在前面

本文為個人前一篇文章hexo搭建個人博客--基礎(chǔ)篇的后續(xù)篇，前文主要介紹了如何搭建一個個人網(wǎng)站以及綁定域名等相關(guān)內(nèi)容，還沒有建站的伙伴們可以看一下前文殖告，已經(jīng)搭建好的就可以忽略了村生。
本文的優(yōu)化是基于Hexo的NexT主題的冰木，其他主題的疑問也可以在后臺或評論區(qū)一起溝通交流沿量。

目錄

1 實(shí)用性優(yōu)化

• 基本使用（_config.yml文件配置）
• 添加RSS
• 添加標(biāo)簽浪慌、分類等頁面
• 設(shè)置網(wǎng)站icon
• 添加側(cè)邊欄社交鏈接
• 添加側(cè)邊欄友情鏈接
• 底部顯示建站時間和圖標(biāo)的修改
• 微信支付寶打賞功能
• 關(guān)閉網(wǎng)站動畫效果
• 設(shè)置第三方JS庫
• 添加評論系統(tǒng)
• 統(tǒng)計訪客量以及文章閱讀量
• 閱讀次數(shù)統(tǒng)計（基于LanCloud）
• 字?jǐn)?shù)統(tǒng)計
• 增加版權(quán)信息
• 添加文章分享功能
• 文章排序優(yōu)先級設(shè)置
• 添加站內(nèi)搜索功能
• DaoVoice在線聯(lián)系

2 個性化優(yōu)化

• 設(shè)置字體
• 設(shè)置代碼高亮主題
• 左上角或右上角的Github樣式
• 添加背景動畫
• 添加頂部加載條
• 點(diǎn)擊出現(xiàn)小愛心效果
• 修改文章鏈接文本樣式
• 修改文章底部標(biāo)簽樣式
• 文章末尾統(tǒng)一添加“文本結(jié)束”標(biāo)記
• 修改作者頭像并旋轉(zhuǎn)
• 文章添加陰影效果
• 修改打賞部分字體動畫
• 自定義鼠標(biāo)樣式
• 添加看板娘

正文

以下修改保存后均可通過hexo g && hexo s指令在本地http://localhost:4000查看修改，另外通過hexo d發(fā)布到GitHub pages 或 Coding pages上面通過綁定的域名在線查看效果朴则。

實(shí)用性優(yōu)化

基本使用

上一篇文章已經(jīng)講過如何安裝Hexo权纤，不了解的小伙伴可以參考一下我的上一篇文章，或者訪問Hexo文檔來了解如何安裝Hexo佛掖。

在Hexo中有兩個很重要的名為_config.yml的文件妖碉，其中一個在站點(diǎn)安裝的根目錄下，另一個在主題目錄下芥被。前者提供了Hexo自身的一些基本配置信息欧宜，后者為你所安裝的主題的相關(guān)配置。為了方便區(qū)分拴魄，我們把前者稱為站點(diǎn)配置文件冗茸，后者稱為主題配置文件。

站點(diǎn)配置文件

文件路徑站點(diǎn)根目錄/_config.yml匹中，編輯軟件推薦使用Sublime Text 夏漱。
這里貼一下個人的部分配置，可以改一下相關(guān)內(nèi)容自行體會一下效果：

# Site
title: Alvabill
subtitle: Stay Hungry, Stay Foolish
author: Alvabill
description: "Alvabill個人站顶捷，主要涉及前端知識共享挂绰、實(shí)踐教程、前沿技術(shù)共同學(xué)習(xí)等方面"  #網(wǎng)站描述 SEO
language: en
timezone: Asia/Shanghai

“title”：博客的名稱服赎。
“subtitle”：根據(jù)主題的不同葵蒂，有的會顯示有的不會顯示。
“description”：主要用于SEO重虑，告訴搜索引擎一個關(guān)于站點(diǎn)的簡單描述践付，通常建議在其中包含網(wǎng)站的關(guān)鍵詞。
“author”：作者名稱缺厉，用于主題顯示文章的作者永高。
“l(fā)anguage”：語言會對應(yīng)的解析正在應(yīng)用的主題中的languages文件夾下的不同語言文件。所以這里的名稱要和languages文件夾下的語言文件名稱一致提针。
“timezone”：可不填寫命爬。

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://alvabill.ml
root: /
permalink: :title/
permalink_defaults:

“url”：一般填寫自己的站點(diǎn)鏈接。
“root”：設(shè)置根目錄的位置辐脖。如果你的網(wǎng)站存放在子目錄中遇骑，例如 http://yoursite.com/blog，則應(yīng)該將你的 url 設(shè)為http://yoursite.com/blog 并把 root 設(shè)為 /blog/揖曾。
“permalink”：生成的鏈接的格式落萎。帶井號的是默認(rèn)的格式亥啦，帶有日期感覺怪怪的，改成了自己喜歡的格式练链。規(guī)則也比較簡單翔脱，標(biāo)簽前面要加英文冒號。
“permalink_defaults”: 生成鏈接中各部分的默認(rèn)值

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
  - README.md
  - CNAME

目錄一般不需要修改媒鼓，這里需要改動的是skip_render届吁，跳過指定文件的渲染，這里寫上去著兩個文件名便可绿鸣，在上一篇文章中已經(jīng)詳細(xì)描述過這里就不累贅了疚沐。

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

書寫相關(guān)的設(shè)置
“new_post_name”：新的博文的文件名
“default_layout:“ 默認(rèn)布局
“filename_case: 0“ #把文件名稱轉(zhuǎn)換為 (1) 小寫或 (2) 大寫
“render_drafts: false“ 是否顯示草稿
“post_asset_folder: false“ #是否啟動資源文件夾
“relative_link: false“ #把鏈接改為與根目錄的相對位址
“future: true “
“highlight:“ #代碼塊的設(shè)置，Hexo自帶的代碼高亮插件

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

分類和標(biāo)簽的設(shè)置
“default_category”：如果撰寫文章時沒有設(shè)置分類潮模，默認(rèn)的分類選擇亮蛔。
“category_map”：用于映射分類的別名。
“tag_map”：用法和分類別名是一樣的擎厢。

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository:
    github: git@github.com:Alvabill/Alvabill.github.io.git,master
    coding: git@git.coding.net:Alvabill/Alvabill.git,master

“theme”：主題拓展究流，可以在主題商店選擇其他主題，這里使用next
“deploy”：部署方式动遭，前文已經(jīng)詳細(xì)描述芬探，不再累贅。

主題配置文件

文件路徑站點(diǎn)根目錄/themes/next/_config.yml厘惦，編輯軟件推薦使用Sublime Text 偷仿。
這里先選擇主題：

# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes  # NexT 主題提供三種布局
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini

主題選擇，在前面加#注釋掉其他的宵蕉，這里我們選Mist酝静，其他主題你們也可以體驗(yàn)一下，不過不保證本教程的優(yōu)化全部適配哦国裳，不過選擇其他主題的小伙伴遇到的問題也歡迎在評論區(qū)提出一起交流形入。

添加RSS

在主題配置文件中有NexT默認(rèn)的RSS設(shè)置全跨，默認(rèn)為留空缝左，這時使用 Hexo 生成的 Feed 鏈接，需要先安裝 hexo-generator-feed插件浓若。
在站點(diǎn)根目錄打開git bash渺杉，安裝插件：

$ npm install --save hexo-generator-feed

修改站點(diǎn)配置文件，在最后添加以下代碼：

feed: # RSS訂閱插件
  type: atom
  path: atom.xml
  limit: 0

plugins: hexo-generate-feed

修改主題配置文件如下：

# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml

實(shí)現(xiàn)效果：

添加標(biāo)簽挪钓、分類等頁面

1 修改主題配置文件是越，在菜單項(xiàng)添加以下內(nèi)容：

# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu:
  home: /
  archives: /archives/
  tags: /tags/
  categories: /categories/
  about: /about/
  #sitemap: /sitemap.xml
  #commonweal: /404/

這里可以添加圖標(biāo)，個人不是很喜歡所以沒有添加碌上，圖標(biāo)的代碼就在以上代碼的下邊，可以自行修改體驗(yàn)。

2 新建頁面
在站點(diǎn)根目錄輸入以下代碼新建頁面：

$ hexo new page tags
$ hexo new page categories
$ hexo new page about

archives頁面不需要新建须板，NexT主題自帶了乌逐；tags、categories頁面需要設(shè)置類型械媒，即打開站點(diǎn)根目錄\source\tags、站點(diǎn)根目錄\source\categories分別進(jìn)行修改：

如果有集成評論服務(wù)，頁面也會帶有評論冕香。因?yàn)楹竺嫖覀儠砑釉u論系統(tǒng)所以這里需要添加字段 comments 并將值設(shè)置為 false。

設(shè)置網(wǎng)站icon

主題配置文件中第一行代碼就是網(wǎng)站icon設(shè)置后豫，這里你只需要找到你喜歡的logo把它制作成ico格式然后改名favicon.ico悉尾，放到/themes/next/source/images下面即可。

# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico # 網(wǎng)站logo

添加側(cè)邊欄社交鏈接

主要修改主題配置文件的社交鏈接和對應(yīng)圖標(biāo)：

# Social Links
# Key is the link label showing to end users.
# Value is the target link (E.g. GitHub: https://github.com/iissnan)
social:  # 添加你的社交賬號
  #LinkLabel: Link
  GitHub: https://github.com/Alvabill
  fcc: https://www.freecodecamp.cn/alvabill
  簡書: http://www.reibang.com/u/439a6eee60e1
  CSDN: http://blog.csdn.net/weixin_38796712
# Social Links Icons
# Icon Mapping:
#   Map a menu item to a specific FontAwesome icon name.
#   Key is the name of the item and value is the name of FontAwesome icon. Key is case-senstive.
#   When an globe mask icon presenting up means that the item has no mapping icon.
social_icons:
  enable: true
  icons_only: false
  transition: false
  # Icon Mappings.
  # KeyMapsToSocialItemKey: NameOfTheIconFromFontAwesome
  fcc: free-code-camp
  GitHub: github
  簡書: book
  CSDN: rotate-right 

實(shí)現(xiàn)效果如下：

添加側(cè)邊欄友情鏈接

修改主題配置文件：

# Blog rolls  推薦閱讀
links_title: Links
#links_layout: block
links_layout: inline
links:
  Web前端導(dǎo)航: http://www.alloyteam.com/nav/
  創(chuàng)造獅導(dǎo)航: http://www.chuangzaoshi.com/code
  前端書籍資料: http://www.36zhen.com/t?id=3448
  掘金醬: http://e.xitu.io/
  V2EX: https://www.v2ex.com/
  印記中文: https://www.v2ex.com/

實(shí)現(xiàn)效果：

底部顯示建站時間和圖標(biāo)修改

修改主題配置文件：

# Specify the date when the site was setup
since: 2018 # 建站年份

# icon between year and author @Footer
authoricon: snowflake-o

實(shí)現(xiàn)效果：

雪花圖標(biāo)需要用到最新的fa圖標(biāo)庫挫酿，后面會介紹如何設(shè)置默認(rèn)庫构眯。

微信支付寶打賞功能

在主題配置文件中的微信or支付寶收款地址處填入收款二維碼圖片即可：

# Reward
#reward_comment: 堅(jiān)持原創(chuàng)技術(shù)分享，您的支持將鼓勵我繼續(xù)創(chuàng)作饭豹！
wechatpay: http://p3dm71oa7.bkt.clouddn.com/wcpay.png
alipay: http://p3dm71oa7.bkt.clouddn.com/zfbpay.jpg
#bitcoin: /images/bitcoin.png

實(shí)現(xiàn)效果：

關(guān)閉網(wǎng)站動畫效果

為了追求更快的響應(yīng)速度我們可以把網(wǎng)站的大部分動畫關(guān)掉鸵赖，這里修改主題配置文件的一行代碼即可：

# Motion
use_motion: [false/true]

設(shè)置第三方JS庫

在主題配置文件中設(shè)定成合適的 CDN 地址，此特性可以加速靜態(tài)資源（JavaScript 第三方庫）的加載拄衰。
例如：

# Script Vendors.
# Set a CDN address for the vendor you want to customize.
# For example
#    mquery: https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js
# Be aware that you should use the same version as internal ones to avoid potential problems.
# Please use the https protocol of CDN files when you enable https on your site.
vendors:
  # Internal path prefix. Please do not edit it.
  _internal: lib

  # Internal version: 2.1.3
  jquery: //cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js

  # Internal version: 2.1.5
  # See: http://fancyapps.com/fancybox/
  fancybox: //cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.pack.js
  fancybox_css: //cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.min.css

  # Internal version: 1.0.6
  # See: https://github.com/ftlabs/fastclick
  fastclick: //cdn.jsdelivr.net/fastclick/1.0.6/fastclick.min.js

  # Internal version: 1.9.7
  # See: https://github.com/tuupola/jquery_lazyload
  lazyload: //cdn.jsdelivr.net/jquery.lazyload/1.9.3/jquery.lazyload.min.js

  # Internal version: 1.2.1
  # See: http://VelocityJS.org
  velocity: //cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js

  # Internal version: 1.2.1
  # See: http://VelocityJS.org
  velocity_ui: //cdn.jsdelivr.net/velocity/1.2.3/velocity.ui.min.js

  # Internal version: 0.7.9
  # See: https://faisalman.github.io/ua-parser-js/
  ua_parser: //cdn.jsdelivr.net/ua-parser.js/0.7.10/ua-parser.min.js

  # Internal version: 4.6.2
  # See: http://fontawesome.io/
  fontawesome: //maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

  # Internal version: 1
  # https://www.algolia.com
  algolia_instant_js:
  algolia_instant_css:

  # Internal version: 1.0.2
  # See: https://github.com/HubSpot/pace
  # Or use direct links below:
  # pace: //cdn.bootcss.com/pace/1.0.2/pace.min.js
  # pace_css: //cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-flash.min.css
  pace: //cdn.bootcss.com/pace/1.0.2/pace.min.js
  pace_css: //cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-flash.min.css

  # Internal version: 1.0.0
  # https://github.com/hustcc/canvas-nest.js
  canvas_nest: //cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js

添加評論系統(tǒng)

NexT支持的第三方的評論系統(tǒng)有很多它褪，不過不少已經(jīng)關(guān)閉不再可用了，而且對于國內(nèi)來說比較友好的現(xiàn)在應(yīng)該就只有來必力翘悉，當(dāng)然喜歡折騰的小伙伴可以嘗試一下其他的或者自建評論系統(tǒng)茫打。這里就先介紹目前最簡單可行的方案，也就是來必力妖混。

獲取來必力id：
登陸 來必力 注冊獲取老赤，這里要注意，這個韓國的系統(tǒng)注冊啥的真的太慢了制市，所以要記住不要耐不住關(guān)閉頁面或者狂刷新抬旺，耐心等待就好。
注冊后點(diǎn)擊導(dǎo)航上邊的安裝祥楣，選擇免費(fèi)的city版本：

點(diǎn)擊現(xiàn)在安裝后填入網(wǎng)站的一些信息就可以獲取到安裝代碼开财，框中的就是你的來必力id：

復(fù)制上邊的id，在主題配置文件里面搜索livere_uid误褪，在后面添加來必力id即可：

# Support for LiveRe comments system.
# You can get your uid from https://livere.com/insight/myCode (General web site)
livere_uid: {你的來必力id}

另外可以點(diǎn)擊用戶頭像進(jìn)入管理界面?zhèn)€性化你的評論系統(tǒng)：

最終實(shí)現(xiàn)效果:

統(tǒng)計訪客量以及文章閱讀量

NexT主題集成了不蒜子統(tǒng)計功能：

# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
# 不蒜子統(tǒng)計功能
busuanzi_count:
  # count values only if the other configs are false
  enable: false
  # custom uv span for the whole site
  site_uv: false
  site_uv_header: <i class="fa fa-user"></i>
  site_uv_footer:
  # custom pv span for the whole site
  site_pv: false
  site_pv_header: <i class="fa fa-eye"></i>
  site_pv_footer:
  # custom pv span for one page only
  page_pv: false
  page_pv_header: <i class="fa fa-file-o"></i>
  page_pv_footer:

當(dāng)enable: true時责鳍，代表開啟全局開關(guān)。若site_uv兽间、site_pv历葛、page_pv的值均為false時，不蒜子僅作記錄而不會在頁面上顯示嘀略。
當(dāng)site_uv: true時恤溶，代表在頁面底部顯示站點(diǎn)的UV值乓诽。
當(dāng)site_pv: true時，代表在頁面底部顯示站點(diǎn)的PV值咒程。
當(dāng)page_pv: true時问裕，代表在文章頁面的標(biāo)題下顯示該頁面的PV值（閱讀數(shù)）。
site_uv_header和site_uv_footer這幾個為自定義樣式配置孵坚，相關(guān)的值留空時將不顯示粮宛，可以使用（帶特效的）font-awesome。
示例：

enable: true
# 效果：本站訪客數(shù)12345人次
site_uv: true
site_uv_header: 本站訪客數(shù)
site_uv_footer: 人次
# 效果：本站總訪問量12345次（一般不開啟這個）
site_pv: true
site_pv_header: 本站總訪問量
site_pv_footer: 次
# 效果：本文總閱讀量12345次
page_pv: true
page_pv_header: 本文總閱讀量
page_pv_footer: 次

閱讀次數(shù)統(tǒng)計（基于LeanCloud）

相比不蒜子的統(tǒng)計卖宠，LeanCloud的文章閱讀量統(tǒng)計更加穩(wěn)定靠譜巍杈，所以本人也把網(wǎng)站的文章內(nèi)統(tǒng)計改為LeanCloud的了。
設(shè)置方法參考該文章--傳送門

實(shí)現(xiàn)效果：

字?jǐn)?shù)統(tǒng)計

用于統(tǒng)計文章的字?jǐn)?shù)以及分析出閱讀時間扛伍。
在主題配置文件中筷畦，搜索wordcount，設(shè)置為下面這樣就可以了：

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  min2read: true
  wordcount: true
  separated_meta: true

再打開\themes\next\layout\_macro\post.swig文件刺洒，在leancloud-visitors-count后面位置添加一個分割符：

實(shí)現(xiàn)效果：

另外鳖宾，在/themes/next/layout/_partials/footer.swig文件endif %}前加上下面代碼可以實(shí)現(xiàn)在站點(diǎn)底部統(tǒng)計全站字?jǐn)?shù)：

<div class="theme-info">
  <span class="post-count">Total Words:{{ totalcount(site) }}</span>
</div>

實(shí)現(xiàn)效果：

如果無法顯示可能是hexo-wordcount插件沒有安裝，git bash在網(wǎng)站根目錄安裝一下就可以：

$ npm install hexo-wordcount --save

增加版權(quán)信息

在目錄themes/next/layout/_macro/下添加my-copyright.swig逆航，代碼如下：

{% if page.copyright %}
<div class="my_post_copyright">
  <script src="http://cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
  
  <!-- JS庫 sweetalert 可修改路徑 -->
  <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <p><span>本文標(biāo)題:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
  <p><span>文章作者:</span><a href="/" title="訪問 {{ theme.author }} 的個人博客">{{ theme.author }}</a></p>
  <p><span>發(fā)布時間:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>原始鏈接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
    <span class="copy-path"  title="點(diǎn)擊復(fù)制文章鏈接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="復(fù)制成功鼎文！"></i></span>
  </p>
  <p><span>許可協(xié)議:</span><i class="fa fa-creative-commons"></i> <a rel="license"  target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商業(yè)性使用-禁止演繹 4.0 國際</a> 轉(zhuǎn)載請保留原文鏈接及作者。</p>  
</div>
<script> 
    var clipboard = new Clipboard('.fa-clipboard');
    $(".fa-clipboard").click(function(){
      clipboard.on('success', function(){
        swal({   
          title: "",   
          text: '復(fù)制成功',
          icon: "success", 
          showConfirmButton: true
          });
    });
    });  
</script>
{% endif %}

在目錄themes/next/source/css/_common/components/post/下添加my-post-copyright.styl：

.my_post_copyright {
  width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #b5b5b5;
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #a3d2a3;
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}

修改themes/next/layout/_macro/post.swig因俐，在代碼:

    {% if theme.wechat_subscriber.enabled and not is_index %}
      <div>
        {% include 'wechat-subscriber.swig' %}
      </div>
    {% endif %}

前面添加代碼：

<div>
      {% if not is_index %}
        {% include 'my-copyright.swig' %}
      {% endif %}
</div>

修改themes/next/source/css/_common/components/post/post.styl文件拇惋，在最后一行增加代碼：

@import "my-post-copyright"

最后到站點(diǎn)根目錄/scaffolds/post.md，在兩個---中間增加一行：

copyright: true

之后的每一篇文章都會自己加上版權(quán)信息抹剩，之前的文章也可以通過在文章對應(yīng)的md文件頭部加上以上代碼添加版權(quán)信息撑帖。

添加分享文章功能

這里我們使用AddThis，為什么呢澳眷，曬一下我的樣式你就知道了：

具體選擇什么樣式可以在AddThis網(wǎng)站上面設(shè)置胡嘿。
首先注冊賬號（需要科學(xué)上網(wǎng)），注冊后找到該位置：

# Share  分享
#jiathis: true
# Warning: JiaThis does not support https. 博主實(shí)測支持https
add_this_id: {your AddThis ID}

具體添加方式如下箍土，可以選擇多種樣式：

添加文章評分功能

通過widgetpack來給網(wǎng)站每篇文章添加評分系統(tǒng)逢享，效果如下：

首先注冊賬號罐监，添加新站點(diǎn)吴藻，填入網(wǎng)站名稱和域名地址，點(diǎn)擊添加：

獲取id：

# Star rating support to each article.
# To get your ID visit https://widgetpack.com
rating:
  enable: true
  id:  {your ID}    #<app_id>
  color:  fc6423

這里建議設(shè)置為按ip地址記錄評分沟堡，比較方便：

文章排序優(yōu)先級設(shè)置

修改hero-generator-index插件侧但，把文件node_modules/hexo-generator-index/lib/generator.js內(nèi)的代碼替換為：

'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 兩篇文章top都有定義
            if(a.top == b.top) return b.date - a.date; // 若top值一樣則按照文章日期降序排
            else return b.top - a.top; // 否則按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是只有一篇文章top有定義，那么將有top的排在前面（這里用異或操作居然不行233）
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都沒定義按照文章日期降序排
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

在\scaffolds\post.md頭部---中添加以下代碼：

top:  

以后新建文章就可以給文章的top賦值航罗，數(shù)值越大優(yōu)先級越高禀横。

已經(jīng)寫好的文章在對應(yīng)的md文件頭部添加top：{number}即可

添加站內(nèi)搜索功能

這里使用Algolia，其他的都不太靠譜粥血。
前往Algolia注冊頁面柏锄，注冊一個新賬戶「纯鳎可以使用GitHub或者Google賬戶直接登錄趾娃，注冊后的14天內(nèi)擁有所有功能（包括收費(fèi)類別的）。之后若未續(xù)費(fèi)會自動降級為免費(fèi)賬戶缔御，免費(fèi)賬戶總共有10,000條記錄抬闷，每月有100,000的可以操作數(shù)。注冊完成后耕突，創(chuàng)建一個新的Index笤成，這個Index將在后面使用。

$ npm install --save hexo-algolia

找到新建的Index對應(yīng)的Key，復(fù)制下面的App ID和API Key雇逞，同時修改權(quán)限:

在站點(diǎn)配置文件（注意是站點(diǎn)配置文件）末尾荤懂，新增配置代碼：

#添加搜索
algolia:
  applicationID: '{your appID}'
  apiKey: 'your API Key'
  indexName: 'your Index name'
  chunkSize: 5000

在站點(diǎn)根目錄執(zhí)行以下代碼，更新Index(每次更新文章都需要執(zhí)行一次)塘砸，即上傳站點(diǎn)內(nèi)容到algolia：

$ export HEXO_ALGOLIA_INDEXING_KEY={your API Key}
$ hexo algolia

更改主題配置文件节仿，搜索algolia_search：

# Algolia Search
algolia_search:
  enable: true
  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即可，根據(jù)需要你可以調(diào)整labels中的文本掉蔬。

DaoVoice 在線聯(lián)系

實(shí)現(xiàn)效果：

{% if theme.daovoice %}
  <script>
  (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "http://widget.daovoice.io/widget/0f81ff2f.js","daovoice")
  daovoice('init', {
      app_id: "{{theme.daovoice_app_id}}"
    });
  daovoice('update');
  </script>
{% endif %}

接著打開主題配置文件蛉迹，在最后寫下如下代碼：

# Online contact
daovoice: true
daovoice_app_id: {your app_id}

具體樣式設(shè)計可以在 應(yīng)用設(shè)置-->聊天設(shè)置 后邊改傅寡。

個性化優(yōu)化

設(shè)置字體

在主題配置文件中設(shè)置，例如：

font:
  enable: true

  # 外鏈字體庫地址，例如 //fonts.googleapis.com (默認(rèn)值)
  host:

  # 全局字體荐操，應(yīng)用在 body 元素上
  global:
    external: true
    family: Monda

  # 標(biāo)題字體 (h1, h2, h3, h4, h5, h6)
  headings:
    external: true
    family: Roboto Slab

  # 文章字體
  posts:
    external: true
    family:

  # Logo 字體
  logo:
    external: true
    family: Lobster Two
    size: 24

  # 代碼字體芜抒，應(yīng)用于 code 以及代碼塊
  codes:
    external: true
    family: PT Mono

設(shè)置代碼高亮主題

NexT 默認(rèn)使用的是 normal 主題，可選的值有 normal托启，night宅倒， night blue， night bright屯耸， night eighties：

# Code Highlight theme
# Available value:
#    normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal

效果：

設(shè)置小型代碼塊顏色

修改\themes\next\source\css\_variables\base.styl文件拐迁，修改$code-background和$code-foreground的值：

// Code & Code Blocks
// --------------------------------------------------
$code-font-family               = $font-family-monospace
$code-font-size                 = 13px
$code-font-size                 = unit(hexo-config('font.codes.size'), px) if hexo-config('font.codes.size') is a 'unit'
$code-border-radius             = 3px
$code-foreground                = $black-light
$code-background                = $gainsboro

左上角或右上角的Github樣式

實(shí)現(xiàn)效果有兩種：

添加背景動畫

NexT已經(jīng)自帶了多種背景動畫效果，你只需要根據(jù)需求在主題配置文件修改其中一個為true即可持痰。

# Canvas-nest 
canvas_nest: false

# three_waves
three_waves: false

# canvas_lines
canvas_lines: false

# canvas_sphere
canvas_sphere: false

# Only fit scheme Pisces
# Canvas-ribbon
canvas_ribbon: false

實(shí)現(xiàn)效果：

引用自http://shenzekun.cn

添加頂部加載條

在主題配置文件中搜索pace：

# Progress bar in the top during page loading. 加載條
pace: true
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-minimal

這里有多種主題選擇灶搜，根據(jù)自己喜好選擇主題修改便可。

點(diǎn)擊出現(xiàn)小愛心效果

效果：

引用自http://shenzekun.cn

<script type="text/javascript" src="/js/src/love.js"></script>

修改文章內(nèi)鏈接文本樣式

修改文件 themes\next\source\css\_common\components\post\post.styl割卖，在末尾添加如下css樣式：

// 文章內(nèi)鏈接文本樣式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

修改文章底部標(biāo)簽樣式

修改/themes/next/layout/_macro/post.swig，搜索 rel="tag">#患雏，將 # 換成<i class="fa fa-tag"></i>

實(shí)現(xiàn)效果：

文章末尾統(tǒng)一添加“本文結(jié)束”標(biāo)記

在路徑\themes\next\layout\_macro中新建passage-end-tag.swig文件,并添加以下內(nèi)容：

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #555;font-size:14px;">-------------The End-------------</div>
    {% endif %}
</div>

接著打開\themes\next\layout\_macro\post.swig文件鹏溯，在這個位置添加代碼：

要添加的代碼如下：

<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

然后打開主題配置文件，在末尾添加：

# 文章末尾添加“本文結(jié)束”標(biāo)記
passage_end_tag:
  enabled: true

實(shí)現(xiàn)效果：

修改作者頭像并旋轉(zhuǎn)

打開\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;
  /* 設(shè)置循環(huán)動畫 [animation: (play)動畫名稱 (2s)動畫播放時長單位秒或微秒 (ase-out)動畫播放的速度曲線為以低速結(jié)束 
    (1s)等待1秒然后開始動畫 (1)動畫播放次數(shù)(infinite為循環(huán)播放) ]*/
 
  /* 鼠標(biāo)經(jīng)過頭像旋轉(zhuǎn)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 {
  /* 鼠標(biāo)經(jīng)過停止頭像旋轉(zhuǎn) 
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/
  /* 鼠標(biāo)經(jīng)過頭像旋轉(zhuǎn)360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}
/* Z 軸旋轉(zhuǎn)動畫 */
@-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);
  }
}

文章添加陰影效果

打開\themes\next\source\css\_custom\custom.styl,向里面加入：

// 主頁文章添加陰影效果
 .post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }

實(shí)現(xiàn)效果：

修改打賞部分字體動畫

Next打賞部分的動畫是鬼畜一般的不停地抖動丙挽，看著很難受，所以博主把它改為只循環(huán)三遍匀借，打開文件themes/next/source/css/_common/components/post/post-reward.styl颜阐，把微信和支付寶的改為如下：

#wechat:hover p{
    animation: roll 0.1s 3 linear;
    -webkit-animation: roll 0.1s 3 linear;
    -moz-animation: roll 0.1s 3 linear;
}
#alipay:hover p{
    animation: roll 0.1s 3 linear;
    -webkit-animation: roll 0.1s 3 linear;
    -moz-animation: roll 0.1s 3 linear;
}

自定義鼠標(biāo)樣式

打開themes/next/source/css/_custom/custom.styl，添加代碼：

// 鼠標(biāo)樣式
  * {
      cursor: url("http://om8u46rmb.bkt.clouddn.com/sword2.ico"),auto!important
  }
  :active {
      cursor: url("http://om8u46rmb.bkt.clouddn.com/sword1.ico"),auto!important
  }

其中 url 里面必須是 ico 圖片吓肋，ico 圖片可以上傳到網(wǎng)上（推薦七牛云圖床）凳怨，然后獲取外鏈，復(fù)制到 url 里就行了是鬼。

添加看板娘

實(shí)現(xiàn)效果：

用git bash在站點(diǎn)根目錄執(zhí)行如下代碼：

$ npm install hexo-helper-live2d --save

然后打開/themes/next/layout/_layout.swig,將下面代碼放到</body>之前：

{{ live2d() }}

在站點(diǎn)配置文件末尾添加代碼：

## 看板娘
live2d:
  model: hijiki
  position: left
  bottom: -30
  mobileShow: false  #手機(jī)端不顯示

具體設(shè)置可以看官方介紹--傳送門肤舞。

學(xué)習(xí)借鑒的文章

1. http://shenzekun.cn/hexo%E7%9A%84next%E4%B8%BB%E9%A2%98%E4%B8%AA%E6%80%A7%E5%8C%96%E9%85%8D%E7%BD%AE%E6%95%99%E7%A8%8B.html
2. http://blog.csdn.net/MasterAnt_D/article/details/56839222
3. http://blog.csdn.net/lemonxq/article/details/72676005