如何将HTML块插入高度模板中

发布于 2025-02-09 09:21:48 字数 1103 浏览 2 评论 0原文

我正在尝试将网站从Python转移到Elev。我的文件结构在上面的屏幕截图中。我一直在关注一些教程，例如 https：/ /dev.to/loige/getting-started-with-quenty-neventy-in-11-minutes-496j 以及高度文档（ https://www.11ty.dev/docs/layouts/ ）。

我尝试使用NumChucks Front Matter将HTML（insure3.njk）块插入一个名为test.njk的模板中：

---
title: hi
question: there
need3: need3.njk
---
<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

但这不会添加实际的HTML（仅是文件名）。请参阅下面，如何将HTML的块添加到模板中

原文

I'm trying to move a website from python to eleventy. My file structure is in the screenshot above. I've been following some tutorials such as https://dev.to/loige/getting-started-with-eleventy-in-11-minutes-496j, as well as the eleventy docs (https://www.11ty.dev/docs/layouts/).

I tried to insert a block of html (in need3.njk) into a template called test.njk using the numchucks front matter:

---
title: hi
question: there
need3: need3.njk
---
<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

But this does not add the actual html (only the filename). Please see below, How can I add the block of html into the template

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

寂寞清仓 2025-02-16 09:21:48

我认为您不能用领先地做到这一点。但是，您可以使用包括功能。

要查看此文件，将下面的文件与logo.png文件一起创建下面的文件。如果您在文件夹中运行npx @11ty/iver -serve，然后导航浏览器至localhost：8080/test，那么您将看到标题和图像。

需要3.njk

<img src="../logo.png">

test.njk

<h1>We can help:</h1>
{% include 'need3.njk' %}

.eleventy.js

module.exports = function(eleventyConfig) {
  eleventyConfig.addPassthroughCopy("*.png");
};

注意，我已经将图像文件复制到了站点的根部，然后通过相对路径上升到一个级别进行引用，您可能不想在代码中执行此操作。不仅仅是测试。

I don't think you can do this with front matter. However, you can do it using the includes feature.

To see this create the files below in a folder, along with a logo.png file. If you run npx @11ty/eleventy --serve in the folder, and then navigate a browser to localhost:8080/test, then you'll see the header and image.

need3.njk

<img src="../logo.png">

test.njk

<h1>We can help:</h1>
{% include 'need3.njk' %}

.eleventy.js

module.exports = function(eleventyConfig) {
  eleventyConfig.addPassthroughCopy("*.png");
};

Note that I've copied the image file into the root of the site and then referenced it through a relative path going up a level, which you probably wouldn't want to do in code that isn't just a test.

回复收藏 0 原文

~没有更多了~