Jekyll 如何使用 post.html 生成页面?

cro*_*ill 4 ruby markdown liquid jekyll

我在让 Jekyll 使用特定主题时遇到了一些困难,而且我认为我缺少关于如何{{ content }}处理帖子的一些基本知识。

因此,在一个通用的 Jekyll 站点中,index.html在其前端指定了一个布局。生成站点时,布局将包含index.html{{ content }}. 它有点颠倒,页面指定布局,然后布局调用页面,但足够简单。

另一方面,帖子都是通过一个文件生成的,post.html,该文件驻留在_layouts文件夹中,即使它不是一个真正的布局。就像index.html它本质上只是一个 for 循环。这是我遇到麻烦的地方。

post.html必填文件吗?我可以重命名story.html吗?

为什么post.html需要在前面进行布局?实际的帖子,即包含所述帖子文本的降价,也需要在其前端布局。是否存在post.html与 markdown 文件中指定的布局不同的布局?

编辑:另一个问题。为什么{{ content }}在多个地方调用?index.html和布局文件都有{{ content }}。为什么布局不简单地 {% include %}index.html并让我们index.html调用 {{ content }}

Chr*_*cht 5

我想你基本上是自己想出来的,但我仍然会用我自己的话来解释。

您说得对,这{{ content }}是布局文件中实际页面内容所在的占位符。

可能让您感到困惑的是,您可以构建一组嵌套布局文件,其中一个“继承”另一个,并且每个布局都有自己的{{ content }}.
是的,我在文档中没有找到任何关于此的内容,我通过查看示例自己或更好地解决了这个问题。

所以这里有一个例子给你。
首先,一个默认布局和一个页面:

/_layouts/default.html

<!DOCTYPE html>
<html>
<head>
    <title>{{ page.title }}</title>
</head>
<body>
<h1>{{ page.title }}</h1>

{{ content }}

</body>
</html>
Run Code Online (Sandbox Code Playgroud)

/index.md

---
title: example page
layout: default
---

This is the page content.
Run Code Online (Sandbox Code Playgroud)

生成的 HTML 将如下所示:

<!DOCTYPE html>
<html>
<head>
    <title>example page</title>
</head>
<body>
<h1>example page</h1>

<p>This is the page content.</p>

</body>
</html>
Run Code Online (Sandbox Code Playgroud)

现在让我们创建另一个“继承”第一个布局文件。
如果您正在使用 Jekyll 构建博客,您可能想要使用类似的东西。
上面显示的布局文件是所有页面、博客文章和常规页面的默认设置。
当您希望所有博客文章都包含附加信息时,例如发布日期和用户、标签等。

为此,您可以创建使用第一个布局文件的第二个布局文件:

/_layouts/post.html

---
layout: default
---

<div class="blogpost">
    <i>post date: {{ page.date }}</i>

    {{ content }}
</div>
Run Code Online (Sandbox Code Playgroud)

以及使用此布局的博客文章:

/_posts\2015-04-08-example-post.md

---
title: example post
layout: post
---

This is the post content.
Run Code Online (Sandbox Code Playgroud)

以及生成的 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>
Run Code Online (Sandbox Code Playgroud)

换句话说,发生了这样的事情:

  1. Jekyll 使用了post布局并将帖子的内容放入{{ content }}
  2. Jekyll 使用了default布局并将步骤 1 中生成的完整 HTML 放入{{ content }}

(不知道 Jekyll 是否真的按照这个顺序在幕后做事,但你明白了)

如果您创建了一个新的 Jekyll 项目,您可以看到另一个示例,如Jekyll 站点主页上的“快速入门说明”所示。
Jekyll (我的机器上是 2.1.1 版)创建的示例站点有三个布局文件,其中两个 (pagepost) 继承自默认的布局文件。