Hexo 加入自訂的 HTML頁面

有時候想要記錄一些javascript特效或是小工具時,在Hexo會需要自訂自己的HTML頁面,以下是操作步驟

  1. 在Hexo專案下面找到 source 資料夾,新建一個要放自訂HTML的資料夾。
    我這邊是放html/tools/html_encode

  2. 在配置檔案_config.yml中,設定跳過渲染

    1. 單個檔案
      1
      2
      skip_render:
      - 'html/***.html'
    2. 跳過該資料夾下的所有檔案
      1
      2
      skip_render:
      - 'html/*'
    3. 跳過該資料夾下所有檔案以及子資料夾
      1
      2
      skip_render:
      - 'html/**'
  3. 之後使用指令清除暫存並開始Server

    1
    2
    3
    hexo clean
    hexo g
    hexo s
  4. 訪問網址驗證成果,它會以你資料夾的結構去建立URL,例如我的資料夾結構是html/tools/html_encode,因此在訪問時,就是訪問:
    http://localhost:4000/html/tools/html_encode/index.html

  5. 如果想要在原先的blog中加入這個自訂的HTML頁面,並使用Tag的話,推薦使用 iframe 的方式

    1
    2
    <iframe  src='/html/tools/html_encode/index.html' scrolling="no" frameborder="0" width='100%' height='800px' style='margin-top:12px'>
    </iframe>

    結果如下:

使用Hexo Admin

透過 hexo-admin 這套插件,就能透過GUI介面進行後台管理,如新增或編輯markdown文件,簡化了發布文章的流程。

  1. 安裝套件
  2. 使用終端機,並移動到Hexo專案位置下,之後執行以下指令
    1
    $ npm install --save hexo-admin 

安裝完成之後,啟動本地端Server就可以進入後台管理,如下

  1. bash $ hexo server -d
  2. 進入 http://localhost:4000/admin 可進入後台管理

注意: Hexo Admin已經不維護了