手把手 hexo 從零開始教學(零)

發表於 更新於 分類於 Disqus： 文章字數： 2.2k 所需閱讀時間 ≈ 5 分鐘

因為疫情期間基本上跟本不能去實驗室，都整天待在家裡面，變成說就算到了暑假也沒什麼感覺 w ，反正每天過的生活也差不多就那樣。為了可以更能提起精神看看論文、寫寫筆記，決定用 hexo 來架一個自己的網站，上面來放一些論文筆記什麼的…，以下是 hexo 的一樣心得。

keywords: hexo

手把手 hexo 從零開始教學(零)

hexo 常用指令

目前有三個最常用到指令 * 生成 public 檔 

1
2
hexo generate
hexo g
* 開起一個簡單的 server 
1
2
hexo server
hexo s
* 把 public 檔刪掉 
1
hexo clean
都常我都會用 npm 把它們合在一起，這樣開發的時候 debug 比較方便一些 
1
hexo clean && hexo g && hexo s --debug

hexo 上使用 mathjax 踩雷

hexo 上面初始的 markdown 編釋器是 marked，但是它只能處理一些文本上的需求，如果在筆記中需要用到 mathjax 等數學符號，就要把 marked 換掉。

網路上有推薦說有兩個套件可以換，分別是 * hexo-renderer-pandoc * hexo-renderer-kramed

兩個都對 mathjax 的支援度很高，但根據 nexT 官網的描述，以及我個人花了 2 個小時 google 的心得…，pandoc 比較推薦，kramed 就是會發生一些神奇的 bug，什麼 $$ 顯示不出來阿…

nexT 官網的解釋

總之以下推薦使用 pandoc 做為編釋以及一些細節的小修改：

  • 首先把 marked 移除，不然 pandoc 會跟它版本衝突 
    1
    npm uninstall hexo-renderer-marked --save
  • 接著安裝 pandoc 
    1
    npm install hexo
  • 接著在 nexT 的 _config.yml 中把 math 的地方 enable 
    1
    2
    3
    4
    math:
      ...
      mathjax:
        enable: true
  • 最後重新整理一下 
    1
    hexo clean && hexo g && hexo s --debug

就大功告成啦啦，可以來試試看 inlineMath 跟 displayMath 有沒有成功

\(a = b + c\)

\[ \begin{gathered} a = b + c \\ i = 1, 2 \end{gathered} \]

調教 pandoc

裝完 pandoc 後會發現一些圖片註解的地方會跑出來兩邊，嗯…對我來說有點煩 w，所以我上網找了一下發現只要在 hexo 的 _config.yml 加入一些設定就可以了：

1
2
3
pandoc:
  extensions:
    - '-implicit_figures'

還有一個問題，就是也不知道為什麼 pandoc 的 $$ 數學公式加上 \\ 不會換行…，後來一查才知道，原來 mathjax 有提供多功能的數學公式排版 w ，要把那個加上去才行

以下列出如果要使用換行公式的做法：

1
2
3
4
5
$$
\begin{gathered}
    ...
\end{gathered}
$$

以上就大功告成啦，得到一個排板漂亮，又可以顯示 mathjax 的編釋器啦

hexo 新增文章介紹

在 hexo 中所有的文章都是存在 source 這個資料夾底下，當我們要新增一個文章的時候，可以打下面這個指令：

1
hexo new [layout] title

其中這個 layout 預設是 post，而 title 就是文章的標題

那這個 layout 其實對應的是在 scaffolds 裡面的 .md 檔，它會去找對應的 layout 去生成出預設排版

像我就會把 post 改成以下的樣子，這樣每次新增一個文章的時候，就不用再多花時間打字了：

1
2
3
4
5
6
7
8
9
---
title: {{ title }}
date: {{ date }}
tags:
categories: 
mathjax: false
---

<!--more-->

此外在 hexo 的 _config.yml 中也有底下這一行，更改檔案的名稱，在這邊我加上新增時間，可以更好的來管理文章。

1
new_post_name: :title.md

可以改成 

1
new_post_name: :year-:month-:day-:title.md

hexo 首頁 discription

hexo 首頁會預設把你文章整坨貼上來，我們可以加上一些 discription 來簡單介紹一下文章概要，精簡版面

有兩種做法：

  1. 是用 discription
1
2
3
---
discription: 
---
  1. 用 <!--more-->

hexo nexT 設定背影、透明化

https://hackmd.io/@Heidi-Liu/hexo-theme https://blog.csdn.net/qq_43414603/article/details/104113198