結果カードを更新してリッチテキストをサポートする – Yext Help

カードにリッチテキストを追加するには、関連するカードをいくつかの方法で更新する必要があります。トップレベルで編集可能なカードをフォークし、テーマ自体でカードを編集していないことを確認します。

detailsプロパティをリッチテキストHTMLにマッピングします。リッチテキストフォーマッターを使用するか、マークダウンまたはリッチテキスト（v2）フィールドを使用してください。
リッチテキストの切り捨てを処理する: リッチテキストフォーマッターを使用している場合、使用しているテーマに応じて、切り捨てを無効にするか、RTF切り捨てを処理するようにカードを更新できます。注意: マークダウンまたはリッチテキスト（v2）フィールドを使用している場合、切り捨てはテーマに組み込まれていません。
Handlebarsテンプレートを更新して、HTMLをページに表示できるようにします。
リッチテキストにオプションのスタイリングを追加します。

リッチテキストは、カードのdetailsセクションで最も一般的に使用されますが、Knowledge Graphにリッチテキストフィールドとして保存されている任意のフィールドで使用できます。この記事の残りの部分で参照されているdetailsではなく、そのフィールドを必ず更新してください。

カードを変更してリッチテキストをサポートする方法

detailsプロパティをリッチテキストHTMLにマッピングする: card component.jsファイルで、リッチテキストフィールドを受け入れるようにdetailsプロパティを設定します。リッチテキストをHTMLに変換する方法は、使用中のリッチテキストフィールドのフィールドタイプに依存します。
- マークダウンまたはリッチテキスト（v2）タイプのフィールドを使用している場合、表示したいフィールドのHTMLサブフィールドを使用してます（c_testRTDescriptionをフィールドのAPI名に置き換えてください）。
  - ```
  details: profile.c_testRTDescription ? profile.c_testRTDescription['html'] : null
```
- レガシーリッチテキスト（v1）タイプのフィールドを使用している場合は、リッチテキストフォーマッターを使用します（answerをフィールドのAPI名に置き換えてください）。リッチテキストフォーマッターについての詳細は「よく使われるフォーマッター」のリファレンスドキュメントをご覧ください。
  - ```
  details: profile.answer ? ANSWERS.formatRichText(profile.answer, "answer", linkTarget) : null,
```
リッチテキストの切り捨ての処理: 表示数の増減機能の扱い方は、使用しているフィールドの種類と構築中のテーマのバージョンによって異なります。
- - マークダウンまたはリッチテキスト（v2）タイプのフィールドを使用している場合、リッチテキストの切り捨てはテーマに組み込まれていません。リッチテキストフィールドのコンテンツがカードに収まりきらないほど長い場合は、手順1で行った方法ではなく、ドキュメント標準カードに組み込まれたデフォルトのスニペットを使用することをお勧めします。これは以下のようなものです。
    - ```
    dataForRender(profile) { 
      let detailsData = ''; 
      if (profile?.d_highlightedFields?.s_snippet) { 
        const { value, matchedSubstrings } = profile.d_highlightedFields.s_snippet; 
        detailsData = Formatter.highlightField(value, matchedSubstrings); 
      } else if (profile.s_snippet) { 
         detailsData = profile.s_snippet; 
      } 
    
      return { 
        ... 
        details: detailsData, // The text in the body of the card
```

- レガシーリッチテキスト（v1）タイプのフィールドを使用しており、Theme 1.28以下の場合は、「もっと見る/表示数を減らす」の機能を無効にします。ここでリスクとなるのは、切り捨てを行うと、終了タグ（例 </div>、</p>）が途切れてしまい、ページが壊れる可能性があることです。カードのcomponent.jsファイル内のshowMoreDetailsオブジェクトをコメントアウトまたは削除してください。
  - ```
  // showMoreDetails: { 
  // showMoreLimit: 750, // Character count limit 
  // showMoreText: 'Show more', // Label when toggle will show truncated text 
  // showLessText: 'Show less' // Label when toggle will hide truncated text 
  // }, 
```
- レガシーリッチテキスト（v1）タイプのフィールドを使用しており、Theme 1.29以上の場合は、RTFトランケーションを使用できます。showMoreDetailsとtruncatedDetailsを一緒に使用してください。これがカードに存在する場合、コメントインの必要があるかもしれません。それ以外の場合は、カードcomponent.jsファイルを次のように編集します（answer をフィールドのAPI名に置き換えてください）。
  - ```
  return {
    title: profile.name, // The header text of the card
    ...
    details: profile.answer ? ANSWERS.formatRichText(profile.answer, 'answer',
  linkTarget) : null, // The text in the body of the card
    // If the card's details are longer than a certain character count, you can truncate the
    // text. A toggle will be supplied that can show or hide the truncated text.
    // Note: If you are using rich text for the details, you should not enable this feature.
      showMoreDetails: {
        truncatedDetails: profile.answer ? ANSWERS.formatRichText(profile.answer,
  'answer', linkTarget, 38) : null, // Character count limit
        showMoreText: 'Show more', // Label when toggle will show truncated text
        showLessText: 'Show less' // Label when toggle will hide truncated text
    },
    ...
  }
```
  - truncatedDetails の値は details に似ていますが、ANSWERS.formatRichText に追加のパラメーター、つまり、リッチテキストコンテンツが切り捨てられる文字数（この場合は38）を渡します。この文字カウントは、HTML tagやフォーマットなどの非テキスト文字をすべて無視します。truncatedDetails には任意の文字列値を渡すことができます。例えば、以下のカード情報がある場合、最初と中央にある3つのハッシュタグと改行記号は無視されます。
  - デフォルトでは、切り捨てられたテキストの末尾に省略記号が追加されます。これは、ANSWERS.formatRichTextにもう1つのパラメーターを追加して接尾辞を指定することでカスタマイズできます。省略記号を完全に削除するには、空の文字列を指定してください。
    - ANSWERS.formatRichText(profile.answer, 'answer', linkTarget, 38, '')

Handlebarsテンプレートを更新して、HTMLをページに表示できるようにします。{{{ }}}をHandlebarsテンプレートのdetailsセクションに追加します。これにより、HTMLがそのまま印刷されたり、エスケープされたりすることなく、ページ上にレンダリングされることが保証されます。
- これは、組み込みのFAQアコーディオンカードでデフォルトで行われます。カードをフォークする場合は、カードのtemplate.hbsファイル内で、リッチテキストを使用するフィールドが三重中括弧で囲まれていることを確認してください。
  - - ```
    <div class="HitchhikerFaqAccordion-detailsText js-HitchhikerCard-detailsText{{#if showExcessDetailsToggle}} 
    js-hidden{{/if}}"> 
       {{{card.details}}} 
    </div>
```

（オプション）スタイリングを追加します。
- 追加したいスタイルがあるかもしれません。例えば、段落の間のスペースやリンクのスタイル設定などです。推奨されるスタイリングには以下のようなものがあります。
  - ```
  .HitchhikerFaqAccordion-details
  {
    p, ul, ol
    {
      margin-bottom: .5rem
    }
  
    a
    {
      color: var(--yxt-color-brand-primary);
      text-decoration: underline;
  
      &:hover {
      text-decoration: none;
      }
    }
  }
```

image (5).png