如何将布局的路径正确发送到使用 HTML、EJS 和 Markdown 构建的 11ty(Eleveny)博客目录?



我试图解决我的路径到资产(css &Img)文件夹,但它错误或没有找到路径完全在我的markdown文件和基础。ejs文件…

请帮帮我,伙计们,我知道这是我的配置问题或我不太了解的东西…

Github repo: https://github.com/MikeTeddyOmondi/crypto-blogs

问题:

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

TL;博士

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

在博客/文件夹内的帖子使用的模板中。

这是你的项目的结构:

➜  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 -->

但是它不工作的博客/文件夹中的文章。

要解决这个问题,您需要更改资源

的路径。
# from
../asstes/
# to
../../asstes/

可以这样做:

  1. 在模板base.ejs的Front Matter中定义一个变量relative_path
---
relative_path: '..'
---
// base.ejs
  1. 替换所有出现的:../assets/

    with:<%= relative_path %>/assets/inbase.ejs

  2. 对于blog文件夹中的每个文件(post),您需要重新定义relative_path

:

3.1。在各自的主题上:

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

3.2。或者使用eleventyComputed,通过创建一个文件blogs.11tydata.js在blogs文件夹中,有这样的代码

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

注1在/blogs/blogs中定义relative_path。Json不能工作。由于级联数据在11ty中的合并顺序(截至当前版本)。

注2为index设置正确的relative_path。Md是";而不是"…",但由于它在输入目录中,所以可以。

注意3一个更快的解决方案是复制碱。Ejs,重新命名它(例如。post. js),编辑它,并从blog.json调用。

对于我来说,当事情不正常工作时,我总是查看输出目录。我下载了你的zip,运行eleventy输出构建,我看到你的资产正确复制。例如,在public中,我看到assets/css目录中有styles.css。在HTML中,您将链接到:/assets/css/styles.css。你试过吗?