如何将我的布局路径正确定位到使用 HTML、EJS 和 Markdown 构建的 11ty (Eleventy) 博客目录？

Posted 2023-03-06

【中文标题】如何将我的布局路径正确定位到使用 HTML、EJS 和 Markdown 构建的 11ty (Eleventy) 博客目录？

【英文标题】：How do I address path to my layouts correctly to my 11ty (Eleventy) blogs directory built with HTML, EJS & Markdown?

【发布时间】：2021-10-02 10:43:01

【问题描述】：

我正在尝试解决资产（css 和 img）文件夹的路径，但它出错或在我的 markdown 文件和 base.ejs 文件中完全找不到路径...

请帮帮我，我知道这是我的配置问题或我不太了解的问题...

Github 仓库：https://github.com/MikeTeddyOmondi/crypto-blogs

【参考方案1】：

问题：

assets/ 无法访问 .src/blogs/ 中的表单帖子（例如 .src/blogs/blockchain-technology.md）

TL;DR

你需要../../assets/ 而不是../assets/

在 blogs/ 文件夹中的帖子使用的模板中。

说明

这是您项目的结构：

➜  crypto-blogs-master tree -aI 'node_*' -L 3
.
├── .eleventy.js
├── ...
└── src
    ├── assets
    │   ├── css
    │   └── img
    ├── blogs
    │   ├── blockchain-technology.md
    │   ├── blogs.json
    │   └── ...
    ├── _includes
    │   └── base.ejs
    ├── blogs.md
    ├── index.md
    ├── projects.md
    ├── ...

当尝试从 blogs/index.html 或 projects/index.html 访问资产资源时，它会按预期工作。因为，在 base.ejs 中，您有：

    <link href="../assets/css/..." /> <!-- line 16 -->
    <img src="../assets/img/... " /> <!-- line 24 -->

但它不适用于 blogs/ 文件夹中的帖子。

要解决此问题，您需要更改资产的路径

  # from
  ../asstes/
  # to
  ../../asstes/

为此，您可以：

在模板 base.ejs 的 Front Matter 中定义一个变量 relative_path。

---
relative_path: '..'
---
// base.ejs

替换所有出现的：../assets/

与：<%= relative_path %>/assets/ in base.ejs

对于博客文件夹中的每个文件（帖子），您需要重新定义relative_path，

要么：

3.1。在他们各自的 Front Matter 上：

---
  relative_path: '../..'
---
// blockchain-technology.md + ... post-n.md

3.2。或使用eleventyComputed，通过在 blogs 文件夹中创建一个文件 blogs.11tydata.js 来同时为所有这些文件创建一个包含此代码的文件

  module.exports = function () 
    return 
      eleventyComputed: 
        relative_path: "../.."
      
    
  

注意 1 在 /blogs/blogs.json 中定义 relative_path 将不起作用。因为11ty中级联数据的merging order（截至当前版本）。

注意 2 index.md 的正确 relative_path 是“。”而不是“..”，不过既然是在输入目录下就好了。

注意 3 一个更快的解决方案是复制 base.ejs，重命名它（例如 post.ejs），编辑它，然后从 blog.json 调用。

【参考方案2】：

对我来说，当事情不正常时，我总是查看输出目录。我下载了你的 zip，运行 eleventy 来输出构建，我看到你的资产被正确复制了。例如，在public 中，我看到一个assets/css 目录，其中包含styles.css。在您的 HTML 中，您将链接到：/assets/css/styles.css。你试过吗？