Pelican導入後のカスタマイズ

Bulma 6.1への対応

適用したテーマが Bulma をベースにしていましたが、古いバージョンをベース にしていたので最新のバージョンに対応させました。

Menuやナビゲーション周りが大きく変わっており、CSSのクラス名も変わってしまって いたので、機械的な作業ですがかなり手間が掛かりました。

HTML埋込への対応

Hugoを使っていた時には、記事はMarkdown記法で書いていたので HTMLを埋込 みたい時はそのままHTMLを記述していました。移行した記事はMarkdownのまま なのでこれでよいのですが、新たな記事を書く際に困りました。

折角のなので、というよりPelicanに移行した目的が reStructuredTextで書く ことなので、記事をreStructuredTextで書いているのですが、当然HTMLをそのまま 書くことはできません。

pelican-pluginsから html_rst_directive というプラグインを拾ってきました。

.. html::

    <a href="https://hohoge.co.jp/index.html">ホゲホゲ株式会社</a>

以上のように htmlディレクティブが扱えるようになるので、 .. html:: 後に インデントしてHTMLを記述すれば、きちんと認識してくれます。

また、Youtubeの張り込みについては、専用の pelican_youtube というプラグイン がありました。以下のように記述すると簡単に貼り込んでくれます。 VIDEO_ID の部分は動画の共有の際に割り振られているIDです。詳しくはプラグイン の説明を確認してください。

.. youtube:: VIDEO_ID

サイトマップ対応

気がついたらサイトマップが作られていませんでした。

こちらも Pelican Pluginsに sitemap プラグインがありました。

プラグインを取り込んで pelicanconf.py に以下のように記述するだけです。

SITEMAP = {
    'format': 'xml',
    'exclude': ['tag/','category/','author/'],
    'priorities': {
        'articles': 0.5,
        'indexes': 0.5,
        'pages': 0.5
    },
    'changefreqs': {
        'articles': 'daily',
        'indexes': 'daily',
        'pages': 'monthly'
    }
}

関連記事の自動埋込

関連記事を自動で埋め込んでくれるプラグインもあったので取り込んでみました。

related_posts というプラグインですが、こちらはテンプレートの変更も必要です。

{% if article.related_posts %}
<hr />
<div class="section" id="idx">
    <h2>関連記事</h2>
    <ul>
        {% for related_post in article.related_posts %}
        <li><a href="/{{ related_post.url }}">{{ related_post.title }}</a></li>
        {% endfor %}
    </ul>
</div>
{% endif %}

ただし、前提がTagで同種の記事が引っ張れる前提のようです。

このブログでは Categoryを使っておらず Tagをカテゴリー的に使っているので 結果として同じカテゴリーの直近の記事が並ぶだけになってしまいます。

メタ情報に :related_posts: で関連する記事のslugを手動で並べると、優先して リンクを作ってくれるようですので、できるだけ手動で参照できる記事をメタ情報に 書き込むことにしました。

今後

まだテーマ自体が古いPelicanの機能に依存した部分があったり、CSSフレームワーク にも最新のものに対応できてない部分があるので、時間を見つけて改良していきたい と思います。