hexo + next主題高階配置
前言
配置完yilia後，發現缺少一些東西，百度之下，找到了特別喜歡的主題——next。跟大家分享配置經驗。
- 首先，本文是根據我自己的部落格配置而寫的，並不全面，其他美化配置在文末提供了相應的參考連結。歡迎瀏覽我的部落格：destiny'Note
- 其次，本文中有部分自己的改進方案，並非全部摘自他文
一、主題下載
git clone https://github.com/iissnan/hexo-theme-next.git themes/next
在根目錄_config.yml檔案中：
theme: next
注意：所有配置檔案內，每一項配置的冒號後面都要加上空格
二、綜合設定
1. 語言設定
在根目錄_config.yml檔案中：
language: zh-Hans
編輯主題目錄下language/zh-Hans.yml中英文的對應關係
2. 修改字型大小、樣式
在主題目錄配置檔案下，查詢font：
font: enable: true # Uri of fonts host. E.g. //fonts.googleapis.com (Default). host: # body元素的字型設定 global: external: true family: Lato size: 18 # 標題的基礎字型設定 headings: external: true family: size: 30 # 文章字型設定 posts: external: true family: 18 # logo字型設定 logo: external: true family: size: 30 # 程式碼塊字型設定 codes: external: true family: size: 13
把false改為true，並修改了size的數值，單位是畫素。如有需要可自行改變字型。
另外提供一種方法，供會前端的小夥伴參考：
開啟\themes\next\source\css\ _variables\base.styl檔案，修改裡面的字型大小
3. 主題選擇
在主題配置檔案中，查詢scheme：
# 主題中的主題
# scheme: Muse
scheme: Mist
# scheme: Pisces
# scheme: Gemini
選擇你喜歡的，去掉前面的#號，其他加上#號。即註釋掉的意思。
4. 背景的設定
在主題配置檔案中，查詢canvas：
# 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: true
開啟相應的背景，只要把對應的false設定為true，記得把其他都改為false
5. 修改內容區域寬度
Next 對內容的寬度的設定如下：
- 700px，當螢幕寬度 < 1600px
- 900px，當螢幕寬度 >= 1600px
- 移動裝置下，寬度自適應
在主題目錄下的 source\css_variables\custom.styl 檔案，新增變數：
// 修改成你期望的寬度
$content-desktop = 700px
// 當視窗超過 1600px 後的寬度
$content-desktop-large = 900px
此方法不適用於 Pisces Scheme， Pisces Scheme 編輯themes\next\source\css\_schemes\Picses\_layout.styl檔案，更改以下 css 選項定義值：
.header {width: 1150px;}
.container .main-inner {width: 1150px;}
.content-wrap {width: calc(100% - 260px);}
三、文章模組的美化
1. 文章中新增居中模組
文章的Markdown檔案中寫上：
<!-- HTML方式: 直接在 Markdown 檔案中編寫 HTML 來呼叫 -->
<blockquote class="blockquote-center">優秀的人，不是不合群，而是他們合群的人裡面沒有你</blockquote>
<!-- 標籤 方式，要求版本在0.4.5或以上 -->
{% fullimage /image-url, alt, title %}
<!-- 別名 -->
{% fi /image-url, alt, title %}
2. 文章內連結樣式美化
在主題目錄下，將source/css/_custom/custom.styl檔案修改如下：
// 文章內連結文字樣式
.post-body a{
color: #0593d3;
border-bottom: none;
border-bottom: 1px solid #0593d3;
&:hover {
color: #fc6423;
border-bottom: none;
border-bottom: 1px solid #fc6423;
}
}
3. 文章內程式碼美化
- 行內程式碼
在主題目錄下，將source/css/_custom/custom.styl檔案修改如下：
//行內程式碼樣式
code {
color: #c7254e;
background: #f9f2f4;
border: 1px solid #d6d6d6;
padding:1px 4px;
word-break: break-all;
border-radius:4px;
}
- 區塊程式碼
在主題目錄下，修改config.yml檔案：
# 樣式可選： normal | night | night eighties | night blue | night bright
highlight_theme: night
4. 文章結束語
- 新增模板檔案
在主題目錄下\layout\_macro中新建 passage-end-tag.swig檔案,並新增以下內容：
<div>
{% if not is_index %}
<div style="text-align:center;color: #ccc;font-size:14px;">
-------------本文結束<i class="fa fa-paw"></i>感謝您的閱讀-------------
</div>
{% endif %}
</div>
- 匯入模板檔案
在\layout\_macro\post.swig檔案中，找到：
{#####################}
{### END POST BODY ###}
{#####################}
在上面程式碼之前新增：
<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>
-
配置
在主題配置檔案中新增：
# 文章末尾新增“本文結束”標記
passage_end_tag:
enabled: true
上述步驟是主題編寫的基本步驟，值得參考。
5. 增強文章底部版權資訊
- 增加文章md檔案的頭部資訊中新增
copyright: true時，新增版權宣告 - 增加文章標題、釋出時間、更新時間等資訊
在目錄next/layout/_macro/下找到post-copyright.swig，進行部分修改：
{% if page.copyright %}
<ul class="post-copyright">
<li class="post-copyright-author">
<strong>本文標題:</strong>
<a href="{{ url_for(page.path) }}">{{ page.title }}</a>
</li>
<li class="post-copyright-author">
<strong>{{ __('post.copyright.author') + __('symbol.colon') }}</strong>
{{ config.author }}
</li>
<li class="post-copyright-author">
<strong>釋出時間:</strong>
{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}
</li>
<li class="post-copyright-author">
<strong>最後更新:</strong>
{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}
</li>
<li class="post-copyright-link">
<strong>{{ __('post.copyright.link') + __('symbol.colon') }}</strong>
<a href="{{ post.permalink }}" title="{{ post.title }}">{{ post.permalink }}</a>
</li>
<li class="post-copyright-license">
<strong>{{ __('post.copyright.license_title') + __('symbol.colon') }} </strong>
{{ __('post.copyright.license_content', theme.post_copyright.license_url, theme.post_copyright.license) }}
</li>
</ul>
{% endif %}
6. 自定義文章的預設頭部資訊
在根目錄的/scaffolds/post.md檔案中新增：
7. 文章加密訪問（沒有太大意義）
開啟主題目錄下layout/_partials/head.swig檔案,在meta標籤後面插入這樣一段程式碼：
<script>
(function(){
if('{{ page.password }}'){
if (prompt('請輸入文章密碼') !== '{{ page.password }}'){
alert('密碼錯誤！');
history.back();
}
}
})();
</script>
然後文章頭部資訊中新增password：
password: 你設定的密碼
如果password後面為空，則表示不用密碼。
8. 博文置頂
- 安裝
hexo-generator-index外掛
npm install hexo-generator-index--save
- 替換程式碼
把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
}
});
};
- 設定top值
在文章頭部資訊中新增top 值，數值越大文章越靠前:
---
top: 100
---
9. 增強文章底部標籤
修改模板/themes/next/layout/_macro/post.swig，搜尋 rel=”tag”>#，將 #換成
<i class="fa fa-tag"></i>
10. 修改打賞
- 修改文字與圖片
# 打賞設定
reward_comment: 堅持原創技術分享，您的支援將鼓勵我繼續創作！
wechatpay: /assets/img/weixin.jpg
alipay: /assets/img/alipay.jpg
# bitcoin: /images/bitcoin.png
文字、圖片位置可自行修改
- 字型不閃動設定
修改檔案next/source/css/_common/components/post/post-reward.styl，然後註釋其中的函式wechat:hover和alipay:hover，如下：
/* 註釋文字閃動函式
#wechat:hover p{
animation: roll 0.1s infinite linear;
-webkit-animation: roll 0.1s infinite linear;
-moz-animation: roll 0.1s infinite linear;
}
#alipay:hover p{
animation: roll 0.1s infinite linear;
-webkit-animation: roll 0.1s infinite linear;
-moz-animation: roll 0.1s infinite linear;
}
*/
四、區塊美化
1. 新增頂部載入條
在主題配置檔案_config.yml中，找到pace並修改：
pace: true
pace_theme: pace-theme-minimal
載入條樣式有許多，在你找到的位置中可自行更換
2. 主頁文章新增陰影效果
開啟/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);
}
3. 滑鼠點選小紅心的設定
將 love.js檔案新增到主題目錄的\source\js\src 下。找到 \layout\_layout.swing檔案， 在檔案的後面， body標籤之前 新增以下程式碼：
<!-- 頁面點選小紅心 -->
<script type="text/javascript" src="/js/src/love.js"></script>
4. 搜尋功能
- 安裝
npm install hexo-generator-searchdb --save
- 配置
在主題配置檔案下，查詢local_search:
local_search:
enable: false
trigger: auto
top_n_per_article: 1
enable修改為true
在根目錄配置檔案中，新增以下程式碼：
search:
path: search.xml
field: post
format: html
limit: 10000
5.頁尾美化
- 隱藏網頁底部powered By Hexo / 強力驅動
在主題配置檔案_config.yml中修改：
copyright: false
- 新增文字或者連結
在主題目錄下的layout/_partials/footer，查詢powered-by：
{% if theme.copyright %}
<div class="powered-by">{#
#}{{ __('footer.powered', '<a class="theme-link" href="https://hexo.io">Hexo</a>') }}{#
#}</div>
在上面程式碼之前新增你的文字，或者增加連結：
<p>best for best!</p> <!--文字-->
<a href="www.baidu.com">百度</a> <!--連結-->
至於樣式，這裡不多介紹。需要了解html、css知識。
還可以設定訪問量等資訊，在文末參考文章中有介紹。
6. 側邊欄新增訪問量等資訊
- 獲取不蒜子程式碼
在不蒜子上獲取程式碼：
<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
- 新增js檔案
在主題目錄下，找到\layout\_layout.swing檔案， 在檔案的後面， </body>標籤之前，新增上面程式碼。
- 安裝wordcount
npm install hexo-wordcount --save
- 修改佈局
在主題目錄下，找到\layout\_macro\sidebar.swing檔案，查詢/nav，在</nav>標籤之前，新增下面程式碼：
<br>
<br>
<div class="site-state-item site-state-posts" style="border-left:none;">
<span class="site-state-item-count" id="busuanzi_value_site_pv"></span>
<span class="site-state-item-name">瀏覽量</span>
</div>
<div class="site-state-item site-state-posts">
<span class="site-state-item-count" id="busuanzi_value_site_uv"></span>
<span class="site-state-item-name">訪客量</span>
</div>
<div class="site-state-item site-state-posts">
<span class="site-state-item-count">{{totalcount(site)}}</span>
<span class="site-state-item-name">總字數</span>
</div>
7. 文章標籤顯示設定
在主題配置檔案中，查詢post_meta：
# 文章標籤顯示設定
post_meta:
item_text: true
created_at: true # 發表時間
updated_at: false # 更新時間
categories: true # 分類
# 文章字數顯示設定（需要wordcount，前面已經下載）
post_wordcount:
item_text: true
wordcount: true # 顯示字數
min2read: false # 所需時間
totalcount: false # 總字數
separated_meta: true # 分割符
-
文章閱讀量
註冊leancloud統計賬號，按照next官方推薦文件 為NexT主題新增文章閱讀量統計功能，
獲取AppID以及AppKey並在主題的_config.yml檔案中填寫：
leancloud_visitors:
enable: true
app_id: joaeuuc4hsqudUUwx4gIvGF6-gzGzoHsz
app_key: E9UJsJpw1omCHuS22PdSpKoh
8. 新增友言評論
在友言評論中註冊，並進入管理來獲取你的id。
修改主題配置檔案的友言id：
# youyan 評論
youyan_uid: "2144889"
9. 新增jiathis分享按鈕
將你的友言Id新增進去：
# jiathis分享按鈕
jiathis:
uid: '2144889'