LOADING...

加载过慢请开启缓存(浏览器默认开启)

loading

用HEXO架設BLOG+圖片插入+Latex數學公式排版，詳細教學

2022/11/21 程式技術 詳細完整教學 Hexo Latex pandoc

壹、首先安裝必要軟體

  • Git
  • node.js (網頁伺服器)

  1. 這裡用windows10系統來說明，首先安裝GIT for windows

    連到 GIT官方網站，選擇64位元安裝

  2. 安裝完畢之後，可以從開始搜尋GIT，並打開GIT BASH

    如果覺得字體太小，可以照以下步驟調整

  3. 下載Node.js 伺服器，這裡下載.zip檔案 在node.js 官網下載最新的node.js (目前是18.12.1)

  4. 解壓縮到你喜歡的路徑下，然後設定環境變數

    注意C:\Users\bk\Documents\node-v18.12.1-win-x64要替換成你自己的路徑

  5. 重新開啟Git-Bash 輸入

    node -v

    如果出現以下畫面，代表node.js安裝成功

貳、安裝HEXO

  1. 在Git-Bash中輸入以下指令安裝，npm是Node.js用來安裝套件的指令

    npm install -g hexo-cli

    如果安裝成功會出現如下

  2. 在你喜歡的位置，初始化你的第一個blog，取名為Test

    hexo init Test

    進入folder，並且安裝依賴套件

    cd Test/
npm install

  3. 自己創建一篇貼文

    hexo new post post01

    接著在對應的資料夾會產生markdown檔案，可以用文件編輯器來編輯，位置為Test\source\_posts\post01.md

  4. 可以貼上一些markdown語法之後，發佈到部落格上

    hexo server

    跳出以下畫面點選允許

  5. 第一篇文章發佈完成，打開瀏覽器輸入網址 http://localhost:4000/ 來查看

  6. 總結Hexo發佈新貼文的流程如下

    • 新增一篇貼文 (.md) 在對應的資料夾下 source/_posts/

      hexo new post <貼文名稱>

    • 到對應的目錄下編輯 markdown檔案 (.md)

    • 清理之前server的一些static網頁檔

      hexo clean

    • 在local server 把目前的blog run起來

      hexo server

    • 使用瀏覽器預覽部落格在localhost上的執行結果

    • 將目前的部落格產生 static 網頁檔案，預設路徑為<你的BLOG名稱>/public/，可以將整個資料夾內容複製到真正的網頁伺服器上部署，(注意 **_config.yml** 要正確設置才能部屬)。

      hexo generate

參、在文件中插入圖片

全域路徑，圖片URL插入法

  1. 在source路徑下建立資料夾Image，並且放入圖片

  2. 用以下指令建立，新的貼文，並且在貼文中插入圖片

    hexo new post 測試圖片插入

    並且在markdown檔案 (測試圖片插入.md) 插入圖片，路徑為對於source資料夾的路徑

    ![](測試圖片插入/img01.jpg)

    然後發佈貼文

    hexo clean
hexo server

    在瀏覽器localhost根目錄下正常，點入文章顯示也正常

    不過以上方法不能對應不同的文章管理對應的圖片

用文章名稱對圖片做分類管理

  1. 注意不要使用 hexo-asset-image 這個套件，因為其中有很多bug，網路上找的答案也常常不work，常常圖片無法正確解讀為url

    如果已經安裝過遇到BUG，請解除安裝

    npm uninstall hexo-asset-image

  2. 這裡推薦安裝 hexo-image-link

    npm install hexo-image-link --save

  3. 在根目錄的**_config.yml中做設定，注意不是theme中的**，修改第43行

    post_asset_folder: true

  4. 建立一個新貼文

    hexo new post 測試圖片插入

    此時再Test/source/_posts資料夾中隨著.md檔產生之外，還會產生一個對應文章的asset資料夾，在Test/source/_posts/測試圖片插入中放入對應該文章的影像

    在測試圖片插入.md中插入圖片

    ![](測試圖片插入/img01.jpg)

  5. 測試圖片插入.md內容如下

    ---
title: 測試圖片插入
date: 2022-11-21 14:04:56
tags: 
---

image 測試

插入圖片測試

![](測試圖片插入/img01.jpg)

    我使用typora這個文字編輯器，可以正常顯示圖片

  6. 清除，之後開啟node.js服務

    hexo clean
hexo serve

    出現以上log，表示將影像路徑透過hexo-image-link這個套件轉換為{%asset_img %}的路徑

    在瀏覽器中輸入網址 http://localhost:4000/

  7. 在Index.html中正常顯示圖片

    在文章內容也能正常顯示圖片

肆、在文章中使用LATEX撰寫數學方程式

  1. 先到官網 下載pandoc

    然後安裝

  2. 接著安裝renderer

    npm install hexo-renderer-pandoc --save

  3. 解除安裝原本的 renderer

    npm uninstall hexo-renderer-marked

  4. 安裝 hexo-filter-mathjax 套件

    npm install hexo-filter-mathjax --save

  5. 在主要目錄下的 **_config.yml** 最後新增以下段落

    mathjax:
  tags: none
  single_dollars: true
  cjk_width: 0.9
  normal_width: 0.6
  append_css: true
  every_page: false

    然後重新開機，確保pandoc可以正確運作

  6. 發布新貼文

    hexo new post 測試Latex公式

  7. 編輯測試Latex公式.md，這邊特別注意，需要再加上mathjax: true，才會正確的用latex來編譯公式

    ---
title: 測試Latex公式
date: 2022-11-21 15:57:58
tags:
mathjax: true
---

公式測試

$y = \sqrt [3]{x_1^2 + x_2^2 + x_3^2 + x_4^2}$

  8. 清除static website 資料，重新render

    hexo clean
hexo serve

  9. 最後公式正常顯示

大功告成辣，有這些基本的環境就能開始寫程式、數學相關的部落格了，關於更換主題之後有空再來寫整理一篇

Reference

https://hexo.io/zh-tw/docs/

https://hexo.io/docs/asset-folders.html

https://yanyinhong.github.io/2017/05/02/How-to-insert-image-in-hexo-post/

https://zhuanlan.zhihu.com/p/280758822

https://blog.csdn.net/weixin_45073562/article/details/120289648

https://blog.csdn.net/jhgjhg225/article/details/125184280

https://pandoc.org/installing.html
img_show