OctopressではデフォルトでRecent Posts の表示が出来る様になってますが、
これをちょっといじって画像付きにしました。
source/_includes/asides/recent_posts.html
サイドバーの表示用のパーツは
source/_includes/asides/recent_posts.html にあります。
これを_config.yml の中でdefault_asides等に加えると表示できます。
デフォルトだとrecent_posts指定された数だけタイトルがリンク付きでリストされます。
画像付きにしてみる
以前、
OctopressのIndexページの変更
の所でやったように、各ページにはogimageという値を付けてるので、
それを取ってきて付けるだけです。
Liquidで変数をTagに渡す方法
の所で変数をLiquidのimgタグにも渡せる様にしたのでそれを使います。
最初、これを直接使うように、recent_posts.html の中で、
recent_posts.html 1
2
3
4
5
6
7
8
9
10
< section >
< h1 > Recent Posts</ h1 >
< ul id = "recent_posts" >
{% for post in site.posts limit: site.recent_posts %}
< li class = "post" >
< a href = "{{ root_url }}{{ post.url }}" > {% img val:post.ogimage %}</ a >
</ li >
{% endfor %}
</ ul >
</ section >
みたいに(これは画像だけのリストになりますが)直接書いてみると、
何故か一番最近のポストの画像が全ての箇所で表示されてしまいます。
ここの所ちょっと理解してないのですが、これを
1
2
3
4
-<li class="post">
- <a href="{{ root_url }}{{ post.url }}">{% img val:post.ogimage %}</a>
+{% include asides/recent_post.html %}
-</li>
の様に更に他のファイルをインクルードするようにして、
source/_includes/asides/recent_post.html 1
2
3
< li class = "post" >
< a href = "{{ root_url }}{{ post.url }}" > {% img val:post.ogimage %}</ a >
</ li >
みたいな上の内容をコピーしたものを用意してあげると今度は上手く行きます。
Jykillとかで中の変数とかがどのタイミングでどうセットされるのかが
よく分かってないのですがどうも結構面倒な感じです。
最初の直接書く場合でもそこでHTMLを直接書いてしまえば上手く行くのですが、
なぜかimg_tagのプラグインの中では変数が暫く保存される様な現象が起こっています。
ともかく、1つファイルをインクルードすれば上手く行くので
上の様にsource/_includes/asides/recent_post.html に書くポストの内容を書きます。
最終的なのはこんな感じ:
source/_includes/asides/recent_posts.html 1
2
3
4
5
6
7
8
< section >
< h1 >< a href = "{{site.url}}/blog/archives/" > Recent Posts</ a ></ h1 >
< ul id = "recent_posts" >
{% for post in site.posts limit: site.recent_posts %}
{% include asides/recent_post.html %}
{% endfor %}
</ ul >
</ section >
source/_includes/asides/recent_post.html 1
2
3
4
5
6
7
8
9
< li class = "post index_click_box" >
< div class = "group" >
{% if post.ogimage and post.no_ogimage != true %}
< div class = "title-smallthumb" >
< a href = "{{ root_url }}{{ post.url }}" > {% img test val:post.ogimage %}</ a >
</ div >
< a class = "click_box_link" href = "{{ root_url }}{{ post.url }}" > {% if site.titlecase %}{{ post.title | titlecase }}{% else %}{{ post.title }}{% endif %}</ a >
</ div >
</ li >
ここでは
OctopressのIndexページの変更
で作ったindex_click_boxを作って画像とタイトル全体をリンクにしています。
さらに、画像のサイズをCSSを使って
sass/plugins/_plugins.scss 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.square-smallthumb {
width : 120px ;
height : 90px ;
}
.title-smallthumb {
@extend .square-smallthumb ;
margin : 0 1em 0 0 ;
@ include shadow-box ;
float : left ;
text-align : left ;
overflow : hidden ;
img {
min-width : 100 % ;
min-height : 100 % ;
}
}
こんな感じで設定しています。
(squareではないけれど元々square-thumbというのを使ってたのでその流れでそのままに)
ここの部分にも
NailThumb
を使おうかと思いましたが簡単に上の様にサイズ調整するだけで良いかな、と。
とこれのついでにIndexページの方も同じようにCSSだけで調整するようにして
NailThumbは外しました。
