jekyllでトップページにsite.postsの最新記事を表示する


jekyllを導入したは良いけど、、、

デザインをちゃんと内容に合わせて作り込んでからプッシュしたい！！って思うほど思い入れのあるコンテンツってのは今のところないので、とりあえずpaco.jpはべたなブログの体裁でスタートしよう！と考えたのですが、「トップページで最新記事を表示する」ってのがちとめんどくさかったので、とりあえず記事にしてみました。

トップページのコンテンツを最新コンテンツで表示する

ブログのコンテンツ表示部分をテンプレート化する

_includes/post.md

1
2
3
<div class="entry">
{{ "{{content"}}}}
</div>

index.md(ルートアクセス用)にて最新記事を変数に格納しつつテンプレートをincludeする

index.md

1
2
3
4
5
6
---
layout: layout
---
{{ "{% assign page = site.posts.first" }} %}
{{ "{% assign content = page.content" }} %}
{{ "{% include post.md" }} %}

canonical属性等指定をするためにlayoutを編集する

ルートアクセスの場合、layoutのpage変数は/index.htmlを指すようになっています。なので、そのままにしていると、canonical属性を"/index.html"で指定しちゃったりします。ですので、page変数が最新記事を指すように設定し、canonical属性が適切なものに設定されるよう修正します。

_layout/layout.html

1
2
3
4
5
6
7
8
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
{{ "{% if page.url == '/index.html'" }} %}
{{ "{% assign page = site.posts.first" }} %}
{{ "{% endif" }} %}
...
<link rel='canonical' href='{{"{{site.root_url"}}}}{{"{{page.url"}}}}' />
...