Smartdown for Craftを使ってみた。

最近Craft cmsを個人的に色々触り始めた。 インストールの手順とか使い方なども日々色々勉強中なので、これから投稿していきたいとは思っています。

まずは、個人的に記事入力がMarkdownでスマートに書きたいという思いが強かったので。(いろんな意味で・・・) Craftでもmarkdownはサポートしているのですが、コードブロック・テーブルなどのサポートはしていないようです。(きちんと調べてないですが。。) 色々Githubで探していたら、Smartdown for Craftというプラグインが良かったので使ってみました。

Smartdown for Craftは、Markdown ExtraとSmartyPantsとの組み合わせたプラグインになります。 コードブロックがバッククォートで書けるなど、自分が普段書いているmarkdownの書き方にほぼ近いということで使ってみようと思いました。

インストール

READMEに書いている通りにインストールします。

  1. URL先からSmartdown for Craftをダウンロード
  2. 解凍して、smartdownをcraft/pluginsへ格納

管理画面からプラグインを有効にする

管理画面からプラグインを有効にします。

smartdown01.png smartdown02.png

  • 管理画面の設定からプラグインをクリック
  • Smartdownのインストールをクリック
  • インストール完了

フィールドの設定

新しくフィールドを追加してやる方法もありますが、今回はインストール時にデフォルトで設定されているフィールド(ボディ)を調整して設定してみます。

同じく設定からフィールド < ボディーをクリックします。 デフォルトのボディーに当てられているフィールドタイプはリッチテキストエリアになります。 リッチテキストでは、Smartdownの拡張できないためプレーンテキストに変更します。

smartdown03.png

そのままのプレーンテキストでは一行表示になるので、改行を許可するにチェックを入れるのと、初期表示の行を10に設定して入力を見やすくするように調整しておきます。

テンプレートを調整

今回は、サンプルなのでNewsの_entry.htmlのentry.bodyにSmartdownを設定してみます。 {{ entry.body }}を{{ entry.body | smartdown }}のようにsmartdownを追加します。

{% extends "_layout" %}

{% block content %}
<article>
  <h1>{{ entry.title }}</h1>
  <p>Posted on {{ entry.postDate.format('F d, Y') }}</p>
  {{ entry.body | smartdown }}
</article>
{% endblock %}

これで記事投稿画面で、markdownで書くことが可能になります。

入力例

試しにMarkdown記法 サンプル集で入力した例になります。 スタイルの調整は必要ですが、意図した形で変換を行ってくれました。

<pre class="hljs"> <code class="html">

見出し1です

見出し2です

見出し3です

見出し4です

見出し5です
見出し6です

テキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキスト

  • JavaScript
  • Vue.js
  • Craft cms
table table
ああああ ああああ
&lt;div&gt;
&nbsp;&nbsp;&lt;p&gt;コードブロックしてみた。テキストを入力してみたよ&lt;/p&gt;
&lt;/div&gt;

テキストテキスト code記法 ああああ

引用を入力してみます。 引用を入力しています。

  • リスト1
    • ネスト リスト1_1
      • ネスト リスト1_1_1
      • ネスト リスト1_1_2
    • ネスト リスト1_2
  • リスト2
  • リスト3
  1. 番号付きリスト1
    1. 番号付きリスト1_1
    2. 番号付きリスト1_2
  2. 番号付きリスト2
  3. 番号付きリスト3

normal italic normal normal italic normal

normal bold normal normal bold normal

normal bold normal normal bold normal

取り消し線

Google先生 </code> </pre>

  • Facebook
  • Twitter
  • はてなブックマーク

Author

札幌でフロントエンドエンジニアとして働いています。好きな音楽はSIAM SHADE!
SIAM SHADEの六人目のメンバーとして日々ロックを愛し続けている。
HTML,CSS,JavaScriptをベースにCMS構築が得意です。
HAMWORKS社員 https://ham.works