hexo-tag-detailsを公開しました

HexoにHTML5の detailsタグ^1を記事に埋め込むためのプラグインを作成して、npmに公開しました。この記事はそのプラグインの紹介記事です。

npm

hexo-tag-details

https://www.npmjs.com/package/hexo-tag-details

HTML5 details tag on your Hexo article. Latest version: 0.1.7, last published: 4 years ago. Start using hexo-tag-details in your project by …

hexo-tag-detailsについて

hexo-tag-detailsはブログ構築ツールHexoのプラグインで、投稿にHTML5のdetailsタグを埋め込むためのタグを提供します。detailsタグを使うと以下のようなUIを追加できます。

猫は好きですか？

1. 好き
2. 大好き
3. 愛している

インストール

npmコマンドでインストールしてください。

$ npm install hexo-tag-details --save

使い方

要約文と詳細文を書くだけです。ページを表示したしたときに詳細文を開いておく場合には、mode:openを指定します。指定しない場合は詳細文は閉じて表示されます。mode:closeは後で説明する設定でデフォルトを詳細文を開くにした場合に利用します。

{% details [mode:open/close] summary text %}
detail text
{% enddetails %}

例1:

{% details あなたの出身はどこですか? %}
私は地球出身です。 水の惑星です!
{% enddetails %}

上の例は以下のようなHTMLを生成します。

<details>
  <summary>あなたの出身はどこですか?</summary>
  私は地球出身です。 水の惑星です!
</details>

表示は以下のようになります。

あなたの出身はどこですか?

私は地球出身です。 水の惑星です!

---

例2(mode:openを指定した場合):

{% details mode:open あなたの好きな食べ物は何ですか? %}
1. お寿司
2. 天ぷら
3. すき焼き
{% enddetails %}

上の例は以下のようなHTMLを生成します。

<details open="open">
  <summary>あなたの好きな食べ物は何ですか?</summary>
  <ol>
    <li>お寿司</li>
    <li>天ぷら</li>
    <li>すき焼き</li>
  </ol>
</details>

表示は以下のようになります。

あなたの好きな食べ物は何ですか?

1. お寿司
2. 天ぷら
3. すき焼き

設定

className

className はCSSクラス名を指定します。 (デフォルト: なし)

open

openは最初から詳細文を開いておくかどうかを指定します(デフォルト: false)

_config.yml

tag_details:
  className:
  open: false

リポジトリ

以下のリポジトリで開発しています。バグ報告、ご要望はIssuesへどうぞ。プルリクエストも歓迎です。

最後に

このタグを作ったきっかけは「10の質問」をこのサイトでやってみようと思ったことです。

10の質問をやろうと思うと質問の解答が質問よりボリュームが多くて全体的に見づらくなることが分かりました。そこで質問の解答部分を折り畳めるようにしようとおもったのですが、HTML5の`details`タグを直接HexoのMarkdownに埋め込むとうまく動作しないことが分かりました。改行を有効にしていたので途中で`
`が入ってしまったのです。

もしかしたら、すでにdetailsのタグプラグインを作っている人がいるかも知れないと思って探して見ましたが、なかったので自分で作ってしまいました。大したことないタグですが、使って頂ければ幸いです。