ZolaでShortcodesを使って記事を書く際のヘルパー機能をつくる

Zola の話が続きますね（笑）
今回は Shortcodes という機能を使って記事を書く際のヘルパー機能を作れますよという話です。

Shortcodes とは

くわしくはドキュメントをみてほしいのですが、ざっくり書くと、マークダウン内でも tera の機能などをつかっていろいろよしなにやってくれるようなヘルパー機能を自分で作るというものです。
（テンプレートで出来てることをマークダウンにも持ってこれるみたいな）

やり方

/templates/shortcodes/ というフォルダを作ってそこに html でファイルを作成します。
そうするだけで、マークダウン内からは {{ 作ったファイル名() }} という形で呼び出すことが出来るようになります。

ということで、以下に今回自分が作ってみたのを紹介します。

スクリーンネームのリンク

記事の本文中に、@AnzNetJp という感じで Twitter のスクリーンネームがあると、プロフィールページへリンクを貼りたくなりますが、マークダウンで書こうとすると少しめんどいです。
それに、なんとなく別タブで開くようにもしたいので、そうなってくると a タグを自分で書くことになってしまい、余計にめんどくさいので、それをよしなにやってくれるヘルパーがほしい。

at というヘルパー作った

ということで、at という名前で Shortcodes に追加しました。
（ /templates/shortcodes/at.html を作成しました）

中身はこんな感じです

{% set screen_name = name | trim | replace(from="@", to="") %}
<a target="_blank" href="https://twitter.com/{{ screen_name }}">@{{ screen_name }}</a>

物凄くシンプルなので、これぐらい自分で書け感もなくはないのですが、折角ですし？

使う時はマークダウン内で呼び出すだけです

このブログの著者は {{* at(name="AnzNetJp") }} です。

（本来は * は不要です。これがないと変換されちゃうのでつけているだけです）

幾分かは楽になっていますね！（なっています！！）
（これはその機能つかって貼っている @AnzNetJp 笑）

追記セクションの挿入

僕のブログでは、追記をしたときにそれが追記だとわかるようなデザインにしています。
実際の見え方はこちらの記事の最後を見てもらえると。

これを実現するためにこれまでは、マークダウン内で以下のように書いていました。

## みだし

本文

<section class="ps">
#### 追記（2021.05.31）

追記内容
</section>

section 内が追記部分となり、css でよしなにデザインしています。
まぁ class つきの section タグを書くだけなので手間というほどでもないですが、
たまにしか使わないので、ふと「あれ class 何指定するんだっけ？」とか、
追記という見出し部分の表記揺れとかが発生したりしていたので、
今回 Shortcodes でそこらを解決するようにしました。

ps というヘルパー作った

ということで、こっちは ps という名前で Shortcodes に追加しました。
（ /templates/shortcodes/ps.html を作成）

中身は以下のとおりです。

<section class="ps">
  <h4>追記（{{ date }}）</h4>

  {{ body | markdown | safe }}

</section>

ここでちょっと注目なのが body です。
body はちょっと特殊で引数という扱いではなく、ブロック間の物が入ってきます。
ので、使い方は先程の at とはちょっと違い、マークダウン内では以下のように書きます。

## みだし

本文

{%* ps(date="2021.05.31") %}
#### 追記（2021.05.31）

追記内容

> markdown もかける

こんな感じ
{% end %}

（本来は * は不要です。これがないと変換されちゃうのでつけているだけです）

{%* ps(date="") %} {% end %} で挟んだところが、body に渡ってくることになります。
追記部分は複数行に渡ることがほとんどなのでこういうつくりにしました。

これで少しだけ書くのが楽になりましたし、もし追記部分の構成を変更したい場合に、過去記事すべてを書き直すということもしなくてよくなるので、運用面でもメリットが大きいですね。

課題

今回作った2つとも実は課題・問題があるのです。

at の課題

こっちは、本当なら・できるなら、本文中に @AnzNetJp と、「@」で始まるワードがあったら、「自動で」リンクを張ってほしいのです。
こっちで at(name="") みたいにするのではなく、build とかして作成するときにでも自動で…
でもそのやり方が分からなくて（できないのかもですが）、結果今回紹介した感じになりました。
マークダウン内で、URL を書いても自動でリンクはられるわけではないので、そういうのができないのかな…と諦めているのですが、もしご存じの方がいたらぜひ教えてほしいです 🙏

ps の問題

使い方の例で、ps ブロック内でマークダウンもかけるとかかいたのですが、コードブロックが入るとちょっと崩れちゃうんですよね。
なので、ps 機能を使って書く場合はコードブロックをいれないか、入れるなら自分で html を組むかという選択を迫られています（汗）

まぁこれは、こっちの問題というより Zola が採用している Parser の問題のようなきがするので、完全にあきらめていますが（笑）

いくつか課題とかありますが、うまくしたら記事を書くときの「これちょっとめんどくさい」が解決出来るはずなので、Zola 使いのかたはいろいろ考えて、試してみるのも面白そうですね。