ブログ記事ページにブログ機能で設定した執筆者情報を表示させたいです。
社内にCSSに精通したものがいないので、ChatGPTに聞いたところ以下のサンプルが提示されたのでトライしましたが、表示されませんでした。
{% set author = blog_post.author %}
<h2>{{ author.display_name }}の最新記事</h2>
追加で質問し、ポイントを確認しましたが、問題ないように見受けられるため、こちらに投稿いたしました。
■ChatGPTに教わったチェックポイント
- blog_postオブジェクトの取得: このコードを使う前に、blog_postオブジェクトを正しく取得していることを確認してください。これはブログの個別の記事ページである必要があります。
- 執筆者情報の存在: blog_postオブジェクトが正しく取得され、その中に執筆者情報が含まれていることを確認してください。もし執筆者情報が存在しない場合、このコードはエラーを生じるか、執筆者名を表示しない可能性があります。
- デザインテンプレートの適用: コードを入力した後、正しいデザインテンプレートにそれを適用していることを確認してください。デザインテンプレートが適切に適用されていない場合、コードが正しく表示されないことがあります。
なにか解決策やヒントになることをご存じの方がいらっしゃいましたら、ご教示いただけますと幸いです。
assi
2
@tatu_yazi 公式ドキュメントからの抜粋になりますが、執筆者情報の変数は下記のように取得します!
<img alt="{{ content.blog_post_author.display_name }}" src="{{ content.blog_post_author.avatar }}">
<h3>Written by <a class="author-link" href="{{ blog_author_url(group.id, content.blog_post_author.slug) }}">{{ content.blog_post_author.display_name }}</a></h3>
<p>{{ content.blog_post_author.bio }}</p>
{% if content.blog_post_author.has_social_profiles %}
<div class="hs-author-social-section">
<div class="hs-author-social-links">
{% if content.blog_post_author.facebook %}
<a href="{{ content.blog_post_author.facebook }}" target="_blank" class="hs-author-social-link hs-social-facebook">Facebook</a>
{% endif %}
{% if content.blog_post_author.linkedin %}
<a href="{{ content.blog_post_author.linkedin }}" target="_blank" class="hs-author-social-link hs-social-linkedin">LinkedIn</a>
{% endif %}
{% if content.blog_post_author.twitter %}
<a href="{{ content.blog_post_author.twitter }}" target="_blank" class="hs-author-social-link hs-social-twitter">Twitter</a>
{% endif %}
{% if content.blog_post_author.google_plus %}
<a href="{{ content.blog_post_author.google_plus }}?rel=author" target="_blank" class="hs-author-social-link hs-social-google-plus">Google+</a>
{% endif %}
</div>
</div>
{% endif %}
上記のように、 `content.blog_post_author` というディクショナリ(他言語でいう連想配列やオブジェクト)の中に執筆者に関するデータが格納されています。全量は次のドキュメントの通りです。
https://developers.hubspot.com/beta-docs/reference/cms/hubl/variables#blog-variables:~:text=blog_author.website-,content.blog_post_author,-String
ありがとうございます!
いただいたサンプルをもとに表示させたいものを作ることができました!
執筆者の紹介ページを別ページで持っており、執筆者情報のウェブサイトに情報を格納しているため、以下のように設定しました。
<p>執筆者:<a href="{{ content.blog_post_author.website }}" target="_blank">{{ content.blog_post_author.display_name }}</a></p>
ただ、いただいたサンプルではclassが設定されていますが、今回においてはどのように設定すべきか分からなかったので省いています。(これを省くことで、どう影響があるのかもはっきりわかっていないのが正直なところですが・・・)
assi
4
@tatu_yazi ひとまず表示できたとのことで良かったです
class等についてはCSSを当てるために付いていたものになりますので、適宜削ったり、別のものを設定いただく形で大丈夫です!
(ご提示したコードはHubSpotが提供しているボイラープレートのコードでしたので、classもボイラープレート用のものになっていただけです)
@assi
ご返信ありがとうございます!classについても承知いたしました。
ご教示いただきまして、ありがとうございます!
大変助かりました。