Metaps Advent Calendar 2024の12日目の記事です。
はじめに
Hubspot CMSをカスタマイズする際に調べた色々工夫してみた小ネタ的なものを集めてみました。
前提: Hubspotブログのカスタマイズについて
ブログはアカウントにつき一つのみ利用できます(Marketing Hub Starterの場合)
そのため、ブログ機能を使ってトピックの違う記事をそれぞれ別の場所で見せたりするには少し手を加える必要があります。
任意のタグのブログ一覧を作りたい
Hubspotはブログにタグを設定して、その記事がどのようなトピックで書かれているかを分類することができます。
デフォルトの一覧だと、全ての記事が一緒になっており、URL/tagsの下にそれぞれのタグごとの一覧が自動生成されます。
/tags以外の場所で任意のタグの一覧を作りたい場合はこのようにします。
// これでモジュールで選択したタグのブログ記事が3件一覧化される
{% set blog_tag = module.blog_tag.slug %}
{% set tag_posts = blog_recent_tag_posts("default", blog_tag, 3) %}
{% for tag_post in tag_posts %}
<article>ブログカードのHTML</article>
{% endfor %}
ブログ記事のデザインをタグごとで変えたい
ブログは一つしか作れないのですが、「レポート」タグのついたブログ記事と「ニュース」タグのついたブログ記事があった場合、さらに記事自体のデザインの見せ方を変えたいとなった時があります。
しかし、ブログのデザインのテンプレートは一覧用と記事用でそれぞれ1つしか当てることができません。
その場合、一つのブログ記事テンプレートの中で分岐を作ることでタグごとのブログ記事のデザインを変えることができます。
// ブログ記事に含まれているタグ一覧 この場合は1つしかタグがついてないことを想定する
{% set tags = content.tag_list %}
{% if tags[0] == "レポート" %}
// レポートタグのブログ記事デザイン
{% else tags[0] == "ニュース" %}
// ニュースタグのブログ記事デザイン
{% endif %}
リッチテキスト内部のHTMLタグを無視したい
後から非エンジニアがテキスト変更可能なようにリッチテキストのフィールドを使った際、リッチテキストが自動で用意してくれる（おせっかいな）HTMLタグが元々用意していたモジュールのデザインを邪魔してしまうことがあります。
ある程度は予測してCSS側で対応することもできますが、デザインを意図通りにするため、リッチテキストで挿入されてしまったHTMLタグを無視したい時はこのようにします。
{% set text = module.text|sanitize_html("STRIP") %}
// リッチテキストに何かHTNLタグが付加されていてもテキストのみdivの中に挿入される
<div class="test-text">{{ text }}</div>
ちなみにsanitize_htmlはオプション値を変えることである一定のHTMLタグを通すようにも変更できます。
詳細は以下のドキュメントにあります。
ブログで使える変数値まとめ
Hubspotで用意されている変数の中でもブログ関連で使われているものをご紹介します。
content自体はページ情報のオブジェクトですが、ブログ記事ページであればこのような変数が含まれます。
| 変数名 | 変数の内容 |
|---|---|
| content.name | ブログ記事のタイトル |
| content.absolute_url | ブログ記事のURL |
| content.featured_image | ブログのキーサムネイル |
| content.featured_image_alt_text | ブログのキーサムネイルのaltテキスト |
| content.blog_post_author | ブログの執筆者情報のオブジェクト |
| content.tag_list | ブログに指定されているタグの一覧リスト |
| content.post_body | ブログ本文 |
終わりに
Hubspot CMSは膨大な開発者ドキュメントを読めばある程度のことが大体できるようにはなっています。
その代わり、開発者ドキュメント以外の情報はなかなか見つからなかったので、情報を増やしていけたらと思っています。
参考情報