8
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Pelicanにテーマを導入してみる

Last updated at Posted at 2014-04-08

Python製静的ブログ生成ツールの'Pelican'でテーマを導入する方法と, テーマの紹介です。

前記事はこちら.

Pelicanの導入が終わったら, やはり見た目に凝ってみたいんじゃないかと思います。Pelicanにはテーマ機能が付属していて, 自分の好きなテーマと入れ替え可能です。

設定方法


やり方はとても簡単で, 設定ファイル(pelicanconf.py)に

THEME = '(テーマ)'

みたいな感じで記述してやるだけです。
テーマについては有志の方が作成しているものがあって,

https://github.com/getpelican/pelican-themes

に全部置いてあります。
とりあえず上記のディレクトリをローカルにコピーしましょう。

git clone --recursive https://github.com/getpelican/pelican-themes ~/pelican-themes

最後の ~/pelican-themes の部分は, テーマを配置したいディレクトリを自分で指定してください。これで全テーマがダウンロードされるので(多い!)、あとは使いたいテーマのディレクトリのPATHを

THEME = "/home/user/pelican-themes/theme-name"

のように設定ファイルで指定してやるだけです。

http://pelican-themes-gallery.place.org/

でプレビューも確認できますので, よさ気なものを適用してみて,

make html → make serve

でローカルサーバで見た目を確認してみると良いでしょう。

このブログも(変わるかもしれませんが)svbhackというテーマをカスタマイズして使っています。落としたテーマも自分で編集できるので, 自由度は高いですね。
ごりごりカスタマイズしたり, テーマ自作してやるぜ!って場合は

  • Javascript
  • CSS
  • HTML + jinja2(Python謹製のテンプレートエンジン)

の知識が必須になってきます。

カスタマイズの一例 - DISQUSのコメント機能との連携


pelicanにはコメント機能が無いので, 付けたい場合はDISQUSなどの外部サービスを導入する必要があります。

テーマによってデフォルトで付いてたり付いてなかったりして, svbhackのテーマもコメント機能が付いてなかったので, 付けてみました。

(1) DISQUSで自分のサイトを登録

TOPから, イントロダクションにそえば簡単にできるはずです。できない場合はググる(・3・)

ここでshortnameというDISQUS側で自分のサイトを一意に特定する名前がもらえるはずなので, それをメモしておきます。

注)今のDISQUSの仕様だと使用言語「日本語」が選べなくなってます。
私も↓の記事を参考に直しました。

コメントプラグイン『DISQUS』で日本語が設定出来ない場合の対処

サーバ側に設定自体は存在するみたいなので, こんなトリッキーなことをせずともDISQUS側が早く対応してくれると嬉しいかな。

(2) pelicanでDISQUSの設定を反映

quickstartコマンドでpelicanのブログプロジェクトを作っていれば,

publishconf.py

に以下のような記述があるはず。

publishconf.py
# Following items are often useful when publishing

DISQUS_SITENAME = ""

ここに先ほどメモったshortnameを指定してやれば, とりあえずpelican側でDISQUSの設定反映は完了。

(3) htmlの編集

(2)までで良きにはからってくれるテーマもあるのですが, 対応してない場合は自力でDISQUSの呼び出しを記述する必要があります。

たとえばsvbhackのテーマの場合ですが,

/svbhack/templates

内に article.html というファイルがあって, こいつが記事を表示する際に使われているテンプレートになりますので, article閉じタグの直前に以下のように書けばOKです。

article.html
	:
	:
	{% if DISQUS_SITENAME %}
    <div class="comments">
      <div id="disqus_thread"></div>
          <script type="text/javascript">
              var disqus_identifier = "{{ article.url }}";
              (function() {
                  var dsq = document.createElement('script');
                  dsq.type = 'text/javascript';
                  dsq.async = true;
                  dsq.src = 'http://{{ DISQUS_SITENAME }}.disqus.com/embed.js';
                  (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
          })();
          </script>
      </div>
    {% endif %}

    </div>
    </article>

{% if DISQUS_SITENAME %} 〜 {% endif %} までが追記対象です。

DISQUS_SITENAMEが設定されていればコメントの埋め込みコードを埋め込みますということですね。

こうしてやれば本BlogのようにDISQUSのコメントが記事末尾に表示されるはずです!

Pelicanのテンプレートをいじるにはjinja2の知識が必須になってきますが, Pythonのテンプレートエンジンの中ではかなりメジャーですし, 抑えていて損は無いと思います。

追記

草稿機能について記載しました。

8
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?