シンプルタイムライン
カスタマイズ可能な配置とマーカーを備えたシンプルな縦型タイムラインにエンティティを表示するViewsスタイルプラグイン。
simple_timeline
インストール
composer require 'drupal/simple_timeline:^3.0'
composer require 'drupal/simple_timeline:8.x-2.0'
概要
Simple Timelineモジュールは、Viewで選択した任意のエンティティを視覚的に魅力的な縦型タイムライン形式でレンダリングできるViewsスタイルプラグインを提供します。このモジュールは軽量で、コアのViewsモジュールのみを必要とし、タイムラインの外観に関する柔軟な設定オプションを提供します。
タイムラインは、縦線で接続された円形マーカー付きのコンテンツアイテムを表示します。アイテムは交互（左右交互）、すべて左側、またはすべて右側のいずれかに配置できます。マーカーの位置は、各コンテンツアイテムの上部、中央、または下部に揃えるよう調整できます。
このモジュールはCSSオーバーライドによる高度なテーマカスタマイズが可能で、サイトビルダーはタイムラインの線の色、マーカーの外観（色、枠線、形状）、および全体的なスタイルをサイトのデザインに合わせてカスタマイズできます。
Features
- 縦型タイムライン表示用のViewsスタイルプラグイン
- 3つのアイテム配置モード：交互（ジグザグレイアウト）、左のみ、右のみ
- 3つのマーカー位置オプション：各行の上部、中央、下部
- ラッパー要素とリスト要素の両方にカスタムCSSクラスをサポート
- View固有のテンプレートオーバーライド用のテーマサジェスト
- CSSオーバーライドによる完全にカスタマイズ可能な外観
- 追加のスタイリング柔軟性のための奇数/偶数行クラス
- Viewsの行プラグインとカスタム行クラスをサポート
Use Cases
会社の沿革タイムライン
日付フィールドと説明を持つ歴史的イベント用のコンテンツタイプを作成します。日付でイベントをソートするViewを構築し、Simple Timelineスタイルを使用して会社の歴史を時系列で交互レイアウトで表示します。
プロジェクトマイルストーン
プロジェクトのマイルストーンやリリースノートをタイムライン形式で表示します。クリーンで直線的な進行ビューのために左配置アイテムを使用します。各マイルストーンは詳細なリリースノートにリンクできます。
ブログ記事アーカイブ
公開日を表示するタイムライン形式でブログ記事を表示します。投稿履歴を閲覧する際に視覚的な興味を引くために交互配置を使用します。
イベントスケジュール
今後または過去のイベントをタイムラインで表示します。すっきりとした外観のためにマーカー位置を「上部」に設定してイベントタイトルに揃えます。
経歴またはCV
キャリアの進歩、学歴、または人生のイベントを時系列で表示する個人または職業のタイムラインを作成します。
Tips
- テンプレートを変更せずにコンテナスタイリングを追加するにはラッパークラスオプションを使用してください
- タイムラインの色をオーバーライドするには、線にはul.timeline-list::afterを、マーカーにはspan.timeline-markerをターゲットにします
- 命名パターンviews-view-simple-timeline--[view-id]--[display].html.twigを使用してView固有のテンプレートを作成できます
- 交互レイアウトは視覚的バランスのために同様の高さのコンテンツアイテムで最適に機能します
- モバイルレスポンシブのために、小さい画面では交互配置から左/右配置に切り替えるCSSメディアクエリの追加を検討してください
- 「コンテンツ」や「フィールド」などのViews行スタイルと組み合わせて、各タイムラインアイテムに表示される内容を制御できます
Technical Details
Hooks 3
hook_help
ヘルプページにモジュールのヘルプテキストを提供します
simple_timeline_theme_suggestions_views_view_simple_timeline_alter
View IDと表示に基づいてSimple Timelineテンプレートのテーマサジェストを追加します
template_preprocess_views_view_simple_timeline
位置クラス、行クラス、奇数/偶数の指定を含むSimple Timelineテンプレート用の変数を準備します
Troubleshooting 4
スタイル設定で「交互配置」が選択されていることを確認してください。モジュールは奇数/偶数クラスを使用してアイテムを配置するため、CSSが正しく読み込まれている必要があります。
simple_timeline/timelineライブラリがアタッチされていることを確認してください。ページを検証してcss/timeline.cssが読み込まれていることを確認します。タイムラインの線はCSS ::after疑似要素を使用して作成されます。
マーカー位置の設定がデザインのニーズに合っていることを確認してください。カスタムの行の高さの場合、マーカー位置のCSSをオーバーライドする必要がある場合があります。
クラス名に有効なCSS文字（英字、数字、ハイフン、アンダースコア）のみが含まれていることを確認してください。スキーマはクラス名をパターン /^-?[_a-zA-Z]+[_a-zA-Z0-9-]*$/ に対して検証します。