 |
概要 | [details] をクリック可能であることをより分かりやすくするスタイル |
 |
プレビュー | Theme Creator経由 |
| : hammer_and_wrench: | リポジトリ | Ger / Component - Better Hide Details · GitLab |
| : question: | インストールガイド | テーマまたはテーマコンポーネントのインストール方法 |
| : open_book: | Discourseテーマ初心者の方へ | Discourseテーマ使用の初心者ガイド |
このテーマコンポーネントをインストール
説明
このコンポーネントは、[details] の見出しがボタンのように機能することをより明確にします。ネストされた詳細には、レベルごとに強い色が付けられ、各要素がどこで終わるかが明確になります。
スクリーンショット
Hide Details Button Style テーマコンポーネント使用時
Hide Details Button Style テーマコンポーネント不使用時
通常のインストールでコンポーネントがアクティブでない場合の表示です。
例で使用されているソース
[details=タイトル行]
コンテンツ
[details=閉じられたネストされたタイトル]
ネストされたコンテンツ
[/details]
[details=ネストされたタイトル]
さらにネストされたコンテンツ
[/details]
[/details]
[details=2番目の詳細]
さらにコンテンツ
[/details]
テキスト
[details=追加の詳細]
さらにコンテンツ
[/details]
(↑ Discourseメタのhide detailsのフォーマットについて、このインストールでテーマ設定に影響するものや、将来的な機能になる可能性があるものについては、あまり確信が持てません。)
特徴
[details]の開始/終了位置とクリック可能であることが明確になります。- 現在選択されている
[details]は、TAB キーで視覚的にハイライトされます。 - ネスト、連続する複数の
[details]など、多くのエッジケースが処理されます。 - エディタのプレビューでライブ表示されます。
- 「最近の返信」などのストリームで基本的な表示がされます。
- カラー スキームの三次色を使用します。
- 複数行のサマリー タイトル用の個別の矢印があります。
備考
- 所属する Discourse インスタンスのすべてのテーマでテストしましたが、問題なく動作しました。
- 比較的新しい CSS 機能を使用しているため、古いブラウザでは色が正しく表示されない可能性があります。
- 将来的に Discourse が
[details]の構造やスタイルを変更した場合、このテーマコンポーネントは壊れる可能性があります。
背景色を設定できる機能があるとより良いです。