Pelicanプラグイン導入のススメ

Pelicanはプラグインを導入することでブログに機能を追加することができます。 Pelicanのcore部分を直接編集しなくても導入できるのが利点です。 このブログでもいくつかのプラグインを導入しています。

プラグインのダウンロード

プラグインはPelicanのpelican-pluginsリポジトリにまとまっています。 もちろん個人で開発している場合もあるので、その場合は自分でリポジトリを探してください。 netlifyサーバの容量圧迫を回避するため静的サイトのファイルが保存されているディレクトリとは別のディレクトリに プラグインリポジトリをcloneします。

$ mkdir plugins_github
$ cd plugins_github
$ git clone git@github.com:getpelican/pelican-plugins.git

このcloneしたディレクトリから必要なプラグインのみを静的サイト用のディレクトリにコピーします。 まず静的サイト用のディレクトリにpluginsディレクトリを作成して、

$ cd /path/to/your/project/dir
$ mkdir plugins

使いたいプラグインをpluginsディレクトリ内にコピーしましょう。

$ cp -r /path/to/plugins_github/tipue_search plugins/

プラグインの読み込み方法

Pelicanはプラグインを設定ファイルで指定したパスから読み込みます。 設定ファイルはpelicanconf.pyとします。 そのファイルに次の文を入力してください。

PLUGIN_PATHS = ['plugins',]
PLUGINS = ['your_plugin',]

PLUGIN_PATHSはプラグインが保存されているディレクトリのパスを指定します。PLUGINSは実際に使用するプラグイン名を入力します。プラグインによって更に設定を行う場合があります。プラグインディレクトリ内のREADMEを見てください。

このブログで導入しているプラグイン

  • tipue search
  • sitemap
  • minify

tipue_search

ブログに検索機能を追加するプラグインです。記事が増えていくと検索機能があったほうが便利だと思うので導入しました。

・事前準備

検索を行うためにBeautifulSoupをインストールします。

$ pip install beautifulsoup4

またBeautifulSoupはTipue searchプラグインを必要とするのでthemeディレクトリにダウンロードします。

$ cd themes/<Name of your theme>/static/
$ wget http://www.tipue.com/search/tipuesearch.zip
$ unzip tipuesearch.zip
$ mv Tipue\ Search\ 7.0/tipuesearch ./
$ rm -r Tipue\ Search\ 7.0/ __MACOSX/

・設定

pelicanconf.pyで次のように書き換えます。

PLUGIN_PATHS = ['plugins',]
PLUGINS = ['tipue_search',]
DIRECT_TEMPLATES = ['index', 'tags', 'categories', 'authors', 'archives', 'search']
LINKS = (('Home','/index.html'),
         ('About','/pages/about.html'),
         ('Search','/search.html'),)

・検索用ページ作成

次に検索用ページを作成します。テーマによってはすでにあるかもしれません。しかしこのブログで使用しているテーマには検索用ページがなかったので最初から作成しました。そのページ名をsearch.htmlとして次のように書き込みます。

{% extends "base.html" %}
{% block metatitle %}Search{% endblock %}
{% block title %}Search{% endblock %}

{% block description %}A results on this site{% endblock %}

{% block scripts %}
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="{{ SITEURL }}/tipuesearch_content.js"></script>  
  <script type="text/javascript" src="{{ SITEURL }}/theme/tipuesearch/tipuesearch_set.js"></script>
  <script type="text/javascript" src="{{ SITEURL }}/theme/tipuesearch/tipuesearch.min.js"></script>

  <script>
    $(document).ready(function() {
        $('#tipue_search_input').tipuesearch({
            'show': 10,
            'mode': 'json',
            'descriptiveWords': 10,
            'showURL': false,
            'newWindow': false,
            'wholeWords': false,
            'contentLocation': '{{ SITEURL }}/tipuesearch_content.json',
        });
    });
  </script>
{% endblock %}

{% block content %}
  <div>
    <h1>Search</h1>
    <input type="text" size="30" id="tipue_search_input">
    <br>
    <div id="tipue_search_content"></div>
  </div>
{% endblock content %}

pelican contentを実行するとsearch.htmlファイルが生成されます。

・その他設定

検索設定ではオプションを指定できます。どんなオプションがあるかこのページから確認できます。 中でもwholeWordsオプションは日本語検索をする場合は必ず指定してください。 wholeWordsはデフォルトでtrueとなっています。このとき検索の語句は英語(アルファベット?)のみ反応し日本語を含めたそのほかの言語は検索できません。このオプションをfalseにすると英語以外も検索できるようになります。

作成したブログ検索ページはここです。

sitemap

sitemapを作成するためのプラグイン。 googleやbingといった検索エンジンがサイト内のコンテンツを把握するためにsitemapを使用します。 pelicanconf.pyで次のように編集

# pluginに追加
PLUGINS = ['sitemap']
# xmlファイルで出力
SITEMAP = {
    'format': 'xml'
}

minify

HTMLのスペースや改行を除外するプラグイン。webページの高速化が望めますがソースコードの可読性は下がります。 インストール方法はこちら。

その他引っかかったところ

pipで新しくインストールした時にrequirement.txtの書き換えを忘れてサイト内検索が動作しないことがありました。pipでインストールしたらpip freeze > requirement.txtを必ず実行。



Tags: Dev, Pelican