電子報讀者募集中！歡迎 訂閱電子報！

有bug的時候可以看看，因為我記憶力不好:”) 本文探討 Hexo 主題的布局與命名規則，分析如何正確配置路由，避免連結錯誤，並總結 url_for 函數在靜態資源管理中的應用。

樹狀圖

    my-blog/
    └── themes/
    └── themes/hexo-theme-animal/
            └── layout/
            ├── _partial/
            │   ├── footer.ejs
            │   ├── head.ejs
            │   ├── header.ejs
            │   ├── popup_tag.ejs
            │   ├── search-results.ejs
            │   └── sidebar.ejs
            ├── archive.ejs
            ├── category.ejs
            ├── index.ejs
            ├── layout.ejs
            ├── post.ejs
            └── tag.ejs

錯誤

當 title 設為 archives 的時候，儘管 layout 設定為 archives，但總會連到 index.ejs 上面。應該是 /archives 路徑已經預設被指向 index.ejs 了。

所以歸檔的部分，我決定換名字，改為 archives_N。

正確

命名的時候輸入 archive.ejs 會自動導入 archive.ejs 裡面。如果 title 設為 archives.ejs 的時候，當然會沒有反應，導致變成連到 index.ejs 上面。

一篇文章只能夠有一個categories。

tag.ejs

tag.ejs 才抓得到。如果打 tags.ejs 會抓不到。

當本地 .css 看的到改變，上傳到 GitHub Pages 卻看不到改變？！

進去 /public 裡面的 .css 查看更改的語法是否還在。當執行 hugo g -d 後，有些 CSS 語法會自己消失 ><

總結

url_for 函數的用途：

• 用於生成靜態資源的 URL（如 CSS、JavaScript、圖片等）。
• 用於生成網站文章和頁面的 URL。
• url_for 會生成相對於網站根目錄的 URL。例如，url_for(‘css/style.css’) 會生成 /css/style.css。這樣的 URL 可以直接用於靜態資源，如 CSS、JavaScript 和圖片。

如何使用：

• 在模板中使用 <%- url_for('path') %> 來生成正確的 URL

    <link rel="stylesheet" href="<%- url_for('css/style.css') %>">
    <link rel="stylesheet" href="<%- url_for('css/style_post.css') %>">
    <link rel="stylesheet" href="<%- url_for('css/style_header.css') %>">
    <link rel="stylesheet" href="<%- url_for('css/style_sidebar.css') %>">
    <link rel="stylesheet" href="<%- url_for('css/style_archives.css') %>">
    <link rel="stylesheet" href="<%- url_for('css/style_index_post.css') %>">
  

參考

• layout檔案的命名參考下面這個repo基本不會錯
  https://github.com/henryhuang/hexo-theme-aloha/tree/master/layout