reST で画像にキャプションを入れるには

reST で画像を表示するために image ディレクティブを使用する方法を覚えましたが、figure ディレクティブを使ってもできるようです。

image ディレクティブの場合

東京国立博物館 by image directive
.. image:: /images/70_1.jpg
   :alt: 東京国立博物館 by image directive
   :width: 50%

figure ディレクティブの場合

東京国立博物館 by figure directive

this is キャプション

.. figure:: /images/70_1.jpg
   :alt: 東京国立博物館 by figure directive
   :width: 50%

   this is キャプション

キャプションが使える分、figure ディレクティブを使ったほうがよさそうですね。

Pelican のデフォルトテーマではキャプション部分にはスタイルがあたっていないので css を書き加えます。

.caption {
    font-weight: lighter;
    font-style: italic ...
more ...

Pelican エントリに画像を入れる方法

Pelican で画像を入れる方法を調べました。公式ドキュメントに載っていたやり方ではうまく表示できなかったのでいろいろ試してみました。(ただ、私のやり方がまずかっただけかもしれません)

公式ドキュメントでは content の中に images というディレクトリがあり、そこに画像が置いてあるという前提で、下記のように記述すると書かれていました。

![Alt Text]({filename}/images/han.jpg)

私の環境では content の中ではなく blog ごとのディレクトリのルートというか、 content と同じ階層に images がありました。また、上記の書式で記述しても画像が表示されなかったため、一般的な reST の記法を調べてみます。

image というディレクティブで指定すればよいようです。Pelican でビルドする際に alt 属性がないという Warning が出たので alt テキストを適当に指定しておきます。

.. image:: /images/68_1.png
           :alt: Quicksilver

結局 content ...

more ...

reStructured Text で HTML を直接書く

reST や Markdown といった軽量マークアップ言語は HTML を手書きしなくてもよい(= シンプルなマークアップで HTML に変換してくれる)ところが利点ですが、それでも文書を書いているときに HTML をそのまま書きたいこともあります。

例えば、Amazon などの商品リンクを載せようと思ったら amazlet などを利用して(Amazon 純正でもいいですけれど)紹介用の HTML タグを取得することが多いと思います。それを reST ファイルの中で利用するにはどうしたらよいのでしょうか。

調べたところ、raw ディレクティブ(.. のあとに続けて書くアレ)を使えばいいそうです。

.. raw:: html

   <iframe width="560" height="315" src="//www.youtube.com/embed/-x640lbMucc" frameborder="0" allowfullscreen></iframe>

これで OK ...

more ...

reST で blog を書く理由

今回、このドメインで blog を再開することを決めた際に考えていたこと(今も考えていること)を書いてみます。

動的生成と静的生成

まず、個人で書く blog のような一度書いたエントリはその後変更されることがあまりないようなタイプのサイトで、(キャッシュの仕組みはあるのでしょうが)アクセスがあるたびに毎回動的に HTML を生成するのはナンセンスというか、コンピューター資源の無駄遣いというか、個人的にはあまりしっくりこないなぁと感じていて、やるなら静的生成がいいと考えていました。

最近のトレンドというか傾向を参考にしたならば、独自ドメインで blog をやるなら WordPress が順当な選択肢となっているという認識を持っていますが、WordPress は動的生成だし、以前に使用していたときに本体やプラグインのアップデートがけっこう頻繁にあって煩わしかった記憶もあるし、"WordPress" のスペルを強制する関数が本体に含まれていること を知って以来、[1] あまり好ましい印象を持っておらず、積極的に避けたいと思っていました。 (まぁ猫も杓子も WordPress という流れに逆らいたい、というマイナー志向の顕れという側面も否定できません 笑)

blog の前に Sphinx

blog エンジンとして Pelican の前には Nikola を検討していました。どちらも Python で書かれているので何かいじる際に都合がいいというのが主な理由です ...

more ...

Pelican で syntax highlight を使用する

Pelican でコードを色分け表示(syntax highlight)をするのはどうしたらよいのかを調べました。Pelican では Pygments という Python のモジュールを使っているようなので Pygments のサイトを確認します。

書き方は .. sourcecode:: language-name というタグ(ディレクティブというのでしたっけ?)を書いて続くコードをインデントすればよいようです。

.. sourcecode:: python

   import os

   for i in range(10):
       print i

ちなみに Emacs lisp の場合は scheme と指定すれば OK でした。

あ、こちらにも解説が書かれていますね。 sourcecode ではなく ...

more ...

Emacs autoinsert でテンプレートを使う

Pelican ではエントリを reST で書いています。ファイルの冒頭部分に投稿日時やカテゴリ、タグなどのメタデータを記載するフォーマットがあって以下のように書いています。

:date: 2014-03-08 17:00:25
:category: misc
:tags: Emacs, reST, Pelican
:slug: emacs-autoinsert

毎回これを手で入力するのは手間なので過去のファイルからコピペしていたのですが、それもどうかと思い、yasnippet を導入してみようと考えたのでした。

今のところは yasnippet も導入できていないので別のアプローチということでファイル作成時に自動であらかじめ用意したテンプレートを読み込んで記述してくれる autoinsert を使ってみることにしました。

まずは ymotongpoo さんのエントリを見てそのまま真似してみました。そのあとでファイル作成時の日時を Pelican で使用しているフォーマットで挿入したかったのでその部分を書き換えています。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16 ...
more ...