文章目錄
- hexo博客源碼目錄結構
- 設置next主題/next主題scheme
- 設置站點標題/站點作者/站點語言/站點logo/側邊欄頭像/是否加載動畫/
- 設置側邊欄頭像圓形和旋轉效果/側邊欄位置和側邊欄顯示時機/側邊欄推薦站點(如友站)/修改標題欄背景顏色
- 設置顯示的菜單項/創建關於頁/標籤頁/分類頁
- 設置個人社交圖標和鏈接
- 設置站點左上角或者右上角的fork me on github
- 設置hexo博客背景圖片/瀏覽頁面時顯示瀏覽進度
- 設置站點動態背景/設置站點頂部滾動加載條
- 博客底部顯示完整時間/隱藏powered By Hexo/顯示桃心/顯示總訪問量/顯示網站運行時間
- hexo創建和編輯文章
- 開啓hexo博客Latex公式支持
- hexo博客顯示自帶圖片
- 首頁設置文章預覽(閱讀全文)/文章末尾添加版權聲明/修改文章內鏈接樣式/文章末尾添加"本文結束"標記
- 博文加密/博文置頂/文章首部添加置頂標誌/文章底部打賞/顯示文章字數統計、閱讀時長/文章頂部顯示更新時間
- Pisces Scheme修改內容板塊的寬度
- Pisces Scheme修改內容板塊/菜單欄/站點概況背景顏色和透明度
- 開啓博客站點內部搜索
- 部署hexo博客
- Mirror:git push同時將代碼push到gitlab和github
hexo博客源碼目錄結構
.
├── .deploy_git
├── public
├── scaffolds
├── scripts
├── source
| ├── _drafts
| └── _posts
├── themes
├── _config.yml
└── package.json
.deploy_git：執行hexo deploy命令後部署到GitHub/Gitlab上的內容都在這個目錄中。
public：執行hexo generate命令，輸出的靜態網頁內容都在這個目錄中。
source：站點資源目錄，你寫的文章，素材等等都是放在這個目錄下,包括以後你需要新建的菜單項如about頁、tags頁、categories頁等也是放在這裏。
_drafts：草稿文章。
_posts：成功發佈的文章都在這個目錄下。
themes：主題文件目錄。
_config.yml：hexo博客全局配置文件，注意和同名的主題目錄下的配置文件區別開。
本教程中大部分效果在修改配置文件後使用hexo g，hexo s命令，再在瀏覽器中訪問:http://localhost:4000 即可看到。有少量效果需要將站點發布到線上後才能正常顯示。
設置next主題/next主題scheme
next主題是hexo的一個著名的第三方主題，在hexo博客源碼目錄打開Git bash here，使用以下命令下載next主題：
git clone https://github.com/iissnan/hexo-theme-next themes/next
使用git clone的方式下載主題後，如果博客是在Gitlab上使用CI方式自動部署，一定要刪除hexo博客源碼目錄/themes/next目錄下的.git目錄，因爲在.git目錄下最好不要出現.git目錄，這會造成推送到Gitlab上生成的博客頁面一片空白，無法正常顯示。
注意：
在Gitlab上使用CI方式自動部署hexo博客時，只有hexo博客源碼目錄下的.git目錄保留，其他子目錄中的.git目錄一律都要刪掉(比如git clone某個主題後該主題文件夾中就會有.git目錄)!!!如果不刪掉，會造成Gitlab線上博客能夠正常訪問，不出現404提示，但是整個博客頁面一片空白，無法正常顯示。
下載完成後，打開hexo源碼根目錄下的_config.yml文件，修改相應部分爲以下內容：
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
next主題目前支持四種scheme：
Muse:這是next主題的默認Scheme，黑白主調，大量留白。
Mist：Muse的緊湊版本，整潔有序的單欄外觀。
Pisces：雙欄Scheme，左側網站信息及目錄，塊+片段結構佈局。
Gemini：也是雙欄Scheme，但右側要更寬一些。
要修改next主題風格，只需打開hexo博客源碼目錄下\themes\next目錄下的_config.yml文件，找到下面幾行配置，將你想啓用的scheme前面註釋#去除即可(只能有一種scheme配置前面去掉#)。
# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini
設置站點標題/站點作者/站點語言/站點logo/側邊欄頭像/是否加載動畫/
要設置站點首頁標題和站點作者，打開hexo博客源碼目錄下的_config.yml文件，找到下面內容：
# Site
title: Hexo
subtitle:
description:
keywords:
author: John Doe
language: zh-Hans
timezone:
其中title即爲標題，修改該項即可。subtitle爲副標題。author爲站點作者，修改該項即可。description爲站點描述，會顯示在首頁的標題下方。
要設置站點語言，首先在 Hexo博客源碼根目錄\themes\next\languages找是否有該語言文件，如zh-Hans.yml（中文簡體)，然後在Hexo博客源碼根目錄_config.yml 中設置 language爲zh-Hans。即修改language項。注意如果上面的站點標題和作者中包含中文，請將_config.yml保存爲UTF-8編碼格式的TXT文檔，否則博客上不能正常顯示中文。遇到其他配置文件修改時包含中文後網站不能正常顯示中文，也可以用這個方法解決。
要設置站點logo，即打開博客站點後在網頁標籤欄上顯示的那個小圖，打開hexo博客源碼目錄\themes\next目錄下的_config.yml文件，找到下面內容：
favicon:
small: /images/favicon-16x16-next.png
medium: /images/favicon-32x32-next.png
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg
#android_manifest: /images/manifest.json
#ms_browserconfig: /images/browserconfig.xml
我們可以看到logo可以看到有四種效果，一般我們只需將medium換成我們自己的圖標路徑就行了。建議把自定義logo放在hexo博客源碼目錄\themes\next\source\images目錄下。logo大小與默認logo大小相同。
要設置首頁的側邊欄頭像，打開hexo博客源碼目錄\themes\next目錄下的_config.yml文件，找到下面內容：
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site directory(source/uploads): /uploads/avatar.gif
avatar: /images/avatar.gif
其中avatar: /images/avatar.gif即爲側邊欄頭像，頭像圖片放在Hexo博客源碼目錄\themes\next\source\images\avatar.gif。只要把我們的自定義頭像放在這個目錄下，然後將上面配置路徑做相應修改即可。圖片支持jpg、png、gif等格式。當然你也可以用網上的圖片，路徑改成http URL即可。
要打開或關閉加載動畫，在hexo博客源碼目錄下\themes\next目錄下的_config.yml文件中找到下面內容，將enable項設爲true(打開)或false(關閉)即可。
# Use velocity to animate everything.
motion:
enable: true
async: false
transition:
# Transition variants:
# fadeIn | fadeOut | flipXIn | flipXOut | flipYIn | flipYOut | flipBounceXIn | flipBounceXOut | flipBounceYIn | flipBounceYOut
# swoopIn | swoopOut | whirlIn | whirlOut | shrinkIn | shrinkOut | expandIn | expandOut
# bounceIn | bounceOut | bounceUpIn | bounceUpOut | bounceDownIn | bounceDownOut | bounceLeftIn | bounceLeftOut | bounceRightIn | bounceRightOut
# slideUpIn | slideUpOut | slideDownIn | slideDownOut | slideLeftIn | slideLeftOut | slideRightIn | slideRightOut
# slideUpBigIn | slideUpBigOut | slideDownBigIn | slideDownBigOut | slideLeftBigIn | slideLeftBigOut | slideRightBigIn | slideRightBigOut
# perspectiveUpIn | perspectiveUpOut | perspectiveDownIn | perspectiveDownOut | perspectiveLeftIn | perspectiveLeftOut | perspectiveRightIn | perspectiveRightOut
post_block: fadeIn
post_header: slideDownIn
post_body: slideDownIn
coll_header: slideLeftIn
# Only for Pisces | Gemini.
sidebar: slideUpIn
設置側邊欄頭像圓形和旋轉效果/側邊欄位置和側邊欄顯示時機/側邊欄推薦站點(如友站)/修改標題欄背景顏色
打開hexo博客源碼目錄\themes\next\source\css_common\components\sidebar\sidebar-author.styl文件，找到.site-author-image代碼塊，替換成以下內容：
.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: 60%;
transition: 2.5s all;
}
.site-author-image:hover {
transform: rotate(360deg);
}
默認情況下，側邊欄僅在文章頁面（擁有目錄列表）時才顯示，並放置於右側位置。我們打開hexo博客源碼目錄/themes/next/下的_config.yml文件：
sidebar:
# Sidebar Position, available value: left | right (only for Pisces | Gemini).
position: left
#position: right
# Sidebar Display, available value (only for Muse | Mist):
# - post expand on posts automatically. Default.
# - always expand for all pages automatically
# - hide expand only when click on the sidebar toggle icon.
# - remove Totally remove sidebar including sidebar toggle.
#display: post
display: always
#display: hide
#display: remove
上面position中可選left和right(只有Pisces | Gemini兩種scheme中才生效)，下面display中有四個選項，選擇你想設置的那項，去掉前面的註釋即可。
要在側邊欄顯示推薦站點，打開hexo博客源碼目錄下\themes\next目錄下的_config.yml文件，找到下列代碼：
# Blog rolls
links_icon: link
links_title: Links
links_layout: block
#links_layout: inline
#links:
#Title: http://example.com/
將#links:前面的#註冊去掉就會顯示推薦站點了，同時修改下面的#Title: http://example.com/ ，去掉#註釋，比如修改爲百度: http://www.baidu.com/ 。links_title項是下面這些鏈接的說明，比如你鏈接的如果都是友站，可以寫links_title: 友站。
使用Pisces或Gemini主題時，網站標題欄背景顏色是黑色的，我們可以在hexo博客源碼目錄/themes/next/source/css/_custom目錄下的custom.styl文件中添加下面的代碼：
.site-meta {
background: $blue; //修改爲自己喜歡的顏色
}
設置顯示的菜單項/創建關於頁/標籤頁/分類頁
打開hexo博客源碼目錄下\themes\next目錄下的_config.yml文件，找到下面的內容：
menu:
home: / || home # 首頁
#about: /about/ || user # 關於
#tags: /tags/ || tags # 標籤
#categories: /categories/ || th # 分類
archives: /archives/ || archive # 歸檔
#schedule: /schedule/ || calendar # 日程表
#sitemap: /sitemap.xml || sitemap # 站點地圖
#commonweal: /404/ || heartbeat # 公益404
想顯示哪一項菜單，就去掉對應菜單項的#註釋。如果對頁面的相關簡體中文翻譯不滿意，可以打開hexo博客源碼目錄/themes/next/languages/zh-Hans.yml，對相關的翻譯內容進行修改。你還可以按照上面的格式自己創建一些菜單項，以music爲例，在上面的menu字段中添加一項：
music: /music/ || music
# 標籤名 相應的文件夾名 網站上對應的圖標名
然後在相關翻譯文件zh-Hans.yml中的menu字段中也添加一項對應的翻譯。
menu:
home: 首頁
archives: 歸檔
categories: 分類
tags: 標籤
about: 關於
music: 音樂
search: 搜索
schedule: 日程表
sitemap: 站點地圖
commonweal: 公益404
注意上面about、tags、categories、schedule、sitemap、commonweal頁都需要另外設置後纔可正常訪問。
要建立關於頁/標籤頁/分類頁，只需使用下面的命令即可：
hexo new page about
hexo new page tags
hexo new page categories
然後修改hexo博客源碼目錄/source/目錄中about/tages/categories目錄中的index.md文件，新增加一行type屬性：
type: about/tags/categories
設置個人社交圖標和鏈接
打開hexo博客源碼目錄下\themes\next目錄下的_config.yml文件，找到下面的內容：
#social:
#GitHub: https://github.com/yourname || github
#E-Mail: mailto:[email protected] || envelope
#Google: https://plus.google.com/yourname || google
#Twitter: https://twitter.com/yourname || twitter
#FB Page: https://www.facebook.com/yourname || facebook
#VK Group: https://vk.com/yourname || vk
#StackOverflow: https://stackoverflow.com/yourname || stack-overflow
#YouTube: https://youtube.com/yourname || youtube
#Instagram: https://instagram.com/yourname || instagram
#Skype: skype:yourname?call|chat || skype
social_icons:
enable: true
icons_only: false
transition: false
想要在側邊欄顯示社交圖標，就將social前面的註釋#去掉，要顯示哪幾種社交圖標，就將對於的社交圖標項前面的#去掉，並修改後面的鏈接爲你個人的鏈接。你還可以自己添加一些自定義社交圖標項。格式仿照上面的格式即可。||之後是在圖標庫中對應的圖標，對於自定義社交圖標項，在圖標庫中找到你想設定的圖標的名稱，填在||之後即可。圖標庫鏈接：http://fontawesome.io/icons/ 。
比如我要添加微信和CSDN圖標：
微信: https://www.yourname.com/about/ || weixin
CSDN: https://blog.csdn.net/yourname || copyright
上面的鏈接可以填你的博客站點的about頁URL和CSDN博客首頁的URL。
設置站點左上角或者右上角的fork me on github
在：http://tholman.com/github-corners/ 或：https://github.com/blog/273-github-ribbons 選擇合適的樣式，複製其代碼到hexo博客源碼目錄/themes/next/layout/_layout.swig，添加到div class="headband"下面，如：
<a href="https://your-url" class="github-corner" aria-label="View source on GitHub"><svg width="100" height="100" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
注意把a href="https://github.com/yourname"中的URL改成你的github主頁URL。
設置hexo博客背景圖片/瀏覽頁面時顯示瀏覽進度
要設置博客的背景圖片，打開hexo博客源碼目錄\themes\next\source\css\ _custom\custom.styl文件，添加以下代碼：
body{
background:url(/images/background1.jpg);
background-size:cover;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
.main-inner {
background: #fff;
opacity: 0.9;
}
其中url可更換爲自己喜歡的圖片的地址。如果考慮到網上的圖片加載可能會比較慢，我們可以把圖片放到本地/images/文件夾內，然後url設定爲本地圖片的路徑。repeat即是否重複出現；attachment：定義背景圖片隨滾動軸的移動方式；position：設置背景圖像的起始位置；opacity: 0.9爲不透明度。
想在瀏覽頁面時顯示瀏覽進度，打開hexo博客源碼目錄/themes/next/_config.yml文件，找到下列代碼：
# Back to top in sidebar (only for Pisces | Gemini).
b2t: false
# Scroll percent label in b2t button.
scrollpercent: false
將scrollpercent改爲true即可。如果想把 top按鈕放在側邊欄上，則把b2t也改爲true。
設置站點動態背景/設置站點頂部滾動加載條
目前next主題爲6.0版本，這個版本中有4種動態背景：Canvas-nest、three_waves、canvas_lines、canvas_sphere。
打開hexo博客源碼目錄themes/next/_config.yml文件，從中找到以下內容：
# Canvas-nest
canvas_nest: false
# three_waves
three_waves: false
# canvas_lines
canvas_lines: false
# canvas_sphere
canvas_sphere: false
想設置哪一種動態背景，設置裏需要的動態背景爲true即可。
要設置站點頂部動態加載條，打開hexo博客源碼目錄\themes\next目錄下_config.yml文件，找到下面的內容:
# Progress bar in the top during page loading.
pace: false
# 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
將pace項修改爲true即啓用加載條。
博客底部顯示完整時間/隱藏powered By Hexo/顯示桃心/顯示總訪問量/顯示網站運行時間
打開hexo博客源碼目錄/themes/next/layout/_partials/footer.swig，找到下列代碼：
<div class="copyright">{#
#}{% set current = date(Date.now(), "YYYY") %}{#
#}© {% if theme.footer.since and theme.footer.since != current %}{{ theme.footer.since }} — {% endif %}{#
#}<span itemprop="copyrightYear">{{ current }}</span>
<span class="with-love">
<i class="fa fa-{{ theme.footer.icon }}"></i>
</span>
<span class="author" itemprop="copyrightHolder">{{ theme.footer.copyright || config.author }}</span>
把"YYYY"改爲"YYYY-MM-DD"即可。
要隱藏網頁底部顯示的powered By Hexo / 強力驅動，打開hexo博客源碼目錄\themes\next目錄下的_config.yml文件，找到下列代碼塊，刪除。
{% if theme.footer.powered %}
<div class="powered-by">{#
#}{{ __('footer.powered', '<a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a>') }}{#
#}</div>
{% endif %}
{% if theme.footer.powered and theme.footer.theme.enable %}
<span class="post-meta-divider">|</span>
{% endif %}
{% if theme.footer.theme.enable %}
<div class="theme-info">{#
#}{{ __('footer.theme') }} — {#
#}<a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">{#
#}NexT.{{ theme.scheme }}{#
#}</a>{% if theme.footer.theme.version %} v{{ theme.version }}{% endif %}{#
#}</div>
{% endif %}
要將博客底部改爲桃心，還是在hexo博客源碼目錄/themes/next/layout/_partials/footer.swig文件中，找到下列代碼塊：
<span class="with-love">
<i class="fa fa-{{ theme.footer.icon }}"></i>
</span>
在圖標庫：http://fontawesome.io/icons/ 中選擇合適的圖標，記住圖標名稱，如我們選擇圖標heart，那麼將上面的代碼塊修改成下面的代碼即可。
<span class="with-love" id="animate">
<i class="fa fa-heart"></i>
</span>
要在博客底部顯示總訪問量，打開hexo博客源碼目錄/themes/next目錄下的_config.yml文件，找到下列代碼塊：
busuanzi_count:
# count values only if the other configs are false
enable: false
# custom uv span for the whole site
site_uv: true
site_uv_header: <i class="fa fa-user"></i>
site_uv_footer:
# custom pv span for the whole site
site_pv: true
site_pv_header: <i class="fa fa-eye"></i>
site_pv_footer:
# custom pv span for one page only
page_pv: true
page_pv_header: <i class="fa fa-file-o"></i>
page_pv_footer:
將上面代碼修改爲：
busuanzi_count:
# count values only if the other configs are false
enable: true
# custom uv span for the whole site
site_uv: true # 整個網站的訪客數
site_uv_header: 訪客數
site_uv_footer: 人
# custom pv span for the whole site
site_pv: true # 整個網站的訪問量
site_pv_header: 本站總訪問量
site_pv_footer: 次
# custom pv span for one page only
page_pv: true # 每個頁面的訪問量
page_pv_header: <i class="fa fa-file-o"></i> 閱讀數
page_pv_footer:
然後打開hexo博客源碼目錄\themes\next\layout_third-party\analytics\busuanzi-counter.swig文件，找到下面的代碼塊：
{% if theme.busuanzi_count.enable %}
<div class="busuanzi-count">
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
將上面的代碼塊修改爲下面的代碼即可。注意hexo s命令運行時的次數和人數統計不正常，不要緊，將網站發佈到線上後就正常了。
{% if theme.busuanzi_count.enable %}
<div class="busuanzi-count">
<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
要在博客底部添加網站運行時間，打開hexo博客源碼目錄/themes/next/layout/_partials/footer.swig文件，添加下列代碼，注意以UTF-8編碼格式保存：
<!-- 在網頁底部添加網站運行時間 -->
<span id="timeDate">載入天數...</span><span id="times">載入時分秒...</span>
<script>
var now = new Date();
function createtime() {
var grt= new Date("02/01/2019 00:00:00");//此處修改你的建站時間或者網站上線時間
now.setTime(now.getTime()+250);
days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
document.getElementById("timeDate").innerHTML = "網站已運行 "+dnum+" 天 ";
document.getElementById("times").innerHTML = hnum + " 小時 " + mnum + " 分 " + snum + " 秒";
}
setInterval("createtime()",250);
</script>
注意初始建站時間是你手動設置的。
hexo創建和編輯文章
創建一篇新文章：
hexo new "文章名"
文章創建後，想要編輯文章，則使用markdown編輯器(如typora)打開hexo博客源碼目錄\source_posts目錄下的同名.md文件：
title: 測試文章1
date: 2019-02-02 23:45:50
tags:
- tag1
- tag2
categories:
- 類1
- 子類1
上面的代碼塊設置了文章的標題、日期、所屬標籤、所屬分類，這個代碼塊之下就可以寫文章的正文了。
開啓hexo博客Latex公式支持
首先更換hexo的markdown渲染引擎，使用下面的命令：
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save
hexo-renderer-kramed插件的Github主頁在這裏：https://github.com/sun11/hexo-renderer-kramed 。這個插件fork了 hexo-renderer-marked項目，並且只針對MathJax支持進行了改進。如果使用Gitlab CI方式自動部署hexo博客，請將上面兩個命令加入到.gitlab-ci.yml腳本中。
然後打開hexo博客源碼目錄/themes/next目錄下的_config.yml文件，找到下列代碼：
# MathJax Support
mathjax:
enable: false
per_page: false
cdn: //cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML
將enable改爲true。此時hexo博客渲染時只有文件頭中含mathjax: true這項時纔對這篇文章進行mathjax渲染，這可以提高博客的加載速度。如果想讓每個頁面都自動開啓mathjax渲染，則把per_page設爲true。
然後試了一下幾個例子，發現Latex公式只能簡單地正確顯示幾秒中，然後就變成了一堆不知道顯示什麼的小方塊。這是上面代碼塊中的cdn的問題，將上面的cdn那一行換成下面的cdn即可。
cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML
特別要注意的一點是，按上述方法必須要前後都用兩個$$符號的形式將Latex公式括起來纔可以正常顯示。
hexo博客顯示自帶圖片
一般情況下，在hexo博客中要顯示圖片，我們建議將圖片上傳到某個在線圖牀中，然後引用圖片的URL即可，不建議將圖片打包到網站的source文件夾中，這是因爲圖片一般都比較大， 且後面博客文章越來越多時，使用這種方式會使整個網站源碼文件變得很大，不方便上傳。
但是有少量的圖片仍然可以採用自帶圖片的形式，比如我們現在要在about頁中插入微信二維碼，方便讀者掃碼加站點作者的微信。
首先在hexo博客源碼目錄下運行Git bash here，運行下列命令，注意如果採用Gitlab CI方式自動部署hexo博客，該命令還要加入到.gitlab-ci.yml腳本中。
npm install hexo-asset-image --save
然後打開hexo博客源碼目錄\themes\next目錄下_config.yml文件，修改相應部分爲如下代碼：
post_asset_folder: true
現在我們要在about頁中插入自帶圖片，首先用命令hexo new page about新建一個about頁，然後打開hexo博客源碼目錄\source\about目錄，在該目錄下新建一個和index.md文件同名文件夾index，將要顯示在index.md文章中的圖片都放在這個文件夾中。然後打開index.md文件中添加：
這樣該圖片就會在這篇文章中顯示了。
首頁設置文章預覽(閱讀全文)/文章末尾添加版權聲明/修改文章內鏈接樣式/文章末尾添加"本文結束"標記
打開hexo博客源碼目錄\themes\next目錄下的_config.yml文件，查找以下代碼：
auto_excerpt:
enable: false
length: 150
將enable設爲true，length爲想要預覽的文章字數。建議改爲100字。
要在文章末尾添加版權聲明，還是在上面的_config.yml文件中查找以下代碼：
post_copyright:
enable: false
license: CC BY-NC-SA 3.0
license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/
將enable改爲true即可。
要修改文章中的鏈接樣式，修改hexo博客源碼目錄\themes\next\source\css_common\components\post\post.styl的文件，在末尾添加如下代碼即可：
// 文章內鏈接文本樣式
.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;
}
}
要在文章末尾添加"本文結束"標記，在hexo博客源碼目錄\themes\next\layout_macro中新建passage-end-tag.swig文件,並添加以下內容，使用UTF-8編碼格式保存(否則中文不能正常顯示)：
<div>
{% if not is_index %}
<div style="text-align:center;color: #ccc;font-size:14px;">----------------本文結束<i class="fa fa-heart"></i>感謝閱讀----------------</div>
{% endif %}
</div>
然後打開hexo博客源碼目錄\themes\next\layout_macro\post.swig文件，在post-body 之後， post-footer上面的兩個DIV之上，即{% if (theme.alipay or theme.wechatpay or theme.bitcoin) and not is_index %}之前添加如下代碼：
<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>
然後打開hexo博客源碼目錄\themes\next目錄下的_config.yml，在末尾添加以下代碼，就大功告成了。
# 文章末尾添加“本文結束”標記
passage_end_tag:
enabled: true
博文加密/博文置頂/文章首部添加置頂標誌/文章底部打賞/顯示文章字數統計、閱讀時長/文章頂部顯示更新時間
想加密某篇博文，首先打開hexo博客源碼目錄\themes\next\layout_partials\head.swig文件，在meta name=“theme-color” content="{{ theme.android_chrome_color }}"下第三行插入以下代碼，注意這個文件不要用UTF-8編碼格式保存。
<script>
(function(){
if('{{ page.password }}'){
if (prompt('please enter password') !== '{{ page.password }}'){
alert('wrong password!');
history.back();
}
}
})();
</script>
如果某篇文章需要加密，則在文章的head頭加上一行password: 123456(123456就是密碼)，如：
title: 測試文章1
date: 2019-02-02 23:45:50
tags:
- tag2
categories:
- 類1
- 子類1
password: 123456
top: 50
想讓某篇博文置頂，現在已經有修改後支持置頂的倉庫，可以打開Git bash here，直接用以下命令安裝：
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save
注意如果是在Gitlab用CI腳本自動部署hexo博客，則上面兩行還要加入到.gitlab-ci.yml文件中。
然後在需要置頂的文章的文件頭中加入一項top: 數值即可。數值可以是任意大於等於0的數字。置頂排序時會按數值從大到小的順序排序。
我們還可以在文章首部添加一個置頂標誌。打開hexo博客源碼目錄/themes/next/layout/_macro目錄下的post.swig文件，定位到div class=“post-meta”，在其後插入如下代碼即可，注意保存時要使用UTF-8編碼格式保存：
{% if post.top %}
<i class="fa fa-thumb-tack"></i>
<font color=7D26CD>置頂</font>
<span class="post-meta-divider">|</span>
{% endif %}
要開啓文章底部打賞，首先準備好微信和支付寶二維碼圖片。然後打開hexo博客源碼目錄\themes\next目錄下的_config.yml文件，找到下列代碼：
# Reward
#reward_comment: Donate comment here
#wechatpay: /images/wechatpay.jpg
#alipay: /images/alipay.jpg
#bitcoin: /images/bitcoin.png
如果只打開微信和支付寶打賞，那麼把3、4行的註釋去掉，然後把wechatpay和alipay後面的路徑換成圖片的路徑，建議先把圖片放到themes\next\source\images目錄下。
要顯示文章字數統計和閱讀時長，只需打開hexo博客源碼目錄\themes\next目錄下的_config.yml文件，找到下列代碼：
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
item_text: true
wordcount: false
min2read: false
totalcount: false
separated_meta: true
將wordcount、min2read設爲true即可。此時部署後會發現字數統計和閱讀時長後面沒有對應的xxx字，xx分鐘等字樣。我們再打開hexo博客源碼目錄\themes\next\layout_macro\post.swig 文件，找到相應部分修改成下面的代碼：
<span title="{{ __('post.wordcount') }}">
{{ wordcount(post.content) }} 字
</span>
<span title="{{ __('post.min2read') }}">
{{ min2read(post.content) }} 分鐘
</span>
注意保存時要以UTF-8編碼格式保存。
此時我們還發現統計的字數沒有顯示，這是因爲沒有安裝 hexo-wordcount 插件，使用下面的命令安裝即可：
npm i --save hexo-wordcount
注意如果在Gitlab上使用CI自動部署hexo博客，則上面的命令也要寫入.gitlab-ci.yml文件中。
要在文章頂部顯示更新時間，打開hexo博客源碼目錄\themes\next目錄下的 _config.yml 文件，找到下列代碼塊：
# Post meta display settings
post_meta:
item_text: true
created_at: true
updated_at: false
categories: true
把updated_at設爲true即可。
Pisces Scheme修改內容板塊的寬度
打開hexo博客源碼目錄/themes/next/source/css/_schemes/Picses/_layout.styl文件，在末尾添加下列代碼：
// 以下爲新增代碼！！
header{ width: 75% !important; }
header.post-header {
width: auto !important;
}
.container .main-inner { width: 75%; }
.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;
}
}
要調整寬度，只需修改兩個75%參數即可。
Pisces Scheme修改內容板塊/菜單欄/站點概況背景顏色和透明度
我們在上面設置背景圖片時打開hexo博客源碼目錄\themes\next\source\css\ _custom\custom.styl文件，添加了以下代碼：
.main-inner {
background: #fff;
opacity: 0.9;
}
這可以使除了菜單欄以外的其他板塊都應用其不透明度：0.9的設置。
要修改菜單欄背景顏色和透明度，打開hexo博客源碼目錄\themes\next\source\css_schemes\Pisces_layout.styl文件，找到下列代碼塊：
.header-inner {
position: absolute;
top: 0;
overflow: hidden;
padding: 0;
width: 240px;
background: white;
box-shadow: $box-shadow-inner;
border-radius: $border-radius-inner;
將background項改爲background: rgba(255,255,255,0.9); 0.9是透明度。
開啓博客站點內部搜索
在hexo博客源碼目錄，運行Git bash here，運行下面的命令：
npm install hexo-generator-searchdb --save
注意如果在Gitlab上使用CI自動部署hexo博客，則上面的命令也要寫入.gitlab-ci.yml文件中。
打開hexo博客源碼目錄中的_config.yml文件，在末尾下添加下列代碼：
search:
path: search.xml
field: post
format: html
limit: 10000
然後打開hexo博客源碼目錄/themes/next目錄下的_config.yml文件，找到下列代碼：
# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
enable: false
# if auto, trigger search by changing input
# if manual, trigger search by pressing enter key or search button
trigger: auto
# show top n results per article, show all results by setting to -1
top_n_per_article: 1
將enable改爲true即可。
部署hexo博客
要注意一點的是，我們在上面操作中所有涉及npm安裝的操作必須加入到.gitlab-ci.yml文件的script:項中，這樣在Gitlab線上才能正確生成博客。
在hexo博客源碼目錄點擊鼠標右鍵Git bash here，依次運行下列命令：
git init
git add -A
git commit -m "init blog"
git remote add origin [email protected]:username/username.gitlab.io.git
git push -u origin master
最後一步如果失敗，試試先使用命令：
git pull origin master --allow-unrelated-histories
然後重新進行最後一步。
這樣我們就將hexo博客的源碼推送到Gitlab pages倉庫上了。然後Gitlab服務器會自動檢查.gitlab-ci.yml腳本是否有效，校驗通過後，會自動開始執行腳本。過5-10分鐘執行完成後，我們就可以看到線上的博客更新了。
Mirror:git push同時將代碼push到gitlab和github
我們還可以修改git push的配置，將代碼同時push到gitlab和github上對應的倉庫中。打開hexo博客源碼目錄/.git/config文件，找到下面的代碼塊：
[remote "origin"]
url = [email protected]:yourname/yourname.gitlab.io.git
fetch = +refs/heads/*:refs/remotes/origin/*
在url這行下面加上新的一行其他遠程庫的路徑，如：
url = [email protected]:yourname/yourname.git
然後按照上面部署hexo博客的步驟push即可。注意push前先在github上添加你的ssh-key。