たまにはブログのカスタマイズをしてみる。
今回は読書メーターのブログパーツを追加してみた。
サイドバーに「最近読んだ本」なんてのが現れるようにしてみた。
文字ばっかだったブログにちょっと賑やかし感があって良い。
例によって備忘録的にやり方を残しておく。
Octopressに読書メーターのブログパーツを追加する方法。
読書メーターのアカウントを取得する
読書メーターのウェブページからどうぞ。
ブログパーツを選ぶ
読書メーターにログイン後、マイページに行ってみると、
**「ブログパーツ」**と書いてあるところがある。
そこを見ると各種ブログパーツを見つけることが出来る。
Octopressをカスタマイズして、サイドバーに出るように
ここからはOctopress側の編集。
読書メーター用のHTMLを書く。
中身は上記ブログパーツの内容をコピペしたものだが。
ブログパーツとして「最近読んだ本」をチョイス。
<section>
<a href="http://book.akahoshitakuya.com/u/{人によって違うID}" title="{人の名前}の最近読んだ本"><img src="http://img.bookmeter.com/bp_image/640/509/{人によって違うID}.jpg" border="0" alt="{人の名前}の最近読んだ本"></a>
</section>
_config.ymlを編集して、サイドバーにパーツを追加
_config.ymlのdefault_asidesを変更。読書メーター用HTMLファイルを指定。
default_asides: [custom/asides/about.html, asides/recent_posts.html, asides/github.html, asides/delicious.html,
asides/pinboard.html, asides/googleplus.html, custom/asides/tag_cloud.html, custom/asides/category_list.html,
custom/asides/dokusho_meter.html]
deployしたら完了
bundle exec rake gen_deploy 的なことをやってデプロイする。
ここまでで
最近読んだ本がサイドバーに表示されるように。
ITっぽい本を並べたりすると、なんとなく技術的なブログな雰囲気が出て、
とてもいいんではないでしょうか。
Octopressのカスタマイズを続けていく。
Fenced Code Block がうまく表示されない
具体的にどのようにうまく表示されないかというと、
{% codeblock %}
{% raw %}
{% hogehoge %}
{% endraw %}
{% endcodeblock %}
といった表記。％で囲まれてる部分も Fenced Code Block を使って表示してもらいたいところであったが、
コメントとしてみなされてしまっているようで、表示してもらえないという感じに。
結果として、
{% codeblock %}
{% raw %}
{% codeblock %}
{% raw %}
{% hogehoge %}
{% endraw %}
{% endcodeblock %}
{% endraw %}
{% endcodeblock %}
というので書くことができた。raw ~ endraw というのを使う。
ただ、↑に書いている通り、ネストさせることができなかったのでバックスラッシュ突っ込んでお茶を濁した。。
ネストさせるのはどうやればいいのかな？
Fenced Code Block にファイル名が表示できない
Fenced Code Block を書くときに、↓のような書き方をするとコードブロックにちょっとした注釈が出る。
{% raw %}{% codeblock %}{% endraw %}
出るという触れ込みだったのだが、なかなかどうして出なかった。
結論からすると、これはうちのArchlinuxがpython3を使おうとしているためだった。
PygmentsというやつがPython2.7を求めているところを、違うバージョンのPythonが使われちゃって失敗してた感じ。
修正方法は以下のページを参考にしました。というかそのまま使わせていただきました。多謝。
Arch Linux, Octopress, and misbehaving Pygments - Nonsense By Me
引き続きOctopressをカスタマイズしていく。
サイドバーにGravatarの画像を出すように
京都で食べた抹茶パンケーキ（←旨い）の画像を載せるように。
自分のブログ感が出て良い。
以下のGravatarプラグインを使わせてもらいました。多謝。
↑を導入すると、Gravatarの画像をimgタグ的にひっぱってこれるようになるので、
それを参考にしつつ、souce/_include/custom/asides/about.html を編集してった感じ。
about.html はこんな感じに。
{% codeblock %}
{% raw %}
About Me
{% if site.gravatar_email %}
{% endif %}
Arch Linux on Vaio Pro 13で日々遊んでます。Octopressはvimで編集。武蔵野線ユーザ。一応、ソフトウェアエンジニア。CommentをかけるようにDisqusを設定
各ポストにコメントがかけるような感じにしてみた。いかにもブラグらしい。
設定方法をざっくり書いておくと、
次はテーマを変更してみようかな。デフォルトでもそこそこかっこいいが。
Octopressにプラグインを追加して、tag_cloudとcategory_listを表示できるようにしてみた。
見た目デフォルトのままというのも微妙なので、徐々にカスタマイズしていこう。
tag_cloud、category_listの追加については以下のページを参考にさせていただきました。多謝。
http://rcmdnk.github.io/blog/2013/03/23/octopress/
次はサイドバーに筆者プロフィールをGravatarと共に載せる、みたいな感じにしてみようかな。