前回は人の作ったThemeを使う話でしたが、今回は作る話です。
目次
Themeを作成する
Pelicanのドキュメントはとても親切でThemeを作る場合のことも書いてあります。
Creating themes — Pelican 3.6.3 documentation
構成は以下のようにします。
├── static
│ ├── css
│ └── images
└── templates
├── archives.html // to display archives
├── period_archives.html // to display time-period archives
├── article.html // processed for each article
├── author.html // processed for each author
├── authors.html // must list all the authors
├── categories.html // must list all the categories
├── category.html // processed for each category
├── index.html // the index (list all the articles)
├── page.html // processed for each page
├── tag.html // processed for each tag
└── tags.html // must list all the tags. Can be a tag cloud.
staticとtemplatesというディレクトリに分かれていて、staticにはcssや画像、jsなどを配置、templatesにはhtmlを配置します。
上記のtemplates内にあるファイルは必要なファイルです、jinja2を使っているのでオリジナルのhtmlを追加して他のhtmlからincludeすることもできます。
個人的に一から全て書くのは割とつらいので、他のThemeを参考にアレンジする方法にしたほうが良いと思います。自分の場合、notmyideaをベースにしました。
pelican/pelican/themes/notmyidea at master · getpelican/pelican
このThemeを参考にする場合、編集の中心になるのは、base.html, index.html, article.htmlです。どういう配置にするのか、CSSフレームワークを使うのか、など好みの条件に合わせて書くと良いと思います。
templates内で使用できる変数などはドキュメントにまとめられているので参考にするといいです。
Creating themes — Pelican 3.6.3 documentation #templates-and-variables
Theme作成Tips
PelicanのThemeは基本的にjinja2の機能をフルに活かして書いていきます、細かいところは色々ありますのでよく使ったところをまとめました。
include xxx.html
jinja2の機能でincludeがあります、サイドバーなどのパーツをincludeするように設計するといい感じになります。
Bootstrapのグリットデザインにサイドバーを組み込んでいる例です。
base.html
<div class="container">
<div class="row">
<div id="content" class="col-lg-9">
<div class="bs-component">
{% block content %}
{% endblock %}
</div><!-- /.bs-component -->
</div>
<div id="extras" class="col-lg-3">
<div class="bs-component">
{% include 'sitebar.html' %}
</div><!-- /.bs-component -->
</div><!-- /#extras -->
</div><!--./row -->
</div><!--./container -->
sidebar.html
{# ... #}
{% if DETAILS %}
{# 内容 #}
{% endif %}
{% if SOCIAL or FEED_ALL_ATOM or FEED_ALL_RSS %}
{# 内容 #}
{% endif %}
{# ... #}
if [pelicanconf.pyの変数]
pelicanconfの内容で表示/非表示したい内容に使えます。
例えば、Disqusの場合は以下のようになります。
disqus_script.html
{% if DISQUS_SITENAME %}
<script type="text/javascript">
var disqus_shortname = '{{ DISQUS_SITENAME }}';
(function () {
var s = document.createElement('script'); s.async = true;
s.type = 'text/javascript';
s.src = 'https://' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>
{% endif %}
pelicanconf.pyに"DISQUS_SITENAME"が設定されていたらDISQUSのscriptをロードするようになります。
このファイルは必要な部分でincludeします。コメントなのでarticle.htmlの下のほうにincludeします。
{% include 'disqus_script.html'%}
if article
これは、記事ページのときのみ表示したい(記事一覧やタグ一覧のときは表示しない)、SNSリンクボタンなどを表示するとき使えます。
sitebar.html
{% if article %}
<div class="sns">
<h2>Share</h2>
{% include 'sns.html' %}
</ul>
</div>
{% endif %}
pelican-plugins
Themeを作成するときにpelican-pluginsには便利なものが色々落ちています。
インストールは、このリポジトリを好きなところにクローンして、pelicanconf.pyでパスと使用するプラグインを指定します。
$ git clone --recursive https://github.com/getpelican/pelican-plugins
PLUGIN_PATHS = ['path/to/pelican-plugins']
PLUGINS = ['always_modified', 'pelican_youtube']
色々便利なものがありますが、使っているものだけ紹介します。
Always Modified
pelican-plugins/always_modified at master · getpelican/pelican-plugins
最近の記事を表示するために必要なプラグインです。Pelicanはデフォルトでは、index.htmlでしかarticlesを参照できないのでこのプラグインは便利です。
サイドバーなどに以下のような記述を追加すると、最新の記事を表示できます。
{% for article in articles|sort(reverse=True,attribute='date') %}
{% if loop.index0 < 5 %}
{{ article.title|striptags }}
{% endif %}
{% endfor %}
articleには記事情報全て含まれているので、ループ内で日付"{{ article.date.strftime("%Y %B %d") }}"なども参照できます。
Pelican YouTube
reStructuredTextのディレクトリに"youtube"を追加します。
.. youtube:: <video_id>
:width: 800
:height: 500
:align: center
こういう記述が使えます。
まとめ
このブログもPelicanのThemeを作成しています。この内容は主にそのときに調べたことをまとめてみました。
ちなみにこのブログのThemeは以下にあります。
Show comments