Hexo | （二）Next主題個性化設置

NexT is a high quality elegant Hexo theme. It is crafted from scratch, with love.

Live Preview

• Muse scheme: LEAFERx | XiaMo | OAwan
• Mist scheme: Jeff | uchuhimo | xirong
• Pisces scheme: Vi | Acris | Rainy
• Gemini scheme: Ivan.Nginx | Raincal | Dandy

Installation

$ git clone https://github.com/theme-next/hexo-theme-next themes/next

區分配置文件：

配置文件	路徑
站點配置文件	D:/blog/_config.yml
主題配置文件	D:/blog/themes/next/_config.yml

設置RSS

1.安裝RSS插件

$ npm install hexo-generator-feed --save

2.編輯站點配置文件，添加如下內容：

#RSS訂閱
plugin: 
- hexo-generator-feed
#Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 0

3.編輯主題配置文件，將rss字段置空。

主題風格

#Scheme 主題風格
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

四個主題風格，自行選擇，消去註釋即生效。

設置菜單

menu:
  home: / || home                  # 主頁
  tags: /tags/ || tags             # 標籤
  categories: /categories/ || th   # 分類
  archives: /archives/ || archive  # 歸檔
  about: /about/ || user           # 關於我
# schedule: /schedule/ || calendar # 安排
# sitemap: /sitemap.xml || sitemap # 站點地圖
# commonweal: /404/ || heartbeat   # 404公益

添加[標籤]、[分類]、[關於]頁面

只有文章（post）支持[標籤]和[分類]。

1.添加[tags]、[categoies]、[about]頁面：

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

2.在source文件夾中找到新建頁面：
①編輯tags.md：添加layout:"tags"
②編輯categories.md：添加layout:"categories"
③編輯about.md，自行發揮。

3.匹配站點配置文件：

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories

4.匹配主題配置文件中menu：

menu:
  home: /
  tags: /tags
  categories: /categories
  archives: /archives
  about: /about

5.Front-matter中的[tags]寫法：

tags:
- tag_1
- tag_2
# 標籤之間相互獨立

6.Front-matter中的[categories]寫法：

categories: 
- 運動
- [運動, 球類運動]
- [運動, 球類運動, 網球]
# 類別存在層級關係

添加自定義頁面

1.添加自定義頁面：

$ hexo new page "customPage"

2.匹配主題配置文件中的menu：

menu:
  home: /
  tags: /tags
  categories: /categories
  archives: /archives
  about: /about               
  customPage: /customPage    # 鍵值對匹配

3.在source中找到customPage.md文件，根據需求自行編輯。

添加更新時間

編輯主題配置文件：

post_meta:
  item_text: true
  created_at: true   # 建立時間
  updated_at: true   # 更新時間
  # Only show 'updated' if different from 'created'.
  updated_diff: false # 只使用更新時間
  # If true, post's time format will be hexo config's date_format + ' ' + time_format.
  date_time_merge: false
  categories: true

閱讀全文

在文章合適的位置添加<!-- more -->，Hexo推薦使用。

設置favicon圖標

1.將favicon.png放到themes\next\image文件夾下

2.主題配置文件更改圖片路徑：

favicon:
  small: /images/favicon-16x16.png         # 小圖標：16x16
  medium: /images/favicon-32x32.png        # 大圖標：32x32
  apple_touch_icon: /images/favicon.png    # apple圖標大圖
  safari_pinned_tab: /images/logo.svg

設置頭像

1.將頭像圖片avatar.png放到themes\next\image文件夾下

2.主題配置文件更改圖片路徑：

avatar: /images/avatar.png  # avater圖片路徑

社交帳號

編輯主題配置文件，自行添加：

social:
  GitHub: https://github.com/yourname || github-icon
  E-Mail: mailto:youremail || envelope-icon
  Weibo： https://weibo.com/yourname

友情連接

編輯主題配置文件，自行添加：

links_icon: link
links_title: Links
#links_layout: block    #塊狀佈局，選一個注一個
links_layout: inline    #行內佈局，選一個注一個
links:
  Github: https://www.github.com
  知乎: https://www.zhihu.com

打賞

編輯主題配置文件：

# Reward
reward_comment: 求打賞文本
wechatpay: /images/wechatpay.png  # 微信收款二維碼 圖片路徑
alipay: /images/alipay.png        # 支付寶收款二維碼 圖片路徑
#bitcoin: /images/bitcoin.png     # 比特幣

文章版權信息

編輯主題配置文件，啓用copyright服務：

post_copyright:
  enable: true

訪客&訪問量

NexT主題中已經集成了不蒜子統計，直接編輯主題配置文件：

busuanzi_count:
  enable: true              # 開啓busuanzi數據統計
  total_visitors: true      # 訪客
  total_visitors_icon: user
  total_views: true         # 訪問量
  total_views_icon: eye
  post_views: true          # 文章閱讀次數
  post_views_icon: eye

百度統計

1.登陸百度統計，添加域名。若更換域名，需從新綁定。

2.複製 hm.js? 後面那串統計腳本 id：

3.編輯主題配置文件，添加腳本id：

# Baidu Analytics ID
baidu_analytics: 腳本id

文章字數統計

1.安裝字數統計插件：

$ npm install hexo-symbols-count-time --save

2.編輯主題配置文件：

symbols_count_time:
  separated_meta: true     
  item_text_post: true     # 文章字數
  item_text_total: true    # 本站全部文章字數
  awl: 5
  wpm: 200

評論

來必力

1.登錄 來必力 獲取你的 LiveRe UID。

2.編輯主題配置文件，添加LiveRe UID：

livere_uid: #你的LiveRe UID

3.記住將可評論文檔的頂部屬性中comments: true

分享

jiathis分享

編輯主題配置文件，添加jiathis_uid：

jiathis:
  uid: 2160658

百度分享

編輯主題配置文件，設置baidushare：

baidushare:
  type: button       # type: button | slide

搜索服務

Local Search

1.安裝local search插件：

$ npm install hexo-generator-searchdb --save

2.編輯站點配置文件，新增如下內容：

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

3.編輯主題配置文件，啓用local search功能：

local_search:
  enable: true

修改文章底部標籤[#]

1.打開編輯themes\next\layout\_macro\post.swig

2.Ctrl+F找到rel="tag">#

3.將#替換爲<i class="fa fa-tag"></i>

文章底部添加"本文結束"

打開編輯themes\next\layout\_macro\post.swig，在文章結束的地方添加以下代碼：

{% if not is_index %}
    <div style="text-align:center;color: #ccc;font-size:14px;">
        ---------Thanks for your attention---------
    </div>
{% endif %}

添加訪客&訪問量描述

打開編輯themes\next\layout\_third-party\analytics\busuanzi-counter.swig：

添加Host-by描述

最近，銀牌會員的Coding Pages在訪問時會加載廣告，須要在網站首頁任意位置放置「Hosted by Coding Pages」，經過審覈將取消廣告。

打開編輯themes/next/layout/_partials/footer.swig，在文件末尾添加以下代碼，將「Hosted by Coding Pages」置於頁面底部。

{% if theme.footer.powered.enable and theme.footer.theme.enable %}
  <div class="copyright">
    Hosted by <a href="https://pages.coding.me">Coding Pages</a>
    &&nbsp;<a href="https://pages.github.com">GitHub Pages</a>
  </div>
{% endif %}

DaoVoice實如今線聯繫

1.首先在DaoVoice註冊一個帳號，註冊完成後在[應用設置]-[安裝到網站]中找到app_id。

2.打開編輯themes/next/layout/_partials/head/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 %}

3.編輯主題配置文件，添加以下代碼：

# DaoVoice
daovoice: true
daovoice_app_id: yourapp_id

4.設置DaoVoice頁面樣式

5.在[應用設置]-[添加微信]中綁定微信，關注小程序，便可實時收發消息。

修改Pisces主題寬度

打開編輯themes\next\source\css\_schemes\Pisces\_layout.styl，在底部添加以下代碼：

// 如下爲新增代碼！！
header{ width: 90% !important; }
header.post-header {
  width: auto !important;
}
.container .main-inner { width: 90%; }
.content-wrap { width: calc(100% - 260px); }

.header {
  +tablet() {
    width: auto !important;
  }
  +mobile() {
    width: auto !important;
  }
}

.container .main-inner {
  +tablet() {
    width: auto !important;
  }
  +mobile() {
    width: auto !important;
  }
}

.content-wrap {
  +tablet() {
    width: 100% !important;
  }
  +mobile() {
    width: 100% !important;
  }
}

參考資料：next主題|使用文檔