How does Jekyll use post.html to generate pages?

非 Y 不嫁゛ 提交于 2019-12-06 00:24:47

I think you largely figured it out by yourself, but I'll still explain it in my own words.

You're right that {{ content }} is the placeholder in the layout file where the content of the actual page will go.

What probably confused you is the fact that you can build a set of nested layout files where one "inherits" from the other, and each layout has its own {{ content }}.
And yes, I didn't find anything about this in the docs, I figured it out by myself or better, by looking at examples.

So here's an example for you.
First, a default layout and a page:

/_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.

The generated HTML will look like this:

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

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

</body>
</html>

Now let's create another layout file that "inherits" from the first one.
You'll probably want to use something like this if you're building a blog with Jekyll.
The layout file shown above is the default for all pages, blog posts and regular ones.
When you want all blog posts to contain additional information like post date and user, tags and so on.

For this, you can create a second layout file which uses the first one:

/_layouts/post.html:

---
layout: default
---

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

    {{ content }}
</div>

And a blog post which uses this layout:

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

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

This is the post content.

And the generated 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>

In other words, something like this happened:

  1. Jekyll used the post layout and put the content of the post into {{ content }}
  2. Jekyll used the default layout and put the complete generated HTML from step 1 into {{ content }}

(no idea if Jekyll really does things in this order under the hood, but you get the idea)

You can see another example if you create a new Jekyll project as shown in the "Quick-start Instructions" on the home page of the Jekyll site.
The example site that Jekyll (version 2.1.1 on my machine) creates has three layout files, two of which (page and post) inherit from the default one.

I have an answer for myself, sort of. Each markdown file is assigned a layout in the front matter. But this "layout" isn't really a layout at all or it's a partial layout?

The terminology escapes me, so I'll just list the steps.

1) The markdown file has layout: post

2) Whatever is in the markdown file gets processed and then sent over to the logic residing in post.html. Here's the part that I wasn't getting right off: post.html has it's own layout. That's what's up in the front matter. Essentially we have the layout's layout.

3) The outer "layout" (default.html in a vanilla jekyll install), wraps itself around the inner "layout" (post.html), which wraps itself around the actual {{ content }}.

post.html could be named whatever, so long as the various layout lines are properly set.

I still don't know why {{ content }} winds up at the top of the layout stack only to be passed all the way back down. I'm not even sure "passed" is the right word when dealing with liquid. I like Jekyll, but it's kind of a nest of snakes.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!