Wikis 模板（尤其是信息框对象模板）

[hazenbiz (Hazen Ellwood)]

大家好！我正在部分使用 Discourse 作为我的兴趣小组的维基——我非常希望拥有信息框，以真正将这些文章提升到一个新的水平。

有人将此集成到 Discourse 中了吗？我找不到任何插件或主题组件。

我发现有人在 Obsidian 上成功了一个类似维基的信息框模板——所以也许这是一个不错的起点。

[Heliosurge (Dan DeMontmorency)]

也许可以使用通用的 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]
> ## 信息框

测试框
[/wrap]

将“red”替换为适当的颜色。对于灰色，只需使用“box”。

---

注意 2； 如果使用 bbcode 颜色 Plugin 或 Theme component，则使用“>”（需要空行作为分隔符）或使用 bgcolor=

彩色文本 TC 由于这是一个主题组件，无论托管如何都可以安装。

有两个 #plugins 支持 Bbcode 颜色。 Bbcode 颜色 或 格式工具栏。 警告 只安装其中一个插件；我认为格式工具栏会警告同时安装两者会破坏您的网站。

[Heliosurge (Dan DeMontmorency)]

改进的代码添加了背景颜色

• 请注意，此代码包含先前帖子的所有代码。

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个黄色边框

移动端截图