1

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

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

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

4

2 回答 2

3

问题：

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

TL;博士

你需要../../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/

为此，您可以：

  1. 在模板 base.ejs 的 Front Matter 中定义一个变量relative_path。
---
relative_path: '..'
---
// base.ejs

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

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

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

任何一个：

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

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

3.2. 或通过在 blogs 文件夹中创建一个包含此代码的文件blogs.11tydata.js一次为所有这些使用11tyComputed

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

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

注意 2relative_path index.md正确的是“。” 而不是“..”，但由于它在输入目录中，所以没关系。

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

于 2021-10-24T02:52:01.743 回答
0

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

于 2021-07-26T16:04:28.983 回答