2. 程式人生 > >hexo搭建個人部落格--NexT主題優化

hexo搭建個人部落格--NexT主題優化

阿新 • • 發佈：2019-01-03

寫在前面

本文為個人前一篇文章hexo搭建個人部落格–基礎篇的後續篇，前文主要介紹瞭如何搭建一個個人網站以及繫結域名等相關內容，還沒有建站的夥伴們可以看一下前文，已經搭建好的就可以忽略了。
本文的優化是基於Hexo的NexT主題的，其他主題的疑問也可以在後臺或評論區一起溝通交流。

目錄

1 實用性優化
- 基本使用（_config.yml檔案配置）
- 新增RSS
- 新增標籤、分類等頁面
- 設定網站icon
- 新增側邊欄社交連結
- 新增側邊欄友情連結
- 底部顯示建站時間和圖示的修改
- 微信支付寶打賞功能
- 關閉網站動畫效果
- 設定第三方JS庫
- 新增評論系統
- 統計訪客量以及文章閱讀量
- 閱讀次數統計（基於LanCloud）
- 字數統計
- 增加版權資訊
- 新增文章分享功能
- 文章排序優先順序設定
- 新增站內搜尋功能
- DaoVoice線上聯絡

2 個性化優化
- 設定字型
- 設定程式碼高亮主題
- 左上角或右上角的Github樣式
- 新增背景動畫
- 新增頂部載入條
- 點擊出現小愛心效果
- 修改文章連結文字樣式
- 修改文章底部標籤樣式
- 文章末尾統一新增“文字結束”標記
- 修改作者頭像並旋轉
- 文章新增陰影效果
- 修改打賞部分字型動畫
- 自定義滑鼠樣式
- 新增看板娘

正文

以下修改儲存後均可通過hexo g && hexo s指令在本地http://localhost:4000檢視修改，另外通過hexo d釋出到GitHub pages 或 Coding pages上面通過繫結的域名線上檢視效果。

實用性優化

基本使用

上一篇文章已經講過如何安裝Hexo，不瞭解的小夥伴可以參考一下我的上一篇文章，或者訪問Hexo文件來了解如何安裝Hexo。

在Hexo中有兩個很重要的名為_config.yml的檔案，其中一個在站點安裝的根目錄下，另一個在主題目錄下。前者提供了Hexo自身的一些基本配置資訊，後者為你所安裝的主題的相關配置。為了方便區分，我們把前者稱為站點配置檔案，後者稱為主題配置檔案。

站點配置檔案

檔案路徑站點根目錄/_config.yml，編輯軟體推薦使用Sublime Text 。
這裡貼一下個人的部分配置，可以改一下相關內容自行體會一下效果：

# Site
 

title: Alvabill
subtitle: Stay Hungry, Stay Foolish
author: Alvabill
description: "Alvabill個人站，主要涉及前端知識共享、實踐教程、前沿技術共同學習等方面"  #網站描述 SEO
language: en
timezone: Asia/Shanghai

“title”：部落格的名稱。
“subtitle”：根據主題的不同，有的會顯示有的不會顯示。
“description”：主要用於SEO，告訴搜尋引擎一個關於站點的簡單描述，通常建議在其中包含網站的關鍵詞。
“author”：作者名稱，用於主題顯示文章的作者。
“language”：語言會對應的解析正在應用的主題中的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”：一般填寫自己的站點連結。
“root”：設定根目錄的位置。如果你的網站存放在子目錄中，例如 http://yoursite.com/blog，則應該將你的 url 設為http://yoursite.com/blog 並把 root 設為 /blog/。
“permalink”：生成的連結的格式。帶井號的是預設的格式，帶有日期感覺怪怪的，改成了自己喜歡的格式。規則也比較簡單，標籤前面要加英文冒號。
“permalink_defaults”: 生成連結中各部分的預設值

# 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，跳過指定檔案的渲染，這裡寫上去著兩個檔名便可，在上一篇文章中已經詳細描述過這裡就不累贅了。

# 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:

書寫相關的設定
“new_post_name”：新的博文的檔名
“default_layout:“ 預設佈局
“filename_case: 0“ #把檔名稱轉換為 (1) 小寫或 (2) 大寫
“render_drafts: false“ 是否顯示草稿
“post_asset_folder: false“ #是否啟動資原始檔夾
“relative_link: false“ #把連結改為與根目錄的相對位址
“future: true “
“highlight:“ #程式碼塊的設定，Hexo自帶的程式碼高亮外掛

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

分類和標籤的設定
“default_category”：如果撰寫文章時沒有設定分類，預設的分類選擇。
“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: [email protected].com:Alvabill/Alvabill.github.io.git,master
    coding: [email protected].coding.net:Alvabill/Alvabill.git,master

“theme”：主題拓展，可以在主題商店選擇其他主題，這裡使用next
“deploy”：部署方式，前文已經詳細描述，不再累贅。

主題配置檔案

檔案路徑站點根目錄/themes/next/_config.yml，編輯軟體推薦使用Sublime Text 。
這裡先選擇主題：

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

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

主題選擇，在前面加#註釋掉其他的，這裡我們選Mist，其他主題你們也可以體驗一下，不過不保證本教程的優化全部適配哦，不過選擇其他主題的小夥伴遇到的問題也歡迎在評論區提出一起交流。

新增RSS

在主題配置檔案中有NexT預設的RSS設定，預設為留空，這時使用 Hexo 生成的 Feed 連結，需要先安裝 hexo-generator-feed外掛。
在站點根目錄開啟git bash，安裝外掛：

$ npm install --save hexo-generator-feed

修改站點配置檔案，在最後新增以下程式碼：

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

實現效果：

enter description here

新增標籤、分類等頁面

1 修改主題配置檔案，在選單項新增以下內容：

# ---------------------------------------------------------------
# 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/

enter description here

這裡可以新增圖示，個人不是很喜歡所以沒有新增，圖示的程式碼就在以上程式碼的下邊，可以自行修改體驗。

2 新建頁面
在站點根目錄輸入以下程式碼新建頁面：

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

archives頁面不需要新建，NexT主題自帶了；tags、categories頁面需要設定型別，即開啟站點根目錄\source\tags、站點根目錄\source\categories分別進行修改：

enter description here

enter description here

如果有整合評論服務，頁面也會帶有評論。因為後面我們會新增評論系統所以這裡需要新增欄位 comments 並將值設定為 false。

設定網站icon

主題配置檔案中第一行程式碼就是網站icon設定，這裡你只需要找到你喜歡的logo把它製作成ico格式然後改名favicon.ico，放到/themes/next/source/images下面即可。

# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico # 網站logo

新增側邊欄社交連結

主要修改主題配置檔案的社交連結和對應圖示：

# 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
  簡書: https://www.jianshu.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

實現效果如下：

enter description here

新增側邊欄友情連結

修改主題配置檔案：

# Blog rolls  推薦閱讀
links_title: Links
#links_layout: block
links_layout: inline
links:
  Web前端導航: http://www.alloyteam.com/nav/
  創造獅導航: 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/

實現效果：

enter description here

底部顯示建站時間和圖示修改

修改主題配置檔案：

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

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

實現效果：

enter description here

雪花圖示需要用到最新的fa圖示庫，後面會介紹如何設定預設庫。

微信支付寶打賞功能

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

# Reward
#reward_comment: 堅持原創技術分享，您的支援將鼓勵我繼續創作！
wechatpay: http://p3dm71oa7.bkt.clouddn.com/wcpay.png
alipay: http://p3dm71oa7.bkt.clouddn.com/zfbpay.jpg
#bitcoin: /images/bitcoin.png

實現效果：
enter description here

關閉網站動畫效果

為了追求更快的響應速度我們可以把網站的大部分動畫關掉，這裡修改主題配置檔案的一行程式碼即可：

# Motion
use_motion: [false/true]

設定第三方JS庫

在主題配置檔案中設定成合適的 CDN 地址，此特性可以加速靜態資源（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

新增評論系統

NexT支援的第三方的評論系統有很多，不過不少已經關閉不再可用了，而且對於國內來說比較友好的現在應該就只有來必力，當然喜歡折騰的小夥伴可以嘗試一下其他的或者自建評論系統。這裡就先介紹目前最簡單可行的方案，也就是來必力。

獲取來必力id：
登陸 來必力 註冊獲取，這裡要注意，這個韓國的系統註冊啥的真的太慢了，所以要記住不要耐不住關閉頁面或者狂重新整理，耐心等待就好。
註冊後點擊導航上邊的安裝，選擇免費的city版本：

enter description here
點選現在安裝後填入網站的一些資訊就可以獲取到安裝程式碼，框中的就是你的來必力id：

enter description here

複製上邊的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}

另外可以點選使用者頭像進入管理介面個性化你的評論系統：

enter description here

最終實現效果:

enter description here

統計訪客量以及文章閱讀量

NexT主題集成了不蒜子統計功能：

# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
# 不蒜子統計功能
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:

當enable: true時，代表開啟全域性開關。若site_uv、site_pv、page_pv的值均為false時，不蒜子僅作記錄而不會在頁面上顯示。
當site_uv: true時，代表在頁面底部顯示站點的UV值。
當site_pv: true時，代表在頁面底部顯示站點的PV值。
當page_pv: true時，代表在文章頁面的標題下顯示該頁面的PV值（閱讀數）。
site_uv_header和site_uv_footer這幾個為自定義樣式配置，相關的值留空時將不顯示，可以使用（帶特效的）font-awesome。
示例：

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

閱讀次數統計（基於LeanCloud）

相比不蒜子的統計，LeanCloud的文章閱讀量統計更加穩定靠譜，所以本人也把網站的文章內統計改為LeanCloud的了。
設定方法參考該文章–傳送門

實現效果：

enter description here

字數統計

用於統計文章的字數以及分析出閱讀時間。
在主題配置檔案中，搜尋wordcount，設定為下面這樣就可以了：

# 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後面位置新增一個分割符：

enter description here
實現效果：

enter description here

另外，在/themes/next/layout/_partials/footer.swig檔案endif %}前加上下面程式碼可以實現在站點底部統計全站字數：

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

實現效果：

enter description here

如果無法顯示可能是hexo-wordcount外掛沒有安裝，git bash在網站根目錄安裝一下就可以：

$ npm install hexo-wordcount --save

增加版權資訊

在目錄themes/next/layout/_macro/下新增my-copyright.swig，程式碼如下：

{% if page.copyright %}
<div class="my_post_copyright">
  <script src="//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>本文標題:</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>釋出時間:</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="點選複製文章連結"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="複製成功！"></i></span>
  </p>
  <p><span>許可協議:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商業性使用-禁止演繹 4.0 國際</a> 轉載請保留原文連結及作者。</p>  
</div>
<script> 
    var clipboard = new Clipboard('.fa-clipboard');
    $(".fa-clipboard").click(function(){
      clipboard.on('success', function(){
        swal({   
          title: "",   
          text: '複製成功',
          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"

最後到站點根目錄/scaffolds/post.md，在兩個---中間增加一行：

copyright: true

之後的每一篇文章都會自己加上版權資訊，之前的文章也可以通過在文章對應的md檔案頭部加上以上程式碼新增版權資訊。

新增分享文章功能

這裡我們使用AddThis，為什麼呢，晒一下我的樣式你就知道了：

enter description here
具體選擇什麼樣式可以在AddThis網站上面設定。
首先註冊賬號（需要科學上網），註冊後找到該位置：

enter description here
在主題配置檔案中搜索add_this_id，去掉前面的註釋，新增上你的AddThis ID就可以了。

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

具體新增方式如下，可以選擇多種樣式：
enter description here

新增文章評分功能

通過widgetpack來給網站每篇文章新增評分系統，效果如下：

enter description here
首先註冊賬號，新增新站點，填入網站名稱和域名地址，點選新增：

enter description here
獲取id：

enter description here
這裡9384就是我的id，複製下來到主題配置檔案中搜索widgetpack新增即可:

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

這裡建議設定為按ip地址記錄評分，比較方便：

enter description here

enter description here

文章排序優先順序設定

修改hero-generator-index外掛，把檔案node_modules/hexo-generator-index/lib/generator.js內的程式碼替換為：

'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賦值，數值越大優先順序越高。

已經寫好的文章在對應的md檔案頭部新增top：{number}即可

新增站內搜尋功能

這裡使用Algolia，其他的都不太靠譜。
前往Algolia註冊頁面，註冊一個新賬戶。可以使用GitHub或者Google賬戶直接登入，註冊後的14天內擁有所有功能（包括收費類別的）。之後若未續費會自動降級為免費賬戶，免費賬戶總共有10,000條記錄，每月有100,000的可以運算元。註冊完成後，建立一個新的Index，這個Index將在後面使用。

enter description here
Index建立完成後，此時這個Index裡未包含任何資料。接下來需要安裝Hexo Algolia擴充套件，這個擴充套件的功能是蒐集站點的內容並通過API傳送給Algolia。前往站點根目錄，執行命令安裝：

$ npm install --save hexo-algolia

找到新建的Index對應的Key，複製下面的App ID和API Key，同時修改許可權:

enter description here

enter description here

在站點配置檔案（注意是站點配置檔案）末尾，新增配置程式碼：

#新增搜尋
algolia:
  applicationID: '{your appID}'
  apiKey: 'your API Key'
  indexName: 'your Index name'
  chunkSize: 5000

在站點根目錄執行以下程式碼，更新Index(每次更新文章都需要執行一次)，即上傳站點內容到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即可，根據需要你可以調整labels中的文字。

DaoVoice 線上聯絡

實現效果：

enter description here

enter description here
首先去註冊，這裡需要邀請碼，貼一個5ea4435c，或者直接點選邀請碼的連結。註冊後就可以檢視你的app_id:

enter description here
複製app_id，開啟/themes/next/layout/_partials/head.swig,寫下如下程式碼：

{% 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:') + "//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}

具體樣式設計可以在 應用設定–>聊天設定 後邊改。

enter description here

個性化優化

設定字型

在主題配置檔案中設定，例如：

font:
  enable: true

  # 外鏈字型庫地址，例如 //fonts.googleapis.com (預設值)
  host:

  # 全域性字型，應用在 body 元素上
  global:
    external: true
    family: Monda

  # 標題字型 (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

  # 程式碼字型，應用於 code 以及程式碼塊
  codes:
    external: true
    family: PT Mono

設定程式碼高亮主題

NexT 預設使用的是 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

效果：

enter description here

相關推薦

hexo搭建個人部落格--NexT主題優化

寫在前面 本文為個人前一篇文章hexo搭建個人部落格–基礎篇的後續篇，前文主要介紹瞭如何搭建一個個人網站以及繫結域名等相關內容，還沒有建站的夥伴們可以看一下前文，已經搭建好的就可以忽略了。 本文的優化是基於Hexo的NexT主題的，其他主題的疑問也可以在後臺

使用Hexo搭建個人部落格，極速高效簡潔,新手小白可操作

目錄 只需要兩步 第一步程式碼部分： 第二部分放置程式碼 https://www.cnblogs.com/blogjun/articles/8289977.html 詳細操作可參考上文 這裡說一下大概的原理吧（純屬個人觀點，如有疑問請評論回去，接懟） 只需要兩步

github + hexo 搭建個人部落格教程

Github Pages介紹 本來用於介紹託管在Github上上的專案，由於它的空間免費穩定，因此適合用來搭建部落格。 每個帳號只能有一個倉庫來存放個人主頁，且倉庫的名字必須是使用者名稱/ username.github.io。你可以通過http://username.github.io

GitHub、Node.js和Hexo搭建個人部落格

GitHub、Node.js和Hexo搭建個人部落格 1.Git 1.1、下載 下載地址：https://git-scm.com/downloads 1.2、Git安裝 雙擊安裝，點選Next 填寫安裝路徑，點選Next 選中安裝內容，點選Next

Github Pages + Hexo 搭建個人部落格

本文原地址 開始前瞭解了自己適合那種方式搭建個人部落格的幾種高效方案 一、前置知識 GitHub Github 官網 廖雪峰教程- Git 教程 個人 Git 筆記 二、開始搭建 阮一峰教程-搭建一個免費的，無限流量的 Blog---- githu

基於windows平臺Git+GitHub+Hexo搭建個人部落格（三）

  去年的時候使用Hexo搭建了一個部落格，當時主題使用的是JackMan，雖說這個theme是挺好看的了，但是自己感覺還少點東西，所以自從搭建好後就一直沒用，筆記還是放在CSDN上。前兩天偶然發現了一位大神的部落格，當時一眼就喜歡上了這個主題，瀏覽網站後知道大神的部落格也是用Hex

使用GitHub + Hexo搭建個人部落格（一）- 安裝

最近在同事那瞭解到，使用GitHub + Hexo可以搭建自己的個人部落格，很早之前就想自己搞個網站做部落格，由於種種原因一直沒有實現 現在可以使用開源的工具搞個部落格還是蠻不錯的，這裡和大家分享下。 1. Hexo簡介 GitHub的簡單介紹，大家可以參考我前面的部落格，

Hexo搭建個人部落格網站詳細流程

過年回家前在公司的最後一天，說實話有點心不在焉了。整個2017也就這樣恍然過去，很多事都來不及回想。在這最後的時間裡，想起把自己使用Hexo搭建個人部落格網站的流程整理成篇，前段時間為了這個也是找了好多資料，遇到不少坑，將它記錄在這裡就算是舊年裡的最後一個節點，

GitHub+Hexo搭建個人部落格

1.hexo介紹 看到同學使用github+hexo搭建了屬於自己的部落格，眼饞，弄了好久了，感覺有點眼高手低了，一直沒來得及寫一下自己搭建的流程，心血來潮，下邊來簡單介紹下搭建流程，也方便自己以後review，也可以和大家共享交流技術問題。 Hexo

基於windows平臺Git+GitHub+Hexo搭建個人部落格（一）

之前最開始是瞭解並搭建的jekyll框架，然後又從網上百度了一下，很多部落格都支援Hexo，覺得Hexo更好用一些，也有很多支援jekyll的，自己確實不知道是jekyll和Hexo哪個更好用一些，所以又搭建了一下Hexo的環境。 我在這裡對我自己的操作步驟

使用Github+Hexo搭建個人部落格

01 用 GitHub + Hexo 建立你的第一個部落格02 [Hexo]部署部落格及更新博文03 Hexo(3)-安裝自己喜歡的主題04 Hexo(4)-安裝多說評論框05 Hexo(5)-購買並繫結域名

用GitHub和Hexo搭建個人部落格

很久前就想利用GitHub來搭建一個個人部落格了，今天就琢磨了一下搭建方法，在這裡寫出來以供他人蔘考~ 一、簡介 Hexo: Hexo 是一款基於Node.js、快速、簡潔且高效的部落格框架，Hexo 使用 Markdown解析文章，在幾秒內，即可利用

用Hexo搭建個人部落格

一、安裝Nodejs 二、安裝Git for windows 三、安裝Hexo 1、開啟Git Bash，執行命令： npm install hexo-cli -g 如果不行就先執行： npm --registry http:

2017-02-23-如何使用gitHub和Hexo搭建個人部落格

為什麼要寫個人部落格? 這一陣子是專案間隙,略閒,之前的專案中學到了很多東西,一直沒有時間整理沉澱,現在終於有時間了,列了個計劃打算把各種遇到問題和解決經驗沉澱到文字裡,方便自己今後檢視,同時也可以分享給別人,利人利己. 之前工作之餘有些零碎經驗都是寫到

hexo搭建個人部落格

hexo安裝及配置 https://www.cnblogs.com/visugar/p/6821777.html https://

github搭建個人部落格 hexo框架 next主題

之前就想搭建自己的部落格，現在終於得以實施。參考了多篇部落格，然後又在虛擬機器了往往復複試了好多次， 現在基本搭建完畢。我是基於hexo部落格框架， next主題搭建的部落格， 靜態網頁。   大體就是， 先在本地搭建好整個系統， 然後再提交到github。因為此篇文章只是撿

使用Hexo+Github搭建個人部落格

個人部落格：             技術部落格：http://messi1002.top/             閱讀部落格：http://www.read1002.t

Hexo + github pages + 阿里雲繫結域名搭建個人部落格

申請域名 萬網購買的域名，地址：https://wanwang.aliyun.com/domain/com?spm=5176.8142029.388261.137.LoKzy7 控制檯進行解析 控制檯->域名與網站(萬網)->域名->域名列表->解析 設定主機記錄www

基於 Hexo + GitHub Pages 搭建個人部落格

參考 markdown一些語法 1、 --- title: Hello Blog --- 2、連結[CSDN](https://blog.csdn.net/owenfy) 3、大小標題 ## Quick Start ### Create a new post 4、中間

Mac上基於hexo+GitHub搭建個人部落格(一)

之前一直使用部落格園和簡書，但是部落格園太複雜，而簡書雖然很簡單，但是沒什麼新鮮感，偶然得知hexo+github可以搭建自己的部落格，主要是可以自己定主題，還很simple，因此，找了個時間，自己搞了一下，感覺還可以，就自己弄了一個。 1 環境配置 Hexo官網上有搭建文件！ 1.1 安