皆さん、こんにちは！関心のあるグループのウィキとしてDiscourseを部分的に使用しています。これらの記事を次のレベルに引き上げるために、インフォボックスを本当に使いたいと思っています。
誰かがDiscourseにこれを統合しましたか？プラグインやテーマコンポーネントが見つかりません。
Obsidianでウィキ風インフォボックステンプレートを動作させた人を見つけました。おそらくそこから始めるのが良いでしょう。
「いいね！」 2
Generic Bbcode ラッパーを使用します。
Theme component を作成し、これを CSS Common に追加します。
div[data-wrap="redbox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
//* 背景色を変更するには下の行のコメントを解除します。ただし、その場合は bbcode の背景色を使用できるはずです。
// background-color: var(--secondary);
//* ボックスの色と太さ
border: 2.5px solid #ff0000;
border-radius: 0.40em;
}
div[data-wrap="greenbox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
// background-color: var(--secondary);
border: 2.5px solid #00ff00;
border-radius: 0.40em;
}
div[data-wrap="bluebox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
// background-color: var(--secondary);
border: 2.5px solid #0000ff;
border-radius: 0.40em;
}
div[data-wrap="yellowbox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
// background-color: var(--secondary);
border: 2.5px solid #ffff00;
border-radius: 0.40em;
}
div[data-wrap="box"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
// background-color: var(--secondary);
border: 2.5px solid #808080;
border-radius: 0.40em;
}
注: 異なる色用に上記のコードのコピーをいくつか作成しました。例: 「greenbox」、「yellowbox」、「bluebox」、および「box」（グレー）
投稿での使用方法
[wrap=redbox]
> ## Info box
Testing boxes
[/wrap]
「red」を適切な色に置き換えてください。グレーの場合は「box」のみを使用します。
注2: 「bbcode color #plugin」または「#theme-component」を使用する場合、「>」（空行が必要）を使用する代わりに、「bgcolor=」を使用することもできます。
Colored Text TC これはテーマコンポーネントであるため、ホスティングに関係なくインストールできます。
Bbcode color をサポートする #plugins は 2 つあります。Bbcode color または Formatting Toolbar。警告 これらのプラグインはどちらか一方のみをインストールしてください。Formatting Toolbar は、両方をインストールするとサイトが壊れると警告していると思います。
改良されたコードは背景色を追加します
- このコードには、前の投稿のすべてのコードが含まれています。
CSS共通のコード
div[data-wrap="redbox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
border: 2.5px solid #ff0000;
border-radius: 0.40em;
}
div[data-wrap="greenbox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
border: 2.5px solid #00ff00;
border-radius: 0.40em;
}
div[data-wrap="bluebox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
border: 2.5px solid #0000ff;
border-radius: 0.40em;
}
div[data-wrap="yellowbox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
border: 2.5px solid #ffff00;
border-radius: 0.40em;
}
div[data-wrap="box"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
border: 2.5px solid #808080;
border-radius: 0.40em;
}
div[data-wrap="redboxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #ff0000;
border: 2.75px solid #808080;
border-radius: 0.40em;
}
div[data-wrap="greenboxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #00ff00;
border: 2.75px solid #808080;
border-radius: 0.40em;
}
div[data-wrap="blueboxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #0000ff;
border: 2.75px solid #808080;
border-radius: 0.40em;
}
div[data-wrap="yellowboxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #ffff00;
border: 2.75px solid #808080;
border-radius: 0.40em;
}
div[data-wrap="greyboxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #808080;
border: 2.75px solid #808080;
border-radius: 0.40em;
}
div[data-wrap="grey1boxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #808080;
border: 2.75px solid #ff0000;
border-radius: 0.40em;
}
div[data-wrap="grey2boxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #808080;
border: 2.75px solid #00ff00;
border-radius: 0.40em;
}
div[data-wrap="grey3boxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #808080;
border: 2.75px solid #0000ff;
border-radius: 0.40em;
}
div[data-wrap="grey4boxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #808080;
border: 2.75px solid #ffff00;
border-radius: 0.40em;
}
bgcolorボックスの投稿にはこのコードを使用します：
[Wrap="redboxbg"]
> インフォボックス
テストボックス
[/wrap]
新しい背景色のオプション「red」を次のいずれかに置き換えます：
- 「green」、「blue」、「yellow」
カラー背景。グレーの境界線。
- 「grey」、「grey#」 #=1-4。
*すべてのグレー背景、グレーの境界線、1赤の境界線、2緑の境界線、3青の境界線、4黄色の境界線
