GravのMarkdown NoticesプラグインでBootstrapのAlertを使う

2019-11-23 23:262019-11-24 09:52

GravプラグインであるMarkdown Noticesの機能によりマークダウンから簡単にBootstrapのコンポーネントであるAlertを呼び出す方法を紹介します。やり方は普通にBootstrap CSSが読み込まれている環境でプラグインの設定を次のようにするだけです。YAMLで表示していますがAdminからも簡単に変更できます。

Markdown Noticesプラグインの設定

enabled: true
built_in_css: false
base_classes: 'alert'
level_classes: [alert-info, alert-warning, alert-danger, alert-success]

ビルトインCSSのクラスは使われないのでfalse、他はBootstrapのコンポーネントが呼び出せるように合わせます。

マークダウンの書き方

! A simple info alert—check it out!

!! A simple warning alert—check it out! 

!!! A simple danger alert—check it out! 

!!!! A simple success alert—check it out!

のようなマークダウンテキストを入力します。この結果は以下のようになります。

A simple info alert—check it out!

A simple warning alert—check it out!

A simple danger alert—check it out!

A simple success alert—check it out!

簡単です。もちろんprimarysecondaryなどのアラートを使うこともできまし、順番を変えることもできます。次のようにエクスクラメーションを続ければ複数行もいけますし、もともとのマークダウン記法も使えます。

! ### This is h3 headings.
! 
! In this block, markdown expression can be used in the same way.
! * I have a pen.
! * I have an apple.
!
! ---
!
! Aww yeah, you successfully read this important alert message.

これをレンダリングすると次のようになります。

This is h3 headings.

In this block, markdown expression can be used in the same way.

  • I have a pen.
  • I have an apple.

Aww yeah, you successfully read this important alert message.

ブロック内はあくまで普通のマークダウンになるということですね。この辺りはMarkdown Noticesの普通の使いかたですので簡単ですね。余りにもビックリマークが多いと使いにくいので実用上使えるアラートは4種類までといったところでしょうか。

alert-linkにマークダウンから対応

アラート内にリンクを貼るときにアンカータグのクラスでalert-linkを指定すると配色がいい感じになります。Markdown ExtraをGravの設定でオンにしてあれば次のようにしてalert-linkを指定することができます。

!! #### This is h4 headings
!!
!! This is [an example link](#){.alert-link}.
!! Using Markdown Extra functionality.

This is h4 headings

This is an example link Using Markdown Extra functionality.

Markdown Extraがオフの場合でも直接リンクを記入すれば同じことが出来ます。ただ、これを多用してしまうとマークダウンというよりただのHTMLファイルになるので多用する場合は諦めてExtraをオンにするほうが良いでしょう。

!!! #### This is h4 headings
!!!
!!! This is <a href="#" class="alert-link">an example link</a>
!!! Not using Markdown Extra functionality.

This is h4 headings

This is an example link Not using Markdown Extra functionality.

AlertとNoticeの違いとは

いや、同じでしょ。ほとんど。なのでGravのMarkdown Noticesプラグインを使っていてかつBootstrapにより構築されているテーマならばスタイルの重複なんかが発生するのでこのようにするのがよいでしょう。ちなみにビルトインCSS使ったデフォの見た目はこんな感じになります。

This is h3 headings.

In this block, markdown expression can be used in the same way.

  • I have a pen.
  • I have an apple.


Aww yeah, you successfully read this important alert message.

まあこれでもよいでしょう。但しコッチはGravのデフォルトなのでGrav感丸出し、一方でBootstrapの方もBootstrap感丸出しなのでまあ好み。BootstrapのAlertを採用してBootstrap全体をカスタマイズするのが良いかなと個人的に思います。以上。