How do I best structure my Jekyll layouts for a blog?

0
votes

I have a very basic layout:

#_layouts/default.html

{% include header.html %}

  {{ content }}

{% include footer.html %}

A front page that shows all posts (without their comments):

#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>

And a simple article format:

#_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

The use of the comment to avoid jekyll displaying the article title twice seems very hacky.

I tried simply deleting the headline & body hack

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

<!-- body -->

which works great for the index.html but when I click on the heading link to take me to the article it is then displayed with no heading at all as Jekyll is outputting only the html conversion of the markup inside the default layout.

SO, I tried using a sub-template to display the single post, changing the front-matter in the article to use _layouts/post.html 

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

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

with the new layout much like the old layout (but with the potential to show comments)

#_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>
  -->

This sub-template needed the further hack of piping everything through markdownify before using the body hack to separate the header from the contents.

It all seems very... well, hacky. I must be doing something wrong

How do I best structure my layouts and posts for a blog? Why is markdown not used in the sub-template?

1
jekyll
I'm not sure if I understand what you're actually trying to do. Can you explain why you are doing the <!-- body --> stuff at all? – Christian Specht
thanks for the response christian. I am simply trying to list all posts on the front page (without comments) and click through to a single post (with comments). I'd like to write the posts is .md and have them marked up properly as per post.html. the <!-- body --> is a hack to stop the permalink heading to displaying twice. – Adam

1 Answers

0
votes

I have re-created your Jekyll site on my machine by copying the code from your question - except for the two include files which you didn't show in your question:

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

I used the following content for them in my project:

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

and 

</body>
</html>

...and I had no headline displayed twice.

Can you show me your header.html and footer.html?
(or better, is the whole project online somewhere, like on GitHub, where I can see the code?)

I'm suspecting that you have something in there that causes the headline to be displayed twice.

I have built multiple sites with Jekyll and it's definitely possible to do this without any hacks:

I am simply trying to list all posts on the front page (without comments) and click through to a single post (with comments). I'd like to write the posts is .md and have them marked up properly as per post.html.

I have simplified your example a bit - take a look at this:

The code

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

/_posts/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

The created 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>

There you are - one headline per page, and the headline is a permalink.

Is this what you wanted to achieve?

(I know I omitted the comments in this first step - we'll come to that later if you still need it)