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

  
# 見出し1です
## 見出し2です
### 見出し3です
#### 見出し4です
##### 見出し5です
###### 見出し6です
テキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキスト
* JavaScript * Vue.js * Craft cms
|table|table| |-----|------| |ああああ| ああああ|
```html <div>   <p>コードブロックしてみた。テキストを入力してみたよ</p> </div> ```
テキストテキスト `code記法` ああああ
> 引用を入力してみます。 > 引用を入力しています。
- リスト1 - ネスト リスト1_1 - ネスト リスト1_1_1 - ネスト リスト1_1_2 - ネスト リスト1_2 - リスト2 - リスト3
1. 番号付きリスト1 1. 番号付きリスト1_1 1. 番号付きリスト1_2 1. 番号付きリスト2 1. 番号付きリスト3
normal *italic* normal normal _italic_ normal
normal **bold** normal normal __bold__ normal
normal ***bold*** normal normal ___bold___ normal
~~取り消し線~~
[Google先生](https://www.google.co.jp/)

Author

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