Hexo使用技巧

發表於 更新於

目錄

如何在get repo裡面加上README ?
如何在hexo設置的網頁插入圖片 ?
如何在hexo設置網頁錨點 ?
如何在hexo輸入數學式 ?

如何在git repo裡面加上README

  • 由於hexo會幫你自動把md檔轉成html上傳github，因此直接在_posts裡面新增README是不可行的

Step1

  • 到_config.yml裡面找到#Directory子項，在裡面的skip_render補上README.md

Step2

  • 完成以後就可以直接在source/_posts裡面直接補上README囉~上傳的時候也可以正常顯示了

附註：如果想備份blog原始檔到github，README應該做在根目錄上而非source內，且兩個README可以獨立存在!

(回目錄)

如何在hexo設置的網頁插入圖片

  • 如果直接在source/image放入圖片並且在md連連結的話，會連不上圖片
  • 可以使用admin套件來協助

Step1

在終端機輸入

1
$npm install hexo-admin --save

來安裝admin套件

Step2

  • 安裝完以後，在localhost狀態下補一個/admin就可以進入admin介面
  • 在admin介面可以直接看到你的所有貼文，按下筆進入編輯，在這頁面下直接貼上圖片即可

  • 在貼上成功以後會出現
    1
    ![upload successful](\\images\yourPicName.png\)
    請把\改成/並且把\\改成../即可 (Win11，其他系統可能改法不同，請依照系統特性修改)

(回目錄)

如何在hexo設置網頁錨點

markdown語法為：

1
[連結文字](#你要連結的標題名稱)
  • 碰上空格需要以-代替
  • 如果碰上.或是()，依照各編輯器與網站，處理方法不同
    • 有些編輯器直接忽略即可
    • 有些編輯器(如本站)同樣用-代替(複數.跟()相連也只需要一個-)，若遇到結尾有)可以忽略
  • 以錨定標題『有夠 歪七扭八)標()題)』為例，語法為
    1
    [嘗試看看吧!](#有夠-歪七扭八-標-題)
    嘗試看看吧!

有夠 歪七扭八)標()題)

(回目錄)

如何在hexo輸入數學式

原本以為這只是小問題，結果卻搞了我整整半天…原生hexo渲染器對於LaTex支援性太差了…這點輸HackMD

法一：hexo-renderer-marked + hexo-math

參考資料來源
hexo-math頁面

  • Hexo預設的renderer是不支持直接在md中使用$...$的，一般來說推薦的工具是hexo-math，直接在終端機輸入以下指令即可安裝
    1
    npm install hexo-math --save
  • 然而雖然我們可以直接在md檔中用$…$輸入LaTex表達式，但因為”"屬於特殊符號，都會先被markdown先行解析，因此我們每次要使用到\都需要先在前面打一個\來避免他被吃掉(\)
  • 依照官方文件建議，我們可以使用hexo-math指定的標籤『{% math %} ... {% endmath %}』來包住數學式，這樣我們就可以防止數學式的\符號被markdown randerer影響
    • 這麼做的好處是寫表達式不用一個一個去處理\，但是壞處就是在對於沒有支援hexo-math的地方使用這樣的標籤會導致相容性出問題(而且那陀標籤很笨重)，使網頁跑版。

PS. 與法三相對，是選擇跟renderer規則和平共處的做法(不改裝pandoc或改主題的前提下)，現在回來看這做法好像不錯orz…

法二：hexo-renderer-markdown-it + markdown-it-latex2img

markdown-it-latex2img頁面
hexo-renderer-markdown-it頁面

  • 相比於官方原始的renderer，這個版本的渲染器支援更多功能
  • markdown-it-laten2img是一個plugin，用於支援LaTex的文字格式
  • 若採用這個方法，需要先移除原版的renderer
    指令如下:
    1
    2
    3
    npm uni hexo-renderer-marked --save
    npm i hexo-renderer-markdown-it --save
    npm i markdown-it-latex2img --save
    安裝完以後，到_config.yml中補這段：
    1
    2
    3
    4
    #markdown setting for hexo-renderer-markdown-it
    markdown:
      plugins:
        - markdown-it-latex2img
    就可以了
    PS. 目前已知問題：改用這個renderer會導致錨點功能失效！(因為整個渲染器被改掉，可能導致原始的一些符號渲染成其他符號而讓原本的文本失效!)
    PPS. 因為後來連admin插件都不能用，原本的圖片連結都失效了，不得已只好放棄這個做法

法三：

筆者處理這個問題的時候弄到頭昏腦脹…直接貼別人的教學網誌
請參照這篇網誌

目前已知問題：

  • 因為有改到渲染escape的規則，所以會導致有些東西失靈(同前面法2的原因)
  • <detail>不可使用
  • \也不再會被丟入特殊字元中 (這是為了配合LaTex裡面動不動就需要用到\，所以必須把\的保留字移除)
    • 這樣做的壞處是(、)、.、\、\n、\t、<>、[]等等特殊符號不可跟某些需要用到這些符號的指令混用了
    • ex: 不能在連結內打[]

目前這樣設置只是折衷，不可能兼顧方便性與相容性(打$$可以切LaTex inline)、又兼顧全面性(\的保留字依然適用)，只能說，當有些保留字
衝突的時候真的就只能犧牲一者(所以你在我的網誌裡面會看不到toggle list，因為\被無視了XD，請善用錨點功能)

更新：最後反璞歸真只用hexo-renderer-marked + hexo-math 居然可以用$$而且\不會被無視… 雖然我不知道發生甚麼但總之他動了…orz

upload successful

法四

直接使用hexo next theme…

目前設法:

  • 使用hexo next theme
  • 安裝hexo-math
  • 使用原始的renderer
  • 在_config.next.yml裡面找到math，enable mathjax，且every_page= true

Note: 如果用Katex會跑版，然後如果用mathjax配上hexo-renderer-markdown-it會讓圖片的_(或其他字元)被渲染器被吃掉導致無法顯示
參考資料：hexo-next官方文件

https://blog.csdn.net/lzs781/article/details/105592503

如何讓hexo與hackMD更加兼容

圖床

(回目錄)