PelicanのTheme【作る編】 - Python
  • Date:Wednesday 14 October 2015 (AM 07:55:17)
  • Updated:Thursday 15 October 2015 (AM 12:14:15)
  • Tags:Pelican Python
  • Category:Programming

前回は人の作った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には便利なものが色々落ちています。

getpelican/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

kura/pelican_youtube

reStructuredTextのディレクトリに"youtube"を追加します。

.. youtube:: <video_id>
:width: 800
:height: 500
:align: center

こういう記述が使えます。

まとめ

このブログもPelicanのThemeを作成しています。この内容は主にそのときに調べたことをまとめてみました。

ちなみにこのブログのThemeは以下にあります。

yymm/mokumoku

Show comments

Adsense

Share

  • このエントリーをはてなブックマークに追加

About

趣味でプログラミングをしています。仕事では致し方なくC言語のようなC++を書いています。

Tags

Pages