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'