Smart Trim
Drupal Coreの「Summary or Trimmed」フォーマッターよりも細かい制御が可能な、インテリジェントなテキストトリミング機能を提供するFieldフォーマッター。
smart_trim
インストール
composer require 'drupal/smart_trim:^2.2'
composer require 'drupal/smart_trim:^2.1'
概要
Smart Trimは、テキストField(text、text_long、text_with_summary、string、string_long)用の拡張Fieldフォーマッターを実装し、Drupal Coreの「Summary or Trimmed」フォーマッターを大幅に改善します。ティーザー、リスト、その他の要約表示でテキストコンテンツをどのように切り詰めるかを細かく制御できます。
このモジュールは、切り詰め時にHTMLコンテンツをインテリジェントに処理し、指定された長さにトリミングしながら有効なマークアップ構造を維持します。文字数またはワード数でトリミングでき、単語の途中で切れないように単語境界を高度に処理します。HTMLを保持する場合、モジュールは開いているタグを適切に閉じて有効なマークアップを維持します。
Smart Trimは、オプションの「もっと見る」リンク機能も提供し、カスタムテキスト、CSSクラス、アクセシビリティ用のaria-label、新しいウィンドウでリンクを開く機能など、広範なカスタマイズオプションがあります。このモジュールはTokenモジュールと統合し、リンクテキストやaria-labelに動的な値を使用できます。
開発者向けには、Smart TrimはテンプレートでTwigフィルター(smart_trim_charsとsmart_trim_words)を直接使用でき、プログラムによるテキスト切り詰め用のTruncateHTMLサービスも提供します。また、他のモジュールが「もっと見る」リンクをカスタマイズできるhook(hook_smart_trim_link_modify)も提供します。
Features
- インテリジェントな単語境界処理による文字数またはワード数でのテキストトリミング
- トリミングされたテキストに追加される設定可能なサフィックス(例:省略記号)、Unicode対応(\u2026)
- カスタマイズ可能なテキスト、CSSクラス、aria-label、ターゲットウィンドウ設定を備えたオプションの「もっと見る」リンク
- テキストコンテンツを保持しながらすべてのHTMLタグを削除するHTMLストリップオプション
- 切り詰め時に有効なマークアップ構造を維持するHTML保持オプション
- サマリーをそのまま使用、サマリーをトリミング、またはサマリーを無視するオプション付きのサマリーField処理
- 「もっと見る」リンクテキストとaria-labelフィールドでのToken置換サポート
- カスタムテンプレートで使用するためのTwigフィルター(smart_trim_charsとsmart_trim_words)
- カスタマイズ用の広範なテーマサジェスチョンを備えたテーマテンプレート(smart-trim.html.twig)
- 「もっと見る」リンクをプログラムで変更するためのHook API(hook_smart_trim_link_modify)
- ストリップ時のHTMLコメント、figcaption、script、styleタグの適切な処理
- サフィックス追加前の末尾句読点の自動削除
- サマリーを表示しながらコンテンツを完全に非表示にするゼロ長トリミングオプション
Use Cases
記事ティーザーの作成
記事コンテンツタイプのティーザー表示モードでBodyフィールドにSmart Trimを設定します。トリム長を300文字に設定し、省略記号サフィックス(\u2026)を使用します。「もっと見る」リンクを有効にし、テキストを「続きを読む」、aria-labelを「[node:title]の続きを読む」としてアクセシビリティを確保します。「HTMLをストリップ」を有効にして、埋め込みメディアやフォーマットがレイアウトに影響しないクリーンなテキスト出力を確保します。
ブログ投稿のワードベーストリミング
単語の複雑さに関係なく一貫したティーザー長が必要なブログ一覧ページでは、ワードベースのトリミングを使用します。50ワードにトリミングを設定して、読みやすさを維持しながら各ティーザーがほぼ同じ量のコンテンツを提供するようにします。
カスタムテンプレートでのTwigフィルターの使用
カスタムNodeテンプレートで、Twigフィルターを使用してField値を直接トリミングします:{{ content.field_description|render|smart_trim_chars(150, '...') }}。これは、カスタムブロックや複雑なレイアウトなど、Fieldフォーマッターを設定できないコンテキストでトリミングが必要な場合に便利です。
条件付きもっと見るリンク
「コンテンツがトリミングされた場合のみもっと見るリンクを表示」を有効にして、短いコンテンツに冗長なもっと見るリンクが表示されないようにします。これにより、実際に読むべきコンテンツがある場合のみリンクが表示される、よりクリーンなインターフェースが作成されます。
アクセシビリティ強化されたティーザー
もっと見るリンクに「[node:title]についての記事全文を読む」のような説明的なaria-labelを設定して、スクリーンリーダーユーザーに「もっと見る」を繰り返し聞かせるのではなく、リンク先のコンテキストを提供します。
サマリー対応の表示
text_with_summaryフィールド(Bodyなど)では、サマリー処理を「サマリーが存在する場合は使用し、トリミングしない」に設定します。これにより、作成者が提供したサマリーを尊重しながら、サマリーが存在しない場合は自動トリミングにフォールバックします。
ティーザー用ゼロ長トリミング
「ゼロトリム長を尊重」オプションとトリム長0を組み合わせて使用し、もっと見るリンクを表示しながらティーザーの本文コンテンツを完全に非表示にします。これは、タイトルともっと見るリンクのみを表示したい一覧ページに便利です。
Tips
- サフィックスフィールドで\u2026を使用すると、3つのピリオドの代わりに適切な省略記号文字(…)が表示されます
- テーマでsmart-trim.html.twigテンプレートをオーバーライドして、出力マークアップを完全に制御できます
- smart_trim__node__article__bodyなどのテーマサジェスチョンを使用して、Field固有のカスタマイズができます
- wrap_outputオプションは非推奨です。コンテンツのラップにはテンプレートオーバーライドを使用してください
- もっと見るリンクテキストでのToken置換により、動的でコンテキストに応じたリンクラベルが可能です
- TruncateHTMLサービスはカスタムコードに注入して、プログラムによるテキスト切り詰めに使用できます
- Twigフィルターを使用するとき、値がrender arrayの場合は最初に|renderでチェーンしてください:{{ value|render|smart_trim_chars(100) }}
Technical Details
Hooks 1
hook_smart_trim_link_modify
モジュールがSmart Trimの「もっと見る」リンクをレンダリング前に変更できるようにします。このhookは、もっと見るリンクが表示されるときにFieldフォーマッターのレンダリング中に呼び出されます。
Troubleshooting 6
EntityにID(データベースに保存済み)があり、カノニカルリンクテンプレートがあることを確認してください。Inline Entity Formのプレビューではリンクが表示されない場合があります。また、コンテンツがトリミングされていないときに「コンテンツがトリミングされた場合のみもっと見るリンクを表示」が有効になっていないか確認してください。
これはバージョン2.1.1で修正されました。最新バージョンに更新してください。モジュールは切り詰め処理中にHTMLエンティティのデコードを適切に処理するようになりました。
これはバージョン2.1.0で対処されました。モジュールは、単語が連結しないようにストリップ前に開始タグの前にスペースを追加するようになりました。
サフィックスフィールドでUnicodeエスケープシーケンスを使用してください。例えば、省略記号文字(…)には\u2026を使用します。これはバージョン2.1.1で改善されました。
もっと見るリンクテキストは設定翻訳を使用するようになりました。更新後にキャッシュをクリアし、設定翻訳インターフェースを使用して値を翻訳してください。
これはバージョン2.2.0で修正されたバグで、フォームステートが「body」という名前のフィールドでのみ機能していました。最新バージョンに更新してください。