hexo next 設定優化

前言

這是「第 2 篇 : 博客設定優化」的教學，以下是全部教學篇的總覽

總覽

下載軟體

Scheme 設定

到 hexo\themes\next\_config.yml 找到以下語法

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

# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

# Dark Mode
darkmode: false

將 scheme: Gemini 註解打掉並將 scheme: Muse 加上註解 #

開啟黑暗模式的話就把 darkmode: false 改成 darkmode: true

頁尾設定

作者欄

到 hexo\config_yml 找到以下代碼 :

# Site
title: Hexo 
subtitle: '' 
description: '' 
keywords: 
author: John Doe 
language: en 
timezone: ''

將 author 改成你的名字

去除強力驅動

到 hexo\themes\next\layout\_partials\footer.swig 找到以下代碼 :

{% if theme.footer.powered %}
  <div class="powered-by">{#
  #}{{ __('footer.powered', '<a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a>') }}{#
#}</div>
{% endif %}

直接把上面所展示的代碼全部刪掉就可以了

圖片點擊放大插件

到 hexo\themes\next\source\lib 開啟 cmd

輸入以下指令

1	git clone https://github.com/theme-next/theme-next-fancybox3 fancybox

到 hexo\themes\next\_config.yml 找到以下代碼 :

1
2
3

# FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images.
# For more information: https://fancyapps.com/fancybox
fancybox:

更改為 fancybox: true ，重新 hexo clean, hexo s 就可以了

圖片太透明

到 hexo\themes\next\source\css\_colors.styl 找到以下代碼

img {
    opacity: .75;

    &:hover {
        opacity: .9;
    }
}

將反白代碼全部刪掉就好

主選單設置

新增自訂頁面

在根目錄 (hexo 資料夾) 打上以下指令

1	hexo new page "頁面名稱（網址用）"

例如我就新增了

1	hexo new page about

存放位置與頁面資訊

有別於文章與草稿有各自不同的目錄存放，頁面檔案是獨立存放於一個目錄中的，像是我剛剛建立了 about 頁面，頁面存放位置於 hexo\source\about 內，而檔案名稱為 index.md。

因此如果你要將草稿建立成頁面，假設你的頁面叫做「message」，就要在 source 目錄內建立一個名為 message 的目錄，將草稿檔案移進去目錄後，將檔案名稱改為 index.md 即可。

如果我們想使頁面不能留言，就再加上 comments: false

1
2
3

title: about
date: 2021-08-28 18:46:39
comments: false

利用主選單連到頁面

開啟 hexo\themes\next\_config.yml 檔案並找到以下語法：

menu:
  home: / || fa fa-home
  #about: /about/ || fa fa-user
  #tags: /tags/ || fa fa-tags
  #categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

我們只要將 #about 那一行解除註解即可。不過如果你的關於頁面不是設定成 about（或許可能是你的英文名字），那就改成你設定的名稱即可。

標籤頁面優化

在 hexo\themes\next\layout 下新建 tag-color.swig，貼上以下代碼：

  <script type="text/javascript">
     var alltags = document.getElementsByClassName('tag-cloud-tags');
     var tags = alltags[0].getElementsByTagName('a');
     for (var i = tags.length - 1; i >= 0; i--) {
       var golden_ratio = 0.618033988749895;
       var s = 0.5;
       var v = 0.999;
       var h = golden_ratio + Math.random()*0.8 - 0.5;
       var h_i = parseInt(h * 6);
       var f = h * 6 - h_i;
       var p = v * (1 - s);
       var q = v * (1 - f * s);
       var t = v * (1 - (1 - f) * s);
       var r, g, b;
       switch (h_i) {
          case 0:
              r = v;
              g = t;
              b = p;
              break;
          case 1:
              r = q;
              g = v;
              b = p;
              break;
          case 2:
              r = p;
              g = v;
              b = t;
              break;
          case 3 :
              r = p;
              g = q;
              b = v;
              break;
          case 4:
              r = t;
              g = p;
              b = v;
              break;
          case 5:
              r = v;
              g = p;
              b = q;
              break;
          default:
              r = 1;
              g = 1;
              b = 1;
        }
       tags[i].style.background = "rgba("+parseInt(r*255)+","+parseInt(g*255)+","+parseInt(b*255)+","+0.5+")";
     }
</script>

<style>
  .tag-cloud-tags{
    text-align: center;
    counter-reset: tags;
  }
  .tag-cloud-tags a{
    display: inline-block;
    border: 0px;
    border-radius: 10px;
    padding: 0px 10px;
    margin: 8px;
    color: rgba(34, 34, 34, 0.8);
    
  }
/* 文字前添加相应的符号，content后的Unicode可以自定义*/
  .tag-cloud-tags a:before{
    font-family: 'Font Awesome 5 Free';
    content: "\f02b";
    font-weight: 900;
  }

  .tag-cloud-tags a:hover{
     box-shadow: 0px 5px 15px 0px rgba(0,0,0,.4);
     transform: scale(1.1);
     transition-duration: 0.15s;
  }
</style>

在來就是要來撰寫隨機生成顏色的部分

打開 hexo\themes\next\layout\page.swig，ctrl + F 搜尋 <div class="tag-cloud-title">

修改代碼如下 (不要直接複製，左側的 + 代表加了這行，- 代表刪除這行)

      <div class="post-body{%- if page.direction and page.direction.toLowerCase() === 'rtl' %} rtl{%- endif %}">
        {%- if page.type === 'tags' %}
          <div class="tag-cloud">
            <div class="tag-cloud-title">
              {{ _p('counter.tag_cloud', site.tags.length) }}
            </div>
            <div class="tag-cloud-tags">
              {{ tagcloud({
                min_font   : theme.tagcloud.min,
                max_font   : theme.tagcloud.max,
                amount     : theme.tagcloud.amount,
-                color      : true,
+                color      : false,
                start_color: theme.tagcloud.start,
                end_color  : theme.tagcloud.end})
              }}
            </div>
          </div>
+       {% include 'tag-color.swig' %}

如果是 darkmode 嫌文字顏色不搭可以將 hexo\themes\next\layout\page.swig 的這兩行 :

1 2	start_color: theme.tagcloud.start, end_color : theme.tagcloud.end

改成

1 2	start_color: white, end_color : white

如果不想要 tag 的話可以改 hexo\themes\next\layout\tag-color.swig 的這裡

/* 文字前添加相应的符号，content后的Unicode可以自定义*/
  .tag-cloud-tags a:before{
    font-family: 'Font Awesome 5 Free';
    content: "\f02b";
    font-weight: 900;
  }

改成

1
2
3

/* 文字前添加相应的符号，content后的Unicode可以自定义*/
  .tag-cloud-tags a:before{
  }

搜尋功能

在根目錄 hexo 開啟 cmd

1	npm install hexo-generator-searchdb --save

接下來因為 hexo-generator-searchdb 這個套件是針對 NexT 優化出的，所以就可以找得到相關的設置在 hexo\themes\next\_config.yml

# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
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
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

只需要將 enable 改成 true 就可以讓自己網站資源搜尋功能囉。

閱讀進度條

頂部或是底部有個進度條，隨著你的閱讀進度進行滑動。

在 hexo\themes\next\_config.yml 找到以下這段語法：

# Reading progress bar
reading_progress:
  enable: false
  # Available values: top | bottom
  position: top
  color: "#37c6c0"
  height: 3px

enable：設定是否開啟進度條，開啟則設定 true
position：設定進度條在頂部還是底部顯示
color：進度條背景顏色
height：進度條高度

將 enable: true 即可

回到頂部按鈕

在 hexo\themes\next\_config.yml 找到以下這段語法：

back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: false
  # Scroll percent label in b2t button.
  scrollpercent: false

將 sidebar 設定為 true：設定在側邊欄的個人資訊區塊中，Social Links 下，顯示回到頂部按鈕
將 scrollpercent 設定為 true：回到頂部按鈕旁加上閱讀進度百分比。

閱讀全文按鈕

在文章想切斷的地方加入以下這行(獨立的一行)

1	<!-- more -->

如何始點擊「閱讀全文」自動跳到最頂層?

如果你覺得點擊閱讀全文就應該從切斷的地方繼續讀那可以跳過這裡

到 hexo\themes\next\lauout\_macro\post.swig 裡面找到以下語法

   <!--/noindex-->
{% elif post.excerpt %}
        {{ post.excerpt }}
        <!--noindex-->
        {%- if theme.read_more_btn %}
    <div class="post-button">
            <a class="btn" href="{{ url_for(post.path) }}#more" rel="contents">
        {{ __('post.read_more') }} &raquo;
            </a>
    </div>
        {%- endif %}
        <!--/noindex-->

將 #more 刪掉即可 (上面圖片有反白)

程式碼區塊樣式

內建

在 hexo\themes\next\_config.yml 找到以下這段語法：

codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: normal
  # Add copy button on codeblock
  copy_button:
    enable: false
    # Show text copy result.
    show_result: false
    # Available values: default | flat | mac
    style:

將 highlight_theme: normal 改成 highlight_theme: night bright

加上數學式

在 hexo\themes\next\_config.yml 中：

# Math Formulas Render Support
math:
  # Default (true) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in Front-matter.
  # If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
  per_page: true

  # hexo-renderer-pandoc (or hexo-renderer-kramed) requi#FC4E4E for full MathJax support.
  mathjax:
    enable: true
    # See: https://mhchem.github.io/MathJax-mhchem/
    mhchem: false

  # hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin) requi#FC4E4E for full Katex support.
  katex:
    enable: false
    # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
    copy_tex: false

在 window powershell 打上以下指令

1 2	npm uninstall hexo-renderer-marked --save npm install hexo-renderer-pandoc --save

另外需要注意，如果置 mathjax: true，且使用了 hexo-renderer-kramed 渲染引擎，會遇到一行只能使用一個行內公式的情況。

解決方法是到路徑 hexo\node_modules\kramed\lib\rules\inline.js 將

var inline = {
  escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
  // ...
  em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  // ...
};

修改為

var inline = {
  escape: /^\\([`*\[\]()#$+\-.!_>])/,
  // ...
  em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  // ...
};

最後，記得在想使用 latex math 的檔案下，加上 mathjax: true

就可以使用 $\LaTeX$ 了

添加作者頭像

到 hexo\themes\next\_config.yml 找到下面這行

# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: 
  # If true, the avatar will be dispalyed in circle.
  rounded: false
  # If true, the avatar will be rotated with the cursor.
  rotated: false

url : 網址
rounded: 是否圓框
rotated: 是否在鼠標移到上面時旋轉一圈

將自訂的圖片傳到 hexo\themes\next\source\images 然後在 url: 後面打上 /images/檔案名稱 + 格式

例如我加入了一張名為 coffee.jpg 的圖片，以下是我的 code

# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/coffee.jpg
  # If true, the avatar will be dispalyed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: false

增設留言區

前言

因為我本身很討厭要登入才能留言，所以特別選擇 valine 可以不用登入就可以留言的軟件，如果你寫要有 emoji 可以參考 Disqus，想要跟 github 一樣可以使用 Gitalk

LeanCloud 設置

先到LeanCloud官網註冊帳號，登入之後點擊 创建应用，選擇开发版，確定 创建，如下圖

創建成功後，到 设置 $\rightarrow$ 应用凭证

把 AppID 和 AppKey 都複製下來

然後將頁面往下滑，會看到「Request 域名」，如下圖將第一欄的網址也複製下來

到 hexo\themes\next\_config.yml 找到以下代碼 (可 ctrl + F 搜尋 valine )

這邊提供文字檔，記得將剛剛 leancloud 網站的 AppID 跟 AppKey 和 Request 域名 分別貼到下面指示的地方

# Valine
# For more information: https://valine.js.org, https://github.com/xCss/Valine
valine:
  enable: true
  appid: # 填你的 AppId
  appkey: # 填你的 AppKey
  notify: false # Mail notifier
  verify: false # Verification code
  placeholder: Just go go # Comment box placeholder
  avatar: mm # Gravatar style
  guest_info: nick,mail,link # Custom comment header
  pageSize: 10 # Pagination size
  language: # Language, available values: en, zh-cn
  visitor: false # Article reading statistic
  comment_count: true # If false, comment count will only be displayed in post page, not in home page
  recordIP: false # Whether to record the commenter IP
  serverURLs: # 填你的 Request 域名第一欄，記得前面要加 https://
  #post_meta_order: 0

提醒一下，Request 域名第一欄要貼到 serverURLs 前面記得加 https://

例如
1
serverURLs: https://ajd8k3dx.api.lncldglobal.com

後台管理

到 数据存储 $\rightarrow$ 结构化数据 然後點擊 创建 Class 按鈕

記得要創建兩個 class，一個名為 Comment，一個名為 Counter

新增 Comment 就上圖設定一樣只是 Class 名称 改成 Comment 而已

改完之後應如下圖所示

之後就可以在這裡管理評論

結果

重新 hexo clean，hexo g，hexo s 就可以看到留言區了

額外知識 : 不想讓使用者留言的可以在 markdown 文件前面打上 comments: false

1
2
3

title: Blog
date:
comments: false

在文章撰寫特殊區塊

note

1
2
3

{% note [class] [no-icon] %}
文章內容
{% endnote %}

[class] : note 格式，有六種選項 : default , primary, success, info, warning , danger
[no-icon] : 打上 no-icon 即可將 icon 去除

以下是範例

{% note  success no-icon %}

#### 標題

這裡是內容
> 支援引用區塊
```
也支援程式碼區塊
```

{% endnote %}

標題

這裡是內容

也支援程式碼區塊

支援引用區塊

更改 note 樣式

到 hexo\themes\next\_config.yml 中找到以下代碼

# Note tag (bs-callout)
note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: flat
  icons: true
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0

更改 style: flat 為以下選擇
- style: modern
- style: simple
- style: flat

頁籤功能

看一下範例 :

頁籤一

因沒有特別命名，所以此頁籤會用 mytab 加上流水號。

頁籤二

開無痕進來會先看到我。

頁籤三

這裡有命名，會看到頁籤名不一樣。

頁籤四

可以看到這裡的流水號是從 4 開始，應該是抓 array index 作為流水號。

頁籤五

這裡有加 icon，有什麼 icon 可以來這裡找。

在文件中打上 :

{% tabs mytab,2 %} 將 tab 取名為 mytab，預設會選取第二個頁籤，使用 -1 會不選取
<!-- tab -->
### 頁籤一

因沒有特別命名，所以此頁籤會用 `mytab` 加上流水號。
<!-- endtab -->
<!-- tab -->
### 頁籤二

開無痕進來會先看到我。
<!-- endtab -->
<!-- tab 這是頁籤三 -->
### 頁籤三

這裡有命名，會看到頁籤名不一樣。
<!-- endtab -->
<!-- tab -->
### 頁籤四

可以看到這裡的流水號是從 4 開始，應該是抓 array index 作為流水號。
<!-- endtab -->
<!-- tab 個人資料 @user -->
### 頁籤五

這裡有加 icon，有什麼 icon 可以來[這裡](https://fontawesome.com/icons)找。
<!-- endtab -->
{% endtabs %}

spoiler

在 hexo 開啟 cmd ，打上以下指令

1	npm install hexo-sliding-spoiler --save

修改 hexo\node_modules\hexo-sliding-spoiler\assets\spoiler.css 為以下 code

code

.spoiler {
    margin: 5px 0;
    padding: 0 15px;
    border: 3px solid rgb(105, 105, 105);
    position: relative;
    clear: both;
    border-radius: 3px;
}

.spoiler .spoiler-title {
    background: rgb(105, 105, 105);
    opacity: 1;
    margin: 0 -15px;
    padding: 5px 15px;
    color: rgb(200, 200, 200);
    font-weight: bold;
    font-size: 14px;
    display: block;
    cursor: pointer;
}

.spoiler .spoiler-title:before {
    font-weight: bold;
}

.spoiler.collapsed .spoiler-title:before {
    content: "▲ ";
}

.spoiler.expanded .spoiler-title:before {
    content: "▼ ";
}

.spoiler .spoiler-content {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    -moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -moz-transition-timing-function: ease-in-out;
    -webkit-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}

.spoiler.collapsed .spoiler-content {
    overflow: hidden;
    max-height: 0;
}

.spoiler.expanded .spoiler-content {
    max-height: 3000px;
    overflow: hidden;
}

.spoiler .spoiler-content p:first-child {
    margin-top: 0 !important;
}

用法就是跟 note 差不多，在 markdown 文件打上

1
2
3

{% spoiler 顯示文字 %}
隱藏內容
{% endspoiler %}

以下是範例

範例

{% spoiler "點擊隱/顯內容" %}

隱藏的內容
支持 markdown 語法，代碼塊，數學式

```c++
#include <bits/stdc++.h>
using namespace std;
int main() {
	cout << "Hello World!" << '\n';
	return 0;
}
```

$$
e^{ix} = cosx+isinx
$$

{% endspoiler %}

點擊隱/顯內容

隱藏的內容
支持 markdown 語法，代碼塊，數學式

#include <bits/stdc++.h>
using namespace std;
int main() {
	cout << "Hello World!" << '\n';
	return 0;
}

$e^{ix} = cosx+isinx$

加入 emoji

在 hexo 資料夾開啟 cmd 打上 :

1	npm install hexo-filter-emoji

然後就可以在 markdown 檔案用了

用法 : :emoji_name: 跟 discord emoji 的用法一樣

自訂樣式

建立 styles.styl

若要進行下面的設置，請務必要先看怎麼建立 styles.styl 檔案

在 hexo\themes\next\_config.yml 中找到

# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl

將 #style: source/_data/styles.styl 的註解弄掉

然後去 hexo\source 裡面新建一個名為 _data 的資料夾 (名稱一定要是 _data 不可自行更換)

進入你建立的 _data 資料夾內，建立名為 styles.styl 的文件

連結顏色更改

在 hexo\source\_data\styles.styl 加上：

// 修改選中文字底色
/* webkit, opera, IE9 */
::selection { 
    background: #00c4b6;
    color: #f7f7f7; 
}
/* firefox */
::-moz-selection { 
    background: #00c4b6;
    color: #f7f7f7;    
}

如果想修改 note 裡面的連結顏色，加上 :

.post-body .note p a, .post-body .note p span.exturl {
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

反白顏色更改

在 hexo\source\_data\styles.styl 加上

::selection {
    background: #3390FF;
    color: white;
}

上面只包含了文章的反白顏色 (不含 note)

以下是 note 的反白顏色，一樣加在 hexo\source\_data\styles.styl

.post-body .note {
  ::selection {
    background: #C4E7E8;
    color: black;
  }
}

加上背景圖片

在 hexo\source\_data\styles.styl 加上

body {
      background:url(圖片網址);
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position:center center;
}

如果是在網路上的圖片，複製圖片位址，然後將「圖片網址」改成你複製的圖片位址
如果是在本地的圖片，存在 hexo\source\images (如果沒有此資料夾自己創建一個)，然後把「圖片網址」改成 /images/檔案+格式
- 例如 /images/img.jpg

文章透明

在 hexo\source\_data\styles.styl 加上

.content-wrap {
  opacity: 0.95;
}

.side bar {
  opacity: 0.95;
  color: white;
}

.popup {
  opacity: 0.95;
}

其中的 opacity: 0.95 是透明度，可以自己調整

修改字體顏色

在 hexo\source\_data\styles.styl 加上

1
2
3

body {
    color: #EBEBEB; // 全局字體顏色
}

這裡修改了文章的字體顏色，如果想進一步修改 note 的顏色，請加上

1
2
3

.post-body .note {
  color: black; // note 字體顏色
}

行內代碼塊顏色

在 hexo\source\_data\styles.styl 加上

code {
  padding: 2px 4px;
  word-wrap: break-word;
  color: #c7254e;
  background: #f9f2f4;
  border-radius: 3px;
  font-size: 18px;
}