Jekyll 是如何使用 post.html 来生成页面的?
How does Jekyll use post.html to generate pages?
我在让 Jekyll 使用特定主题时遇到了一些困难,我认为我缺少关于 {{ content }}
如何与 posts 一起工作的一些基本知识。
因此,在一个通用的 Jekyll 站点中,index.html
在其前端指定了布局。生成站点时,布局包括 index.html
作为 {{ content }}
。有点颠倒,页面指定布局,然后布局调用页面,但足够简单。
另一方面,帖子都是通过文件 post.html
生成的,该文件位于 _layouts
文件夹中,尽管它并不是真正的布局。就像 index.html
它本质上只是一个 for 循环。这就是我 运行 遇到麻烦的地方。
post.html
是必需的文件吗?我可以重命名它吗 story.html
?
为什么post.html
需要在前面做布局?实际的 post,即包含所述 post 文本的降价,也需要在其前端进行布局。是否存在 post.html
的布局与降价文件中指定的布局不同的情况?
编辑:另一个问题。为什么 {{ content }}
在多个地方被调用? index.html
和布局文件都有 {{ content }}。为什么布局不简单地 {% include %} index.html
并让 index.html
调用 {{ content }}
我自己有一个答案。每个 markdown 文件都在 front matter 中分配了一个布局。但是这个 "layout" 根本不是真正的布局还是部分布局?
我忘记了术语,所以我只列出步骤。
1) markdown文件有layout: post
2) markdown 文件中的任何内容都会得到处理,然后发送到驻留在 post.html
中的逻辑。这是我没有马上说完的部分:post.html
有自己的布局。这就是前面的事情。本质上我们有布局的布局。
3) 外部 "layout"(default.html
在 vanilla jekyll 安装中),将自身包裹在内部 "layout" (post.html
) 周围,内部 "layout" (post.html
) 将自身包裹在实际{{内容}}。
post.html
可以任意命名,只要正确设置各种 layout
行即可。
我仍然不知道为什么 {{ content }} 最终到达布局堆栈的顶部,然后一直向下传递。我什至不确定 "passed" 在处理液体时是否正确。我喜欢 Jekyll,但它有点像蛇窝
我想你基本上是自己想出来的,但我还是会用我自己的话来解释。
你说得对,{{ content }}
是布局文件中实际页面内容所在的占位符。
可能让您感到困惑的是,您可以构建一组嵌套布局文件,其中一个 "inherits" 彼此相隔,每个布局都有自己的 {{ content }}
.
是的,我没有在文档中找到任何关于此的信息,我自己弄清楚了,或者更好,通过查看示例。
下面是一个例子。
首先,默认布局和页面:
/_layouts/default.html
:
<!DOCTYPE html>
<html>
<head>
<title>{{ page.title }}</title>
</head>
<body>
<h1>{{ page.title }}</h1>
{{ content }}
</body>
</html>
/index.md
:
---
title: example page
layout: default
---
This is the page content.
生成的 HTML 将如下所示:
<!DOCTYPE html>
<html>
<head>
<title>example page</title>
</head>
<body>
<h1>example page</h1>
<p>This is the page content.</p>
</body>
</html>
现在让我们从第一个 "inherits" 创建另一个布局文件。
如果您正在使用 Jekyll 构建博客,您可能希望使用类似这样的东西。
上面显示的布局文件是 所有 页面、博客 post 和常规页面的默认布局文件。
当您希望所有博客 post 包含其他信息时,例如 post 日期和用户、标签等。
为此,您可以使用第一个布局文件创建第二个布局文件:
/_layouts/post.html
:
---
layout: default
---
<div class="blogpost">
<i>post date: {{ page.date }}</i>
{{ content }}
</div>
还有一个使用此布局的博客 post:
/_posts15-04-08-example-post.md
:
---
title: example post
layout: post
---
This is the post content.
和生成的HTML:
<!DOCTYPE html>
<html>
<head>
<title>example post</title>
</head>
<body>
<h1>example post</h1>
<div class="blogpost">
<i>post date: 2015-04-08 00:00:00 +0200</i>
<p>This is the post content.</p>
</div>
</body>
</html>
也就是说,发生了这样的事情:
- Jekyll 使用
post
布局并将 post 的内容放入 {{ content }}
- Jekyll 使用
default
布局并将步骤 1 中生成的完整 HTML 放入 {{ content }}
(不知道 Jekyll 是否真的在幕后按照这个顺序做事,但你明白了)
如Jekyll site.
首页"Quick-start Instructions"所示新建一个Jekyll项目可以看到另一个例子
Jekyll (我机器上的版本 2.1.1) 创建的示例站点有 三个 布局文件,其中两个(page
和post
) 从默认的继承。
我在让 Jekyll 使用特定主题时遇到了一些困难,我认为我缺少关于 {{ content }}
如何与 posts 一起工作的一些基本知识。
因此,在一个通用的 Jekyll 站点中,index.html
在其前端指定了布局。生成站点时,布局包括 index.html
作为 {{ content }}
。有点颠倒,页面指定布局,然后布局调用页面,但足够简单。
另一方面,帖子都是通过文件 post.html
生成的,该文件位于 _layouts
文件夹中,尽管它并不是真正的布局。就像 index.html
它本质上只是一个 for 循环。这就是我 运行 遇到麻烦的地方。
post.html
是必需的文件吗?我可以重命名它吗 story.html
?
为什么post.html
需要在前面做布局?实际的 post,即包含所述 post 文本的降价,也需要在其前端进行布局。是否存在 post.html
的布局与降价文件中指定的布局不同的情况?
编辑:另一个问题。为什么 {{ content }}
在多个地方被调用? index.html
和布局文件都有 {{ content }}。为什么布局不简单地 {% include %} index.html
并让 index.html
调用 {{ content }}
我自己有一个答案。每个 markdown 文件都在 front matter 中分配了一个布局。但是这个 "layout" 根本不是真正的布局还是部分布局?
我忘记了术语,所以我只列出步骤。
1) markdown文件有layout: post
2) markdown 文件中的任何内容都会得到处理,然后发送到驻留在 post.html
中的逻辑。这是我没有马上说完的部分:post.html
有自己的布局。这就是前面的事情。本质上我们有布局的布局。
3) 外部 "layout"(default.html
在 vanilla jekyll 安装中),将自身包裹在内部 "layout" (post.html
) 周围,内部 "layout" (post.html
) 将自身包裹在实际{{内容}}。
post.html
可以任意命名,只要正确设置各种 layout
行即可。
我仍然不知道为什么 {{ content }} 最终到达布局堆栈的顶部,然后一直向下传递。我什至不确定 "passed" 在处理液体时是否正确。我喜欢 Jekyll,但它有点像蛇窝
我想你基本上是自己想出来的,但我还是会用我自己的话来解释。
你说得对,{{ content }}
是布局文件中实际页面内容所在的占位符。
可能让您感到困惑的是,您可以构建一组嵌套布局文件,其中一个 "inherits" 彼此相隔,每个布局都有自己的 {{ content }}
.
是的,我没有在文档中找到任何关于此的信息,我自己弄清楚了,或者更好,通过查看示例。
下面是一个例子。
首先,默认布局和页面:
/_layouts/default.html
:
<!DOCTYPE html>
<html>
<head>
<title>{{ page.title }}</title>
</head>
<body>
<h1>{{ page.title }}</h1>
{{ content }}
</body>
</html>
/index.md
:
---
title: example page
layout: default
---
This is the page content.
生成的 HTML 将如下所示:
<!DOCTYPE html>
<html>
<head>
<title>example page</title>
</head>
<body>
<h1>example page</h1>
<p>This is the page content.</p>
</body>
</html>
现在让我们从第一个 "inherits" 创建另一个布局文件。
如果您正在使用 Jekyll 构建博客,您可能希望使用类似这样的东西。
上面显示的布局文件是 所有 页面、博客 post 和常规页面的默认布局文件。
当您希望所有博客 post 包含其他信息时,例如 post 日期和用户、标签等。
为此,您可以使用第一个布局文件创建第二个布局文件:
/_layouts/post.html
:
---
layout: default
---
<div class="blogpost">
<i>post date: {{ page.date }}</i>
{{ content }}
</div>
还有一个使用此布局的博客 post:
/_posts15-04-08-example-post.md
:
---
title: example post
layout: post
---
This is the post content.
和生成的HTML:
<!DOCTYPE html>
<html>
<head>
<title>example post</title>
</head>
<body>
<h1>example post</h1>
<div class="blogpost">
<i>post date: 2015-04-08 00:00:00 +0200</i>
<p>This is the post content.</p>
</div>
</body>
</html>
也就是说,发生了这样的事情:
- Jekyll 使用
post
布局并将 post 的内容放入{{ content }}
- Jekyll 使用
default
布局并将步骤 1 中生成的完整 HTML 放入{{ content }}
(不知道 Jekyll 是否真的在幕后按照这个顺序做事,但你明白了)
如Jekyll site.
首页"Quick-start Instructions"所示新建一个Jekyll项目可以看到另一个例子
Jekyll (我机器上的版本 2.1.1) 创建的示例站点有 三个 布局文件,其中两个(page
和post
) 从默认的继承。