大家好！我正在部分使用 Discourse 作为我的兴趣小组的维基——我非常希望拥有信息框，以真正将这些文章提升到一个新的水平。
有人将此集成到 Discourse 中了吗？我找不到任何插件或主题组件。
我发现有人在 Obsidian 上成功了一个类似维基的信息框模板——所以也许这是一个不错的起点。
2 个赞
或许可以使用通用的 BBCode 包装器。
创建一个 Customization > 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]
> ## 信息框
测试框
[/wrap]
将「red」替换为相应的颜色。对于灰色，只需使用「box」。
注意 2： 如果使用 BBCode 颜色，可通过 Customization > Plugin 或 Customization > Theme component 实现，而无需使用「>」（需要空行作为分隔符），或者也可以使用 bgcolor=。
彩色文本主题组件 由于这是一个主题组件，因此无论托管环境如何都可以安装。
有 2 个 #plugins 支持 BBCode 颜色：BBCode 颜色 或 格式化工具栏。警告 仅安装其中一个插件；我认为格式化工具栏会警告，同时安装两者会导致网站崩溃。
改进的代码添加了背景颜色
- 请注意，此代码包含先前帖子的所有代码。
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;
}
在帖子中使用此代码以获得背景颜色框：
[Wrap="redboxbg"]
> 信息框
测试框
[/wrap]
新的背景颜色选项将“red”替换为：
- “green”、“blue”、“yellow”
彩色背景。灰色边框。
- “grey”、“grey#” #=1-4。
*所有灰色背景，灰色边框，1个红色边框，2个绿色边框，3个蓝色边框，4个黄色边框
