Hexo5 新增頁面以 Bootstrap 客製

Hexo 框架很方便,但如果有需求在此另外單獨客製自己頁面該怎麼做呢 ? 這邊使用 Bootstrap 框架來做客製。此文章於模擬伺服器測試成功,如資訊有誤,也歡迎指正,我會很感激的,謝謝 😊 !
.
下方以客製一個食譜頁面為例。

於 hexo 新增頁面

  1. 新增食譜頁面 ( 命名為 cook )
    • 執行指令 hexo new page 新增頁面的名稱 ,就會於路徑 : 專案/source 內新增一個 cook 資料夾與 index.md 檔案。
    1
    $ hexo new page cook
    hexo新增頁面.jpg
  2. 客製食譜頁面
    • 把 index.md 檔案改成 index.html ,並清空預設的內容,就可使用 emmet 的 ! 快速生成 HTML 。如果不想要客製的頁面吃到 hexo 主題樣式,可於上方加入 layout: false
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    ---
    layout: false
    ---
    <!DOCTYPE html>
    <html lang="zh-Hant-TW">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cook 頁面</title>
    <!--加入 BS 客製 sass,下方有解說-->
    </head>
    <body>
    <h1>這是標題</h1>

    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    </body>
    </html>
  3. 重啟模擬器 hexo shttp://localhost:4000/food/ 就可以看到畫面囉 !

使用 npm 安裝 Bootstrap

  1. npm 載入 Bootstrap ( BS 文件 )
    1
    $ npm install bootstrap
  2. 客製 Bootstrap Sass ( 使用官方文件中的 Option A )
    • 複製一份 Bootstrap 變數檔來客製用 ( node_module/bootstrap/scss/_variables.scss )
      • 貼入路徑:專案/新增 stylesheet /新增 helpers/_variables.scss
    • 於 all.scss 匯入相關資訊。路徑 : 專案/stylesheet/新增 all.scss
    1
    2
    3
    4
    // all.scss
    @import "../node_modules/bootstrap/scss/functions";
    @import "./helpers/variables";
    @import "../node_modules/bootstrap/scss/bootstrap";
  3. 專案建立 css 檔
    • 於 VSCode 的設定中選擇「workspace」 → 點擊右方側欄「open Settings(JSON)」,進行下方設定。‼️ 注意 : sass 編譯出的 css 檔案一定要放在客製頁面的資料夾中,否則會無效。
      • 編譯出的 css 檔案位置 → "savePath": "source/客製的資料夾名稱" 。因為想把 html 與 css 檔做分類,所以於 cook 資料夾下又新增 style 資料夾。
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      {
      // 把下方程式碼片段放置{}中
      "liveSassCompile.settings.formats":[
      {
      "format": "compressed",
      "extensionName": ".css",
      "savePath": "source/cook/style" //編譯位置須於客製頁面的資料夾內
      },
      ]
      }
  4. 點擊 VSCode 下方的 Watch Sass 進行編譯。 watchsass.jpg
  5. 於 cook.html 匯入步驟3. 編譯出的 css 檔案 <link rel="stylesheet" href="檔案位置">,就可以使用 Bootstrap 框架囉 !
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    ---
    layout: false
    ---
    <!DOCTYPE html>
    <html lang="zh-Hant-TW">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cook 頁面</title>
    <!--加入 BS 客製 sass-->
    <link rel="stylesheet" href="./style/all.css">
    </head>
    <body>
    <h1>這是標題</h1>

    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    </body>
    </html>

附上資歷夾路徑

Hexo 新增頁面以 BS5 客製.jpg

參考資訊