Vic's Blog

遺忘x回想x自動化

0%

Hexo教學 Next主題設定與頁面功能(Ver. 8)

發表於 更新於 分類於
NexT(Ver. 8)的全域設定與撰寫相關功能做介紹。

由於自己選擇了 NexT主題匯入，這邊就以 NexT的設定做介紹。
請找到 themes/next/_config.yml 這隻檔案。

全域設定

菜單導覽

可以根據實際需求開啟，# 移除為關閉，反之則開。

themes/next/_config.yml
1
2
3
4
5
6
7
8
9
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

搜尋

請輸入以下指令，會開始安裝額外套件。

1
npm install hexo-generator-searchdb --save

接著搜尋 local_search的設定，將它設為 true

themes/next/_config.yml
1
2
local_search:
  enable: false

字體

修改 Next主題的字體，預設為 Google font的字體資源。

  • font $\rightarrow$ 記得開啟
  • font > host $\rightarrow$ 若有其他字體資源，可將網址放這
  • global $\rightarrow$ 網站文字全部修改
  • 其餘部分均能修改成不同字體
themes/next/_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
font:
  # enable: false
  enable: true
  host:
  global:
    external: true
    # family: Lato
    family: "Noto Sans TC"
    size: 
  title:
  headings:
  posts:

閱讀全文 More

在文章中某的地方加入 <!--more-->

1
文字文字文字文字文字文字文字<!--more-->

在檔案 header部分加上 description，會根據其內容呈現。

source/_posts/頁面.md
1
2
3
---
description:
---

撰寫相關功能

程式碼區塊

區塊複製

themes/next/_config.yml
1
2
3
# Add copy button on codeblock
copy_button:
  enable: true

區塊主題

主題預覽

themes/next/_config.yml
1
2
3
4
5
6
7
8
# All available themes: https://theme-next.js.org/highlight/
theme:
  # light: default
  light: tomorrow-night
  dark: tomorrow-night
prism:
  light: prism
  dark: prism-dark

區塊標題

標題前方可以加上該程式碼為何種語言，
例如，.yal為 yaml，.js 為 javascript

1
2
3
4
```yaml 標題文字
title: 
tags: 
``` ```

數學符號

功能名稱 功能描述
every_page 是否讓每一頁都開啟數學符號功能
mathjax 是否讓 mathjax寫在檔案開頭才開啟數學符號功能
themes/next/_config.yml
1
2
3
4
math:
  every_page: false
  mathjax:
    enable: true

回到撰寫頁面

source/_post/頁面.md
1
2
3
4
5
6
---
title: Hexo教學 Next主題
categories: hexo教學
description: Next主題相關設定 - 開啟數學符號以及更改字體
mathjax: true
---

內容分頁 tabs

預設就能使用，設定為 true時，切換時較為平滑

themes/next/_config.yml
1
2
3
4
5
# Tabs tag
tabs:
  transition:
    tabs: true 
    labels: true

回到頁面撰寫時，加入以下字串

1
2
3
4
5
{% tabs 區塊標題, 預設顯示區塊索引值 %}
<!-- tab 可單獨寫分頁標題 -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}

用上面的範例可以這樣寫 :

1
2
3
4
5
6
7
8
9
10
11
{% tabs 閱讀全文, 2 %}

<!-- tab 手動截斷-->
在文章中某的地方加入 `<!--more-->`
<!-- endtab -->

<!-- tab 加入 description-->
在檔案 header部分加上 description，會根據其內容呈現。
<!-- endtab -->

{% endtabs %}

若 <!-- tab 手動截斷--> 不加上該分頁標題，只有單純 <!-- tab -->，
則會根據區塊標題的文字自動加上索引值然後在分頁標題上顯示 分頁標題 1 分頁標題 2。

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs First unique name %}
<!-- tab -->
**這是分頁 1**
<!-- endtab -->

<!-- tab -->
**這是分頁 2**
<!-- endtab -->

<!-- tab -->
**這是分頁 3**
<!-- endtab -->
{% endtabs %}

自動加入分頁標題 :

這是分頁 1

這是分頁 2

這是分頁 3

其他

關閉 Powered by Hexo & NexT

在 themes/next/_config.yml中，尋找 Powered可以自由關閉，

版權宣告

在 themes/next/_config.yml中，尋找 copyright，可以加入版權宣告的文字敘述。

在 themes/next/_config.yml中，尋找 “# Icon name in Font Awesome.” ，可以在 fontawesome找到喜歡的 icon，將 “name”的文字更換即可，當然也可以修改 “animated”與 “color”。

後續功能

  • 摺疊

參考來源

  1. NexT說明 - math-equations
  2. NexT說明 - tabs
  3. Ray - 試著學 Hexo - NexT 主題篇 - NexT 還有哪些設定？
  4. Ray - 試著學 Hexo - 試著學 Hexo - NexT 主題篇 - 可以安裝的套件