 |
概要 | Markdown 引用の代替として、Obsidian スタイルのコールアウトを追加します。 |
 |
プレビュー | Theme Creator |
 |
リポジトリ | GitHub - Arkshine/discourse-quote-callouts · GitHub |
 |
インストールガイド | テーマまたはテーマコンポーネントのインストール方法 |
 |
Discourse テーマに初めての方へ | Discourse テーマの使い方に関する初心者向けガイド |
このテーマコンポーネントをインストール
このテーマコンポーネントは、Discourse において Markdown 引用の代替として Obsidian スタイルのコールアウト のサポートを追加します。
コールアウトは、コンテンツを強調表示したり、投稿に注意事項、警告、その他の特別なメッセージを追加したりするのに最適な方法です。
使用方法
コールアウトを作成するには、いくつかの方法があります。
Markdown 構文
引用の最初の行に [!type] を追加します。ここで type はタイプ識別子です。タイプ識別子によって、コールアウトの外観や動作が決定されます。利用可能なすべてのタイプについては、「サポートされているタイプ」を参照してください。
> [!tip]
> **ヒント**: 可読性を向上させるために `コードスニペット` を使用してください。これらは明確さと正確さを提供します。
プレビュー
アイコンをクリックしてタイプを変更できます：
リッチテキストエディタ
現在、完全にサポートされています。詳しくは「リッチテキストエディタのサポート」セクションを参照してください。
キーボードショートカット
- Ctrl + q — 空のコールアウトを挿入
ツールバー
チャット
ツールバーにデフォルトのコールアウトを挿入するボタンがあります。
カスタムタイトル
デフォルトでは、コールアウトのタイトルはタイトルケースに変換されたタイプ識別子になります。タイプ識別子の後にテキストを追加することで、タイトルを変更できます。
> [!question] カスタムラベル 🤗
> コールアウトのラベルはカスタマイズ可能です。
> [!abstract] [date=2032-12-22 timezone="Europe/Paris"]
> これらは動的な日付などの特別なインライン書式を含むこともできます。
タイトル専用のコールアウトを作成することもできます。
> [!success] 解決済み。
折りたたみ可能なコールアウト
タイプ識別子の直後にプラス記号 + またはマイナス記号 - を追加することで、コールアウトを折りたたみ可能にできます。
+はデフォルトでコールアウトを展開します-は代わりに折りたたみます
> [!todo]- 私のToDoリスト
>
> - [x] ドキュメントの作成
> - [ ] テストの追加
> - [ ] コードのレビュー
> [!todo]+ 展開されたToDoリスト
>
> - [x] リポジトリの作成
> - [ ] CI/CDのセットアップ
> - [ ] 本番環境へのデプロイ
ネストされたコールアウト
コールアウトを複数のレベルでネストできます。
> [!question] コールアウトはネストできますか？
>
> > [!todo] はい、できます。
> >
> > > [!example] 複数のネスト層を使用することもできます。
> [!tip]
> これは役立つヒントです
>
> > [!info]
> > 追加情報
> >
> > > [!example]
> > > そしてネストされた例
>
> メインのヒントに戻ります
サポートされているデフォルトタイプ
いくつかのコールアウトタイプとエイリアスを使用できます。
各タイプには、異なる背景色とアイコンが付属しています。
callouts設定を参照してください。
noteタイプになります。詳細については、「デフォルトのフォールバック」セクションを参照してください。
| タイプ | 説明 | エイリアス |
|---|---|---|
note |
一般的なメモや情報用 | - |
abstract |
要約や抽象セクション用 | summary, tldr |
info |
情報コンテンツ用 | - |
todo |
タスクリストやToDoアイテム用 | - |
tip |
ヒントや重要な情報用 | hint, important |
success |
成功メッセージ用 | check, done |
question |
質問やFAQ用 | help, faq |
warning |
警告用 | caution, attention |
failure |
失敗通知用 | fail, missing |
danger |
危険またはエラーメッセージ用 | error |
bug |
バグレポートや既知の問題用 | - |
example |
例用 | - |
quote |
引用用 | cite |
カスタマイズ
アイコン
FontAwesome のアイコンを使用するか、直接 SVG 要素を提供できます。
SVG 要素
無料版のFontAwesomeには多くの選択肢がありますが、時として制限を感じるかもしれません。
SVG 要素 <svg>...</svg> を提供できます。
例：Lucide アイコン – ストローク幅を選択できるという利点のある素晴らしいセットです。
- アイコンを選択
- ストローク幅を調整
- SVG をコピー をクリック
- テーマコンポーネントの設定に移動し、内容を貼り付け
デフォルトのフォールバック
指定されたコールアウトタイプが見つからない場合に使用するためのデフォルト値を、以下の設定で設定できます。
callout_fallback_typecallout_fallback_iconcallout_fallback_color
> [!discourse is fantastic]
> はい。
グローバル設定
コールアウトのさまざまな側面を以下を通じてカスタマイズできます。
- 背景の不透明度
- 境界線のプロパティ（幅、スタイル、色、半径）
- パディング
- タイトルのフォントプロパティ（サイズ、太さ）
- アイコンとタイトルの間のスペース
コールアウトごとの設定
各コールアウトタイプは以下でカスタマイズできます。
- カスタムアイコン
- タイトルテキスト
- カラーテーマ
- 境界線プロパティ
詳細については、以下の「設定」セクションを参照してください。
設定
リスト
| 設定 | 説明 |
|---|---|
| callouts | コールアウトを定義します。 |
| callout_fallback_type | 指定されたタイプが見つからない場合に使用するデフォルトのコールアウトタイプ。 デフォルト値: note |
| callout_fallback_icon | 指定されたタイプが見つからない場合に使用するデフォルトアイコン。 デフォルト値: far-pen-to-square |
| callout_fallback_color | 指定されたタイプが見つからない場合に使用するデフォルト色。 デフォルト値: #027aff |
| callout_background_opacity | コールアウトのグローバル背景不透明度（1〜100）。 デフォルト値: 10 |
| callout_border_width | コールアウトのグローバル境界線幅。 デフォルト値: empty |
| callout_border_style | コールアウトのグローバル境界線スタイル。 デフォルト値: empty |
| callout_border_color | コールアウトのグローバル境界線色。 デフォルト値: empty |
| callout_border_radius | コールアウトのグローバル境界線半径。 デフォルト値: var(--d-border-radius) |
| callout_padding | コールアウトのグローバルパディング。 デフォルト値: 0.75em 0.75em 0.75em 1.5em |
| callout_title_font_size | コールアウトタイトルのグローバルフォントサイズ。 デフォルト値: inherit |
| callout_title_font_weight | コールアウトタイトルのグローバルフォント太さ。 デフォルト値: bold |
| callout_title_gap | コールアウトアイコンとタイトルの間のグローバルギャップ。 デフォルト値: 0.5em |
| callout_icon_sizep | コールアウトアイコンのグローバルサイズ。 |
| callout_transition_duration_ms | 開閉アニメーションの持続時間（ミリ秒）。 |
| svg_icons | このテーマコンポーネントで使用される FontAwesome 6 アイコンのリスト。 |
コールアウトごとの設定ページ:
| 設定 | 説明 |
|---|---|
| Type* | コールアウトのタイプ。 この識別子はコールアウト構文 [!type] で使用されます。 |
| Alias | コールアウトのエイリアス（| で区切ります）。例: cite|quote |
| Icon | コールアウト用の FontAwesome アイコン。 デフォルトサブセットにない場合は、 svg_icons 設定に追加する必要がある場合があります。または、 <svg>...</svg> のように SVG 要素を直接提供することもできます。 |
| Icon size | コールアウトアイコンのサイズ。 注: 有効な CSS 値のみを使用してください（例: 1em, 16px, 1.5rem）。 |
| Title | コールアウトのタイトル。 コールアウトにタイトルが指定されていない場合、この設定が使用されます。 注: 両方が空の場合、タイトルはコールアウトタイプになります。 |
| Color | コールアウトの色。 これは背景、タイトル、アイコンに使用されます。 注: 16 進カラーコードのみを使用してください（例: #027aff）。 |
| Border width | コールアウトの 境界線幅。 |
| Border style | コールアウトの 境界線スタイル。 |
| Border color | コールアウトの 境界線色。 重要: rgba のような CSS 関数を使用してアルファ値を生成する場合は、値間にスペースを使用しないようにしてください（例: rgba(145,145,145,0.1)）。 |
| Border radius | コールアウトの 境界線半径。 |
* 必須設定
リッチテキストエディタのサポート
このコンポーネントは、Discourse のリッチテキストエディタをサポートしており、コールアウトの作成、編集、整理が容易になりました。
コールアウトの作成
コールアウトを複数の方法で挿入できます。
- キーボードショートカット: Ctrl + Q
- ツールバーボタン
- 入力ルール:
/callout<:type>!!<type>
- 貼り付けサポート
ビデオ
コールアウトの編集
コールアウトを編集するためのコントロールは、選択した後にのみ表示されます。
-
タイプ選択器
アイコンをクリックすると、フローティングメニューが表示されます。 -
カスタムタイトル
インライン書式と絵文字をサポート -
折りたたみ
コールアウトを折りたたみ可能に設定します。オプションメニューからアクセスできます。
ビデオ
移動コントロール
-
デスクトップ
- ハンドルを使用したドラッグ＆ドロップ
-
タッチデバイス
- コールアウトを上下に移動
- 隣接するコールアウト内にネスト
- デフォルトでは無効（オプションで有効化可能）
ビデオ
キーボードナビゲーション
ネストされたコールアウト内のナビゲーションを改善します。
- タイトルの先頭で ← を押すと、タイプ選択器が開きます
- 空の領域内で ↑ / ↓ を押すと、段落が作成/削除されます
- タイトル内で Enter を押すと、カーソルが本文に移動します
ビデオ
クリックして挿入
- 空の領域をクリックして段落を作成
- オプションのボタンを使用して、コールアウト内または外にコンテンツを挿入
ビデオ
ロードマップ
今後の開発計画には以下が含まれる可能性があります。
- 入力時のタイプ補完
テーマ/コンポーネントにエラーがあるため、サイトが機能しない可能性があります。
