BB代码

BB代码​

BB 代码是一种广泛使用的标记系统，它允许使用不同的字体、颜色和大小以及其他功能（如加粗或斜体文本）来格式化文本。它松散地基于HTML标记，因此例如定义粗体文本的 BB 代码是，您可以像这样使用它来使用它来加粗单词bold：

This message contains some bold text.

它还可以用于更复杂的结构，例如引用其他用户的消息、添加剧透或代码块。在这些情况下，可以为 BB 代码提供一个选项，如下所示：

This message contains some text in a font called Helvetica...

自定义 BB 代码​

除了 XenForo 附带的标准 BB 代码外，您还可以定义自己的代码。

自定义 BB 代码管理器列出了您论坛上可用的所有自定义 BB 代码，并允许您创建自己的代码。您还可以使用此处提供的切换和删除小工具删除或暂时禁用任何自定义 BB 代码。

您可以使用管理页面顶部的控件导入和导出多个自定义 BB 代码。

自定义 BB 代码编辑器​

单击自定义 BB 代码的标题将带您进入该 BB 代码的编辑器，您可以在其中准确布置您希望 BB 代码如何运行。

在这个例子中，我们将创建一个 BB 代码，它将在标记文本周围绘制一个框，并允许用户为框指定颜色。

我们将 BB 代码称为“box”，旨在能够转换此文本：

输入：[BOX="red"]Here is some text in a red box[/BOX]

进入这个 HTML：

输出：<div style="background-color: red">Here is some text in a red box</div>

BB代码标签​

在此处输入将触发您的 BB 代码的关键字。在我们的示例中，这是“BOX”。

标题​

我们称之为“彩色盒子”

更换方式​

对于我们的示例，我们将使用一个简单的替换.

PHP 回调可用于更复杂的替换，这些替换涉及运行 PHP 代码以确定输出 HTML 应该是什么。这更像是一个开发者选项。如果使用它，则应使用下面提供的类和方法字段指定回调。

支持选项参数​

由于我们需要用户定义颜色，所以我们必须在这里使用Yes。

如果我们定义的 BB 代码不需要或不支持某个选项，我们会将其设置为Optional或No。

HTML 替换​

在这里，我们输入将在使用时替换我们的 BB 代码的 HTML。我们将需要使用特殊标记{option}并{text}分别表示选项的值和文本的内容。

我们的替换 HTML 将如下所示：

<div style="background-color: {option}">{text}</div>

编辑器图标​

您可能希望您的用户能够简单地在他们的文本编辑器中单击一个按钮来插入您的 BB 代码。如果是这样，请指定一个Font Awesome图标或用于您的按钮的图像，否则将其保留为None并且 BB 代码将只能通过直接键入来使用。

示例用法和输出​

使用这些框来提供将使用您的自定义 BB 代码的内容的示例，以及该示例将输出的内容。您可以使用上面提供的输入/输出示例。

在签名中允许此 BB 代码​

有些BB码又大又讨厌，不适合用在用户签名中。您可以通过取消选中此框来防止在签名中使用任何自定义 BB 代码。

高级选项​

在高级选项部分下，您将找到允许您进一步优化自定义 BB 代码的控件。

选项匹配正则表达式​

允许您定义一个正则表达式来限制选项值的可接受值。对于我们的例子，我们可以使用一个只允许字母数字字符的正则表达式，这样就只能使用命名的颜色。

在这个 BB 代码中​

此处的选项允许您阻止 BB 代码中的笑脸解析、防止换行符被转换、禁用超链接的自动解析以及停止解析此 BB 代码的文本组件中的任何其他 BB 代码。

修剪换行符​

您可以使用此选项来防止在使用 BB 代码后留下大量空白。值为0时，不允许额外的换行符，因此您的 HTML 输出应该考虑到这一点。

HTML 电子邮件和文本替换​

当最终格式为 HTML 电子邮件或纯文本时，您可能需要不同的输出。使用这些框来定义替代输出，使用{option}和{text}以前一样。

BB码媒体网站​

BB 代码媒体网站是一种方式，可以将指向外部网站（例如 YouTube 或 Instagram）上托管的内容的链接自动转换为用户消息中的嵌入式媒体。

XenForo 附带了一组预定义的 BB 代码媒体站点，用于流行的资源，包括 Facebook、Twitter、Flickr 和 Spotify。

如果在XenForo 选项系统的媒体嵌入部分下启用了自动嵌入媒体链接选项，则用户消息中发布的链接将被自动处理并变成嵌入媒体。

BB码媒体站长​

在 BB 代码媒体站点管理器中，您可以查看所有可用的媒体站点，并通过单击切换小工具暂时禁用每个站点。您还可以删除网站或添加新网站。

单击 BB 代码媒体站点的标题将加载该站点的编辑器。

BB码媒体网站编辑​

BB 代码媒体站点的工作原理是从用户发布的 URL 中提取数据并将其转换为可用于将引用媒体嵌入消息中的 HTML 片段。在某些情况下，这是获取一段 URL 并将其插入 HTML 中的简单情况，而在其他情况下，需要进一步的步骤将 URL 转换为可用的 HTML。

这可能是一个复杂的过程，但出于本文档的目的，我们将看一个相对简单的示例：Pinterest，这很简单，因为 Pinterest URL 包含我们创建嵌入式 HTML 所需的所有信息。

匹配网址​

在此框中，我们定义了所有我们希望转换为嵌入式 HTML 的 URL。每个 URL 单独一行，并包含一个{id}标记，代表我们感兴趣的数据。

在 Pinterest 的例子中，数据总是一个数字，所以我们扩展{id}到{id:digits}，这将强制模式只匹配整数。另一个可用的扩展名是{id:alphanum}，它将匹配仅限于数字和字母。您可以在匹配 URL 中使用 a*作为通配符来匹配任何内容。

在Advanced options下有一个设置允许这些匹配 URL 是正则表达式。如果您使用正则表达式，则每一行都必须定义定界符和开关。

嵌入模板​

此框用于定义在找到匹配 URL 时将输出的 HTML。您可以使用任何 HTML，但最好将您的输出包装在<div class="bbMediaWrapper"><div class="bbMediaWrapper-inner">大多数默认 XenForo 站点使用的代码中，因为这会处理样式以匹配站点的其余部分，

在您的 HTML 中，您可以使用{$id}来引用{id}匹配 URL 获取的值。您也可以在匹配 URL 中使用{$idDigits}或如果您使用了这些扩展名。{$idAlphanum}

对于 Pinterest，重要的部分是属性href，我们将链接的来源定义为https://www.pinterest.com/pin/{$idDigits}，利用匹配 URL 获取的数据。

o嵌入​

oEmbed 是一种开放格式，允许站点返回有关 URL 的信息，包括嵌入的 HTML。在某些情况下，当无法直接从 URL 构造嵌入 HTML 时，可以使用 oEmbed 查询站点以获取 oEmbed 数据并以这种方式获取 HTML。

为了使用 oEmbed，您必须知道您正在查询的站点的 oEmbed API 端点，以及他们的 API 期望的 URL 格式。

例如，Flickr 的 oEmbed API 端点位于https://www.flickr.com/services/oembed，它们的 URL 方案是https://flic.kr/p/{$id}，其中（再次）{$id}表示匹配 URL 匹配的数据。

最后，您必须决定是否执行从 oEmbed 站点返回的任何 Javascript 代码以及嵌入的 HTML。如果您决定不允许运行外部 Javascript，则必须使用您自己的 Javascript 例程处理嵌入式 HTML 所需的任何初始化。

有关 oEmbed 的更多信息，请访问 oEmbed.com，包括定期更新的使用 oEmbed 的站点列表。

高级选项​

有时，为了获得可用的嵌入 HTML，甚至需要进一步处理。在这些情况下，PHP 回调可用于匹配和嵌入目的。

详细介绍其工作原理超出了本文档的范围，但开发人员将能够检查默认 XenForo 安装中使用匹配和嵌入回调的站点的代码。

BB代码按钮管理器​

当使用 XenForo 文本编辑器撰写消息时，提供的控件允许用户使用他们选择的样式轻松地格式化他们的文本。

编辑器中按钮的布局可通过 BB 代码按钮管理器自定义，位于管理控制面板中的Content > BB code > BB code button manager。

在主按钮管理器页面上，列出了几个编辑器工具栏，以及各种下拉菜单。

编辑器下拉菜单​

下拉菜单是一个按钮，单击它会展开以显示其他按钮。

单击现有下拉列表或单击添加下拉列表以进入下拉编辑器。

在下拉编辑器中，您必须提供一个命令 ID（仅供内部系统识别使用）以及一个标题和一个Font Awesome图标类名称，例如fa-align-center，它将用作按钮的图形表示。

要定义下拉菜单的内容，请将按钮从可用按钮区域拖动到下拉按钮区域，然后按照您认为合适的方式排列它们。显示的第一个图标将首先显示在下拉列表中。

完成所有编辑后，点击保存按钮以提交更改。

编辑器工具栏​

每个工具栏都列出了一个大小范围。此范围表示浏览器窗口的宽度（以像素为单位），工具栏将以该宽度显示。

实际范围可能会发生变化，但在撰写本文时，当浏览器窗口测量 900 像素宽或更大时，会显示大工具栏。将工具栏缩小到此大小以下将激活中工具栏，直到窗口宽度小于 575 像素，此时将使用小工具栏。在 420 像素的视口宽度下方使用了一个额外的小工具栏。

单击任何工具栏将打开该工具栏的编辑器。

窗口顶部是可用按钮和下拉菜单的“池” 。这些按钮和下拉菜单中的任何一个都可以从“池”中拖到下面的可用插槽之一中，其中的按钮可以按适当的顺序拖动。

每个插槽都有一组控件，其中可以定义组的对齐方式和可见按钮的数量，它控制在将其他按钮推送到“更多”工具栏之前为每个工具栏组显示的按钮数量，使用每个按钮组旁边的垂直省略号控件进行访问。

已完成工具栏的预览显示在页面底部。

完成所有编辑后，点击保存按钮以提交更改。