如何最好地构建博客的Jekyll布局?

时间:2015-02-25 15:59:00

标签: jekyll

我有一个非常基本的布局:

#_layouts/default.html

{% include header.html %}

  {{ content }}

{% include footer.html %}

首页显示所有帖子(没有他们的评论):

#index.html

---
title: Schmexy Title
---

<section id="fresh-off-the-press">

{% for post in site.posts %}
  <article class="post">
    <header>
      <p class="post-date">{{ post.date | date: '%b %d, %Y' }}</p>
      <h1 class="post-heading"><a href="{{ post.url }}" class="post-permalink">{{ post.title }}</a></h1>
    </header>

       {{ post.content | split:'<!-- body -->' | last }}

  </article>
{% endfor %}

</section>

一个简单的文章格式:

#_posts/2015-02-25.superduper.md

---
title: SuperDuperHeadline
category: newsflash
---

[SuperDuperHeadline][1]
===================

<!-- body -->

After a hassle-free launch, [Jekyll] has kept me up all night.

[1]: {{ page.url }}
[Jekyll]: http://jekyllrb.com

使用评论来避免jekyll两次显示文章标题似乎非常hacky。

我尝试删除标题&amp;身体黑客

[SuperDuperHeadline][1]
===================

<!-- body -->

对index.html很有用,但是当我点击标题链接带我到文章时,它显示时根本没有标题,因为Jekyll只输出默认布局中标记的html转换。

所以,我尝试使用子模板显示单个帖子,更改文章中的前端内容以使用_layouts / post.html

#_posts/2015-02-25.superduper.md

---
title: SuperDuperHeadline
category: newsflash
layout: post
---

新布局很像旧布局(但有可能显示评论)

#_layouts/post.html

---
layout: default
---


<article class="post">
  <header>
    <p class="post-date">{{ page.date | date: '%b %d, %Y' }}</p>
    <h1 class="post-heading"><a href="{{ page.url }}" class="post-permalink">{{ page.title }}</a></h1>
  </header>

{{ page.content | markdownify | split:'<!-- body -->' | last }}

  <!--
  <section class="comments">
    <header><h1 class="comments-heading">Comments</h1></header>    
    <article class="comment">
        <footer><p>Posted by: Commenter 1</p></footer>
        <p>Comment 1</p>
    </article>
    <article class="comment">
        <footer><p>Posted by: Commenter 2</p></footer>
        <p>Comment 2</p>
    </article>
  </section>
  -->

这个子模板需要进一步破解通过markdownify管道所有内容,然后再使用正文hack将标题与内容分开。

这一切看起来都非常......好吧,hacky。我一定是做错了什么

如何最好地构建博客的布局和帖子? 为什么在子模板中没有使用降价?

1 个答案:

答案 0 :(得分:0)

我通过复制您问题中的代码在我的机器上重新创建了您的Jekyll网站 - 除了您在问题中没有显示的两个包含文件:

{% include header.html %}
{% include footer.html %}

我在项目中使用了以下内容:

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

</body>
</html>

...我没有两次显示标题。

你能告诉我你的header.htmlfooter.html吗? (或者更好,整个项目是否在某个地方上线,就像在GitHub上,在那里我可以看到代码?)

我怀疑你有什么东西导致标题显示两次。


我已经使用Jekyll构建了多个网站,并且绝对可以在没有任何黑客的情况下完成此操作:

  

我只是想在首页上列出所有帖子(没有评论)并点击一个帖子(带评论)。我想写帖子是.md,并根据post.html正确标记。

我稍微简化了你的例子 - 看看这个:

代码

/index.html:

---
title: Schmexy Title
layout: default
---

<section id="fresh-off-the-press">

{% for post in site.posts %}
  <article class="post">
    <header>
      <p class="post-date">{{ post.date | date: '%b %d, %Y' }}</p>
      <h1 class="post-heading"><a href="{{ post.url }}" class="post-permalink">{{ post.title }}</a></h1>
    </header>

       {{ post.content }}

  </article>
{% endfor %}

</section>

/layouts/default.html:

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

<h1><a href="{{ page.url }}">{{ page.title }}</a></h1>

{{ content }}

</body>
</html>

/ _帖/ 2015-02-25-superduper.md:

---
title: SuperDuperHeadline
category: newsflash
layout: default
---

After a hassle-free launch, [Jekyll] has kept me up all night.

[Jekyll]: http://jekyllrb.com

创建的HTML:

/index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Schmexy Title</title>
</head>
<body>

<h1><a href="/index.html">Schmexy Title</a></h1>

<section id="fresh-off-the-press">


  <article class="post">
    <header>
      <p class="post-date">Feb 25, 2015</p>
      <h1 class="post-heading"><a href="/newsflash/2015/02/25/superduper.html" class="post-permalink">SuperDuperHeadline</a></h1>
    </header>

       <p>After a hassle-free launch, <a href="http://jekyllrb.com">Jekyll</a> has kept me up all night.</p>

  </article>

</section>

</body>
</html>

/newsflash/2015/02/25/superduper.html:

<!DOCTYPE html>
<html>
<head>
    <title>SuperDuperHeadline</title>
</head>
<body>

<h1><a href="/newsflash/2015/02/25/superduper.html">SuperDuperHeadline</a></h1>

<p>After a hassle-free launch, <a href="http://jekyllrb.com">Jekyll</a> has kept me up all night.</p>

</body>
</html>

你有 - 每页一个标题,标题是永久链接。

这是你想要达到的目标吗?

(我知道我在第一步中省略了这些评论 - 如果您仍然需要,我们将在稍后讨论)