wiki

BBCode

BBCode 是一种标记语言,用于 osu! 论坛乃至互联网上的绝大多数论坛。它通过标签包裹文本来实现富文本格式,包括设置格式、属性、嵌入内容等等。在 osu! 网站上,BBCode 被广泛应用于论坛帖子、个性签名、玩家主页以及谱面描述等多处。

论坛中的编辑器与按钮论坛中的编辑框

行为

在未选中任何文本的情况下点击格式按钮,会在编辑器光标位置插入一组成对的标签。若先选中文本再点击按钮,则所选文本会被标签包裹。

若需对同一段文本应用多种格式,可以在 BBCode 标签内嵌套使用其他标签。然而,标签的顺序和配对必须一一对应,错位将导致格式失效。

以下是正确和错误嵌套的示例:

  • [centre][b]文本[/b][/centre] 正确
  • [b][centre]文本[/b][/centre] 错误

对齐

对齐标签用于控制文本与 BBCode 元素的水平位置。当对齐标签位于一对 [quote] 内部或将其包围时,引用块内的文本会按对齐标签进行对齐,但引用块的垂直线依然会显示在左侧。

左对齐

[left]text[/left]

[left] 用于使内容靠左对齐。默认情况下,所有内容都是左对齐的。

居中对齐

[centre]text[/centre]

[centre] 用于使内容居中对齐。这种用法在标题、页眉、诗歌中最常见,可用来达成风格效果。

右对齐

[right]text[/right]

[right] 用于使内容靠右对齐。

标签

像其他许多标记语言一样,BBCode 使用标签系统格式化文本,标签两侧有一对方括号 ([])。标签分为“起始标签”和“结束标签”两种,区别在于后者包含正斜杠 (/),而前者没有。

同样需要注意的是,某些起始标签内会出现等号 (=),用于指定网址、字体大小等参数。

下面列出了在 osu! 网站内支持的 BBCode 标签及其详细说明。

粗体

[b]文本[/b]

[b] 标签用于将文本加粗以强调。BBCode 加粗不会影响字体大小。

工具栏按钮:加粗按钮

斜体

[i]文本[/i]

[i] 标签用于将文本倾斜(即斜体)以轻度强调文本。

工具栏按钮:斜体按钮

下划线

[u]文本[/u]

[u] 标签用于在文本下方添加水平线(即下划线)以强调。下划线样式会受到加粗、斜体等其他标签的影响。

删除线

[s]文本[/s]

[s] 用于在文本中间添加水平线以示删除(即"删除线")。也可以用 [strike] 来替代。

工具栏按钮:删除线按钮

颜色

[color=#HEXCODE]文本[/color]

关于所有颜色名,参见:X11 颜色名

[color] 标签用于为文本设置各种网页安全色(即在不同硬件、操作系统和浏览器上均能一致显示的标准颜色集合)。标签使用颜色的十六进制数字表示法来指定颜色,但也可以使用 "red" 或 "green" 等 HTML 颜色名称。使用时将标签中的 #HEXCODE 参数替换为相应的十六进制码或 HTML 名称即可。

#HEXCODE 参数前后不需要添加引号 ("),也没有默认颜色。若未指定参数或使用了引号,则该标签不会被解析为 BBCode。

字体大小

[size=大小]文本[/size]

[size] 标签用于调整文本的字号大小。

大小 参数表示相对于默认字号(100%)的百分比。例如,50 将文本缩小为默认大小的一半,150 则放大至 1.5 倍。参数不加引号,接受两种取值方式:

  • 30 到 200 之间的整数(不支持小数)
  • 预定义字号关键词:"tiny"(极小)、"small"(小)、"normal"(正常)、"large"(大),分别对应 50、85、100、150

若提供无效值,标签将无法生效。

工具栏按钮可快速设置这四种常用字号。

工具栏按钮:字体大小设置

剧透条

注:剧透条也叫做涂黑条。不要与剧透框相混淆。

[spoiler]文本[/spoiler]

[spoiler] 标签用于以黑色色块遮盖敏感信息,选中后即可显示下方文本。即使与 [color] 标签叠加使用,黑色遮罩也不会受影响,但遮罩下的文本仍会按指定颜色显示(无论是否可读)。

此标签常用于隐藏剧集、电影等媒体的关键或敏感信息,也可以用于添加幽默效果或强调。

折叠框

备注: 不要与剧透框相混淆。

[box=NAME]
文本
[/box]

[box] 标签用于将文本和图片隐藏至可点击的链接内。点击链接后,内容会像下拉菜单一样展开。

NAME 参数可填写自定义的链接文本。指定该参数会在折叠框上生成标题,并相应调整框体大小。如果不指定该参数,则会生成无标题的折叠框。NAME 参数前后不需要添加引号 ("),并且空格也会被渲染。

此标签常用于隐藏大段的文本和图片,避免帖子过长。常见于 FAQ 帖或皮肤发布帖。

注意:BBCode 的折叠框工具栏按钮不会创建 [spoilerbox] 标签。

工具栏按钮:折叠框按钮

剧透框

[spoilerbox]文本[/spoilerbox]

剧透框 是一类特殊的,不包含 NAME 参数的 BBCode 折叠框,无法自定义 NAME 参数,其标题固定显示为 SPOILER。剧透框有专属的标签 ([spoilerbox]),但是功能上与普通的折叠框完全一致。

引用

[quote="NAME"]
文本
[/quote]

[quote] 标签用于格式化长引用(即“块引用”),通过缩进、着色、加粗以及粉色竖线分隔来突出显示。引用的内容位于开始和结束标签之间,NAME 参数用于标记引用的来源作者(可选)。引文中的空格和换行会被保留。

注意:NAME 参数前后必须添加引号 (")。

长引用通常用于较为正式的场合,当引文达三行或以上时替代行内引用。然而,在 osu! 论坛内,长引用则通常用于回复其他玩家的评论。这可以通过使用评论右上角的“引用回复”按钮来自动完成(如下所示)。不过这个按钮只有当光标位于评论右上角附近时,才会出现。

引用回复按钮:引用回复按钮

行内代码

注意:不要与代码块相混淆。

[c]文本[/c]

[c] 标签用于以等宽字体高亮行内文本。在 osu! 网站内,文本会被灰色框包围。与代码块不同,此标签仅用于单行内。

在 osu! 论坛内,此标签常用于强调键盘快捷键或按钮名称等。

代码块

注意:不要与行内代码相混淆。

[code]
文本
[/code]

[code] 标签用于创建预格式化代码块。在 osu! 网站内,[code] 标签内的文本会以等宽字体显示,并置于半透明灰色框中。代码块内的文本会被原样保留,其中的标签或代码不会被转换成其他内容。

在 osu! 论坛内,代码块常用于展示故事板的源代码,或在教程中展示标签、命令或源代码的语法。

URL

[url=链接]文本[/url]

[url] 标签用于将普通文本转换为可点击的超链接。

注:若不想使用自定义链接文本,则无需使用此标签,因为论坛编辑器会自动将符合格式的网址解析为链接。

使用 [url] 标签创建超链接时,需指定两个参数:目标网址(作为 链接 参数填入)和显示文本(放在起始和结束标签之间)。链接 参数不加引号(")。若未提供显示文本,链接将无法正确显示。

也支持 [url]链接[/url] 的写法,但由于纯文本网址会被自动解析,此用法基本冗余。

注意:所有网址——无论是用 [url] 标签还是纯文本——都必须为有效链接,且包含协议头(http://、https://、ftp://)或 www. 前缀,否则该标签将不会正常工作。

工具栏按钮:URL 按钮

主页

[profile=userid]玩家名[/profile]

[profile] 标签用于通过玩家 ID 或玩家名链接到对应的玩家主页。与普通网址链接不同,悬停在此标签上会显示交互式的用户卡片。

使用该标签时需指定两个参数:玩家的数字 ID(作为 userid 参数填入,不加引号)和玩家名(放在标签之间)。

为了最佳效果,请同时提供正确的玩家 ID 和对应的玩家名。这样既能确保链接正常工作,也能在玩家改名后依然有效。如果只指定玩家名,该玩家改名后链接将失效。

在论坛、个性签名或谱面描述中使用该标签时,如果提供的 玩家名 无效,或 userid 参数无效/缺失,网站会在保存内容时自动修正 [profile] 标签中的这两项内容。因此,你其实只需要知道玩家 ID 或玩家名,就可以快速插入玩家主页链接,无需同时查找这两项信息。

注:玩家 ID 是 osu! 玩家主页的网址中 /users/ 后面那串数字。

格式化列表

[list] 列表标题
[*]item 1
[*]item 2
[*]item 3
[/list]

或

[list=TYPE] 列表标题
[*]选项 1
[*]选项 2
[*]选项 3
[/list]

[list] 标签用于在 osu! 论坛中自动格式化两种不同类型的列表。每个列表项前用 [*] 标记。默认生成的是无编号的项目符号列表(即无序列表)。

如果 TYPE 参数被指定(无论是什么值),则会生成编号列表(即有序列表)。

可选的 列表标题 参数可在列表上方添加一个缩进的标题。若省略,则不显示标题。

注意:BBCode 列表可以相互嵌套,但有时可能导致格式问题。

工具栏按钮:无序列表按钮 有序列表按钮

邮箱

[email=地址]文本[/email]

[email] 标签用于创建一个可点击的邮箱链接。点击后,会打开用户的默认邮件客户端,并自动填入收件人地址。

使用时需指定两个参数:邮箱地址(作为 地址 参数填入,不加引号)和显示文本(放在标签之间)。若未提供显示文本,链接将无法正确显示。

也支持 [email]地址[/email] 的写法,但由于纯文本邮箱地址会被自动解析,此用法基本冗余。

图片

[img]图片地址[/img]

[img] 标签用于在 osu! 论坛帖中插入网络图片。使用时需将图片的直链地址粘贴到标签之间(即作为 图片地址 参数填入)。本地文件路径(如 C:\Users\Name\Pictures\image.jpg)将不起作用。

注意:网站网址不等于图片地址。

获取图片地址的方法:在图片所在网页上,将鼠标悬停于图片,右键点击并选择 复制图片地址,然后将地址粘贴到标签之间。

尽管图片可来源于任何网站,但由于部分网站不允许外链(即"盗链"),osu! 仍建议用户将图片上传至可靠的图床,如 ImgBB。

注意:Imgur 已经拉黑了 osu! 网站的 IP,因此托管在 Imgur 的新图片已无法显示。1

工具栏按钮:图片按钮

图片映射

[imagemap]
图片地址
X Y 宽度 高度 跳转链接 悬停标题
[/imagemap]

[imagemap] 标签用于在一张图片上划分多个矩形区域,并为每个区域添加超链接。

用于嵌入网站并显示的网络图片的直链须通过 图片地址 参数填入。

图片地址 参数其后的每一行对应一个可点击区域。每行依次指定:区域左上角的 X 和 Y 坐标(百分比)、区域宽度和高度(百分比),以及跳转链接。另外,还可以选填 悬停标题 参数,标题将会在光标悬停到这一区域时显示。跳转链接 参数可指定一个具体的链接,也可以用 # 留空。所有尺寸参数(X、Y、宽度、高度)均为 0–100 的百分比数值,不加百分号。

工具栏按钮:图片映射按钮

YouTube

[youtube]视频 ID[/youtube]

[youtube] 标签用于在网站上嵌入 YouTube 视频。使用时只需将视频 ID(不是完整网址)放在两个标签之间(即作为 视频 ID 参数填入)。

YouTube 视频 ID 是位于视频网址中 v= 之后跟着的那 11 位字符。

音频

[audio]URL[/audio]

[audio] 标签用于从网络音频源嵌入 HTML5 音频播放器。音频文件可以来源于任何地方,只要提供的网址能获取到音频文件。本地文件路径(如 C:\Users\Name\Music\audio.mp3)将不起作用。

注意:由于音乐盗版问题,并非所有文件共享服务都允许其他网站通过直链访问其音频文件。osu! 对用户可能遇到的任何版权问题不承担任何责任。

要以此方式嵌入音频文件,必须将音频文件的源网址(例如 https://www.example.com/example.mp3)粘贴到两个 [audio] 标签之间。

标题 (v1)

[heading]文本[/heading]

[heading] 标签用于将文本格式化为粉色的大号标题。该标签不支持多级标题,也无法添加特定链接。

工具栏按钮:标题按钮

公告框

[notice]
文本
[/notice]

[notice] 标签用于将段落放入一个大型、包含外边框、暗色背景的方框内。该按钮主要用于在网站上标注关于某主题的通告或警告。

已废弃标签

以下 BBCode 标签曾在 osu! 网站上使用,现已不可用。此处记载其用法和语法,仅供历史参考用。

Google

[google]搜索参数[/google]

[google] 标签是过时标签,曾用于在 osu! 论坛中通过标签间的文本链接到 Google 搜索。

该标签会根据用户账户跳转至 Google 搜索,因此不同用户看到的结果可能不同(Google 会个性化搜索结果)。同理,某些搜索结果也可能因语言或国家限制对特定用户隐藏。

手气不错

[lucky]搜索参数[/lucky]

[lucky] 标签是过时标签,曾用于在 osu! 论坛中通过标签间的文本,链接到 Google 搜索中 手气不错 按钮所指向的网站。由于该按钮的特性,不同用户通过此按钮跳转到的网站可能不同。

标题 (v2)

[文本]

Heading (v2) 标签是过时标签,曾用于在 osu! 论坛中将文本格式化为更美观的紫色标题,并带有下划线。该标签仅在 Beatmaps 版块有效,且仅在发布后生效(预览时不可见)。使用时无对应按钮,语法仅为一对括号(无起始和结束标签)。

辅助工具

以下项目可简化 BBCode 文本的格式化过程:

名称 项目带头人 描述
OSUWME rezzvy 支持实时预览的 osu! 个人资料 BBCode 编辑器
osu! BBCode Editor HonokaKousakaTV 支持实时预览的 osu! 个人资料 BBCode 编辑器(已归档)
osu-gradient [_____________] 为 osu! 个人资料创建渐变色文字
osu-web enhanced RockRoller 为 osu! 网站增加更多 BBCode 按钮等功能的浏览器扩展
textcolorizer david BBCode 和 HTML 文字染色工具

冷知识

  • 这篇 wiki 文章起初改编自 Stefan 撰写的 "HOW TO: Forum BBCodes" 论坛讨论串。
  • 曾有一个 Bug,允许用户在颜色标签的等号后输入 "transparent" 使文字透明。
    • 目前,这么做只会让文本变成默认颜色(白色)。
  • 在 imagemap 标签出现之前,可以通过组合使用 url 和 img 标签来在图片中添加超链接,但每张图片只能添加一个链接。若要实现多个链接,需将原图切成若干小块(每个链接对应一小块图片),然后横向拼接。

参考