Pelicanのテーマ周りの見直し

Posted on 2020/08/30(Sun) 12:15 in technical

Summary

未だにBootstrapのままというのも良くないかなということで、PelicanのテーマをFlexに更新しました。
ついでに細かいところを直したり、プラグイン周りを見直したりした雑記録です。

コンポーネント

インストール方法は省略。

更新内容

Markdown対応

Ref: https://docs.getpelican.com/en/stable/content.html#file-metadata

手元のメモをMarkdownで取るようになってから、reStructuredTextに書き直すのがどうにも億劫で...
もう少しカジュアルに書き物を出来るようにMarkdownにも対応しました。

何も考えずにURLを貼り付けたらリンクになると助かるので mdx_linkify も追加しています。

(pelican)$ pip install markdown mdx_linkify

バージョンによりますが、pelican 4.2.0では MARKDOWN の辞書を追加する必要があるので Settings と Python-Markdown 3.2.2 documentation » Extensions » の説明を読んで pelicanconf.py に設定を追加しました。

MARKDOWN = {
    'extension_configs': {
        'markdown.extensions.codehilite': {'css_class': 'highlight'},
        'markdown.extensions.extra': {},
        'markdown.extensions.meta': {},
        'markdown.extensions.fenced_code': {},
        'markdown.extensions.nl2br': {},
        'markdown.extensions.toc': {},
        'markdown.extensions.admonition': {},
        'mdx_linkify.mdx_linkify': {},
    },
    'output_format': 'html5',
}

Hint

  • 'markdown.extensions.toc' を入れると [TOC] で目次が作れるようになるので助かる
  • 'markdown.extensions.admonition' を入れると、こういうNOTEみたいな表現が簡単にできるので助かる

テーマの変更

テーマは見た目と更新頻度のバランスでFlexにしました。この辺りは好みの問題です。

sitemapの追加

Flexテーマにはサイトマップが含まれていないので、これは自前で追加しました。

Ref: https://github.com/getpelican/pelican/wiki/Tips-n-Tricks#generate-sitemapxml

Flex用pelicanconfの設定（プラグイン以外）

以下の設定を追加しました。

# 上部の `Home | Archives | Atom ` みたいなやつを表示する 
MAIN_MENU = True
MENUITEMS = (
    ("Archives", "/archives.html"),
)

# 丸っこくするアイコン画像
SITELOGO = SITEURL + "/images/profile.jpg"

# 1ページ辺りの記事数
DEFAULT_PAGINATION = 10

# 色の調整等（CSSの遅延ロードで表示がガタつくのを避けたいけど保留）
CUSTOM_CSS = 'static/custom.css'

# コードハイライトの色指定
PYGMENTS_STYLE = 'monokai'

# SNS周りの設定
SOCIAL = (
    ('envelope', 'mailto:ruy@ainoniwa.net'),
    ('twitter', 'https://twitter.com/team_eririn'),
    ('github', 'https://github.com/ainoniwa'),
    ('bitbucket', 'https://bitbucket.org/ainoniwa'),
    ('rss', 'https://www.ainoniwa.net/pelican/feeds/all.rss.xml'),
)

# PiwikのアドレスとサイトID（Piwikは自前）
PIWIK_URL = "www.ainoniwa.net/piwik/"
PIWIK_SITE_ID = 1

# これはインデックスページから各記事へのリンクにアンカーを付けるかどうかの設定。デフォルト付与される。
# モバイル向けデザインを考えるとあった方が良い気もする。要らない場合はTrueにする。
# DISABLE_URL_HASH = True

# ページ下部にライセンス表記を追加
COPYRIGHT_NAME = "ruy@ainoniwa.net"
CC_LICENSE = {
    "name": "Creative Commons Attribution-ShareAlike",
    "version": "4.0",
    "slug": "by-sa"
}

プラグイン設定 - share_post

SNS等への共有ボタンを置きます。

PLUGINS = [
    ...
    "share_post",
    ...
]

Flexテーマはサポートしていないので、テンプレートへの追加を自前で行います。

diff --git a/templates/article.html b/templates/article.html
index e4aaddd..177eee8 100644
--- a/templates/article.html
+++ b/templates/article.html
@@ -58,6 +58,7 @@
       {% endif %}
     </p>
   </div>
+  {% include "partial/share_post.html" %}

   {% if ADD_THIS_ID %}
   <div class="center social-share">
diff --git a/templates/partial/share_post.html b/templates/partial/share_post.html
new file mode 100644
index 0000000..2c44e80
--- /dev/null
+++ b/templates/partial/share_post.html
@@ -0,0 +1,17 @@
+{% if article.share_post and article.status != 'draft' %}
+<ul class="social social_white">
+  <li class="social_txt">Share on: </li>
+  <li><a href="{{article.share_post['twitter']}}" class="sc-twitter" target="_blank" title="Share on Twitter">
+    <i class="fab fa-twitter"></i>
+  </a></li>
+  <li><a href="{{article.share_post['facebook']}}" class="sc-facebook" target="_blank" title="Share on Facebook">
+    <i class="fab fa-facebook"></i>
+  </a></li>
+  <li><a href="{{article.share_post['reddit']}}" class="sc-reddit" target="_blank" title="Share via Reddit">
+    <i class="fab fa-reddit-alien"></i>
+  </a></li>
+  <li><a href="{{article.share_post['email']}}" class="sc-envelope" target="_blank" title="Share via Email">
+    <i class="fas fa-envelope"></i>
+  </a></li>
+</ul>
+{% endif %}
\ No newline at end of file

Note

FlexテーマはAddthisという外部サービスをサポートしているので、それを使うことも可能です。
トラッキング周りで外部サービスを使うのも気が引けたので、一度試してみたものの採用しませんでした。

プラグイン設定 - related_port

入れるとFlexテーマの場合は記事の下部に関連記事が出るようになります。入れたら数を指定して終わり。

PLUGINS = [
    ...
    "related_posts",
    ...
]
RELATED_POSTS_MAX = 5

プラグイン設定 - tipue_search

make html するときに検索用のJSONを生成して、全文検索機能を提供してくれるプラグイン。

PLUGINS = [
    ...
    "tipue_search",
    ...
]

Flexテーマはtipue_searchを使う時にURLがサブディレクトリになることを想定していないみたいなので、少し修正。

diff --git a/templates/base.html b/templates/base.html
index b3f208f..106daf3 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -157,7 +156,7 @@
       {% if SITESUBTITLE %}<p>{{ SITESUBTITLE }}</p>{% endif %}

       {% if 'tipue_search' in PLUGINS %}
-        <form class="navbar-search" action="/search.html" role="search">
+        <form class="navbar-search" action="{{ SITEURL }}/search.html" role="search">
           <input type="text" name="q" id="tipue_search_input" placeholder="{{ _('Search...') }}">
         </form>
       {% endif %}

Note

テーマに同梱されているjQueryが古いので、気になる人は static/tipuesearch/jquery.min.js を最新版に差し替えておくと良いと思います。

プラグイン設定 - neighbors

入れると記事ページから前後記事へのリンクが追加されます。入れて終わり。

PLUGINS = [
    ...
    "neighbors",
    ...
]

プラグイン設定 - plantuml

入れるとPlantUMLで図が描けるようになります。
それほど利用頻度は高くないので、とりあえず画像が出るだけ良しとします。

PLUGINS = [
    ...
    "plantuml",
    ...
]

例えばこんな感じで書くと、

::uml::
@startuml
  Alice -> Bob: Authentication Request
  Bob --> Alice: Authentication Response

  Alice -> Bob: Another authentication Request
  Alice <-- Bob: another authentication Response
@enduml
::end-uml::

こういう図が出ます。

::uml::
@startuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response

Alice -> Bob: Another authentication Request
Alice <-- Bob: another authentication Response
@enduml
::end-uml::

Note

plantuml にコマンドが通っている必要があるので、Ubuntuで言えば sudo apt install -y plantuml のようにインストールしておくこと。

プラグイン設定 - i18n_subsites

言語切り替え用のプラグイン設定。

PLUGINS = [
    ...
    "i18n_subsites",
    ...
]
JINJA_ENVIRONMENT = {'extensions': ['jinja2.ext.i18n']}
I18N_TEMPLATES_LANG = 'jp'

Note

念のため入っているだけなので不要な場合は無視

終わり

少しは今風になったかな？
いつも思うけどjs/CSSの遅延ロード用にテンプレートを調整するとか、画像の最適化とか結構しんどい。
HTML生成時点で上手く処理出来たりしないか一瞬考えたけど畑違いすぎてつらそうだから考えるのをやめました。

To 自分
環境作って満足しないで記事を書こうね。

参考サイト

pelican

Previous Post Next Post

Related articles: