category

Craft CMS に脚注機能をつけられる Footnotes プラグイン #craftcms

2019-11-04

リッチエディタに脚注機能をつけられる Footnotes プラグインを見つけた。

Footnotes
https://plugins.craftcms.com/f...

プラグインのインストールとRedactorの設定

とりあえずプラグインをインストールする。

Redactor の設定（Standard.json）とかにプラグイン "footnotebutton" を追加する。

{
  "buttons": ["formatting", "bold", "italic", "unorderedlist", "orderedlist", "link", "image", "video"],
  "plugins": ["fullscreen", "video"],
  "linkNewTab": true,
  "toolbarFixed": true
}
↓↓↓
{
  "buttons": ["formatting", "bold", "italic", "unorderedlist", "orderedlist", "link", "image", "video"],
  "plugins": ["fullscreen", "video","footnotebutton"],
  "linkNewTab": true,
  "toolbarFixed": true
}

追加するとこんなかんじでエディタにボタンが追加される。

この状態で設定していくとこのような感じになる。

プラグインの設定とテンプレートの調整

プラグインの設定でアンカーリンクを許可する。

そのうえでこのエディタ部分の出力にフィルタを追加する。

<p>{{ entry.bookFeature }}</p>
↓↓↓
<p>{{ entry.bookFeature | footnotes }}</p>

脚注部分のコードもテンプレートに追加する。

例）

{% if footnotes_exist() %}
        <hr>
        <ol>
          {% for number, footnote in footnotes() %}
            <li id="footnote-{{ loop.index }}">
              {{ footnote }}
            </li>
          {% endfor %}
        </ol>
        {% endif %}

こんな感じで脚注が表示できる。

使い所は結構ありそうなので必要な時に使っていっても良さそうなプラグイン。