今日も、覚えたてのちょっとした Tips をまとめます。
Craft CMS の リッチテキスト
フィールドは、Redactor II を利用した WYSIWYG エディタです。
Rich Text Fields | Documentation | Craft CMS
https://craftcms.com/docs/rich-text-fields
見出しや段落など HTML タグを含むデータを入力できますが、一覧ページでループ処理する際など、概要文だけ抜き出したいことがあります。
そこで、任意の長さのテキストを取得する方法について調べてみました。
フィールドを用意する
はじめに richtext_body
というハンドル名の リッチテキスト
タイプのフィールドを用意します。
The Architect プラグインをインストール済みであれば、プラグイン設定の Raw Input
タブに次の JSON をコピーして Construct
ボタンをクリックしてください。
{
"groups": [
"RichText"
],
"fields": [
{
"group": "RichText",
"name": "本文",
"handle": "richtext_body",
"instructions": "",
"required": false,
"type": "RichText",
"typesettings": {
"configFile": "",
"availableAssetSources": "*",
"availableTransforms": "*",
"cleanupHtml": "1",
"purifyHtml": "1",
"purifierConfig": "",
"columnType": "text"
}
}
]
}
参考:The Architect for Craft CMS
https://github.com/Pennebaker/craftcms-thearchitect
テンプレートを調整する
エントリを entry
で参照できるテンプレート上に、下記のサンプルコードを記述します。
{# 設定 #}
{% set text_limit = 50 %}
{% set body_text = entry.richtext_body|striptags %}
{% set summary = body_text|slice(0, text_limit) %}
{# 出力 #}
{% if summary %}
<p class="text">{{ summary }}{% if body_text|length > text_limit %}...{% endif %}</p>
{% endif %}
行ごとに見ていきましょう。
{% set text_limit = 50 %}
初めに、取得する文字数をセットします。
{% set body_text = entry.richtext_body|striptags %}
次に、striptags
フィルタで HTML タグを除去したリッチテキストのテキストを変数にセットしています。
{% set summary = body_text|slice(0, text_limit) %}
さらに、slice
フィルタでテキストの先頭から指定した文字数を抜き出しています。
このサンプルでは、最大50文字まで抽出されます。
あとは、これを出力すれば完了です。
{% if summary %}
<p class="text">{{ summary }}{% if body_text|length > text_limit %}...{% endif %}</p>
{% endif %}
ここでは、テキストがある場合のみ p.text
で概要文を囲み、さらに指定した文字数よりもテキストが多ければ ...
を出力する分岐を加えています。
フィルタをうまく使えば、比較的簡単にテンプレートが書けて便利ですね。