使用说明：社交平台风格文本框


close
++* 著作信息
X
名称：使用说明：社交平台风格文本框
作者：Einoshima
创作年份：2025

[[div style="display: none"]]

[[/div]]

这是什么？

这是社交平台风格文本框组件。它的创意来源于 Kankan 和 7happy7 设计的 Twitter 组件，使用现代 CSS 布局彻底重构了内部结构，并面向 The Backrooms JP Wiki 重新设计了功能和显示效果。

以下为本组件的相关页面。

使用方法

首先，在你页面中的某个位置（建议放在页面顶部，方便查看）插入以下内容。

常规使用

[[include :backrooms-wiki-cn:component:sns-settings]]

在深色页面中使用

[[include :backrooms-wiki-cn:component:sns-settings darkmode=a]]

在除 The Ourrooms 以外的社交平台风格页面中使用

点赞（）和点踩（）按钮会相应变成转发（）和喜欢（）按钮，更像 𝕏（原推特）的界面。

[[include :backrooms-wiki-cn:component:sns-settings common-sns=a]]

在除 The Ourrooms 以外的深色社交平台风格页面中使用

[[include :backrooms-wiki-cn:component:sns-settings darkmode=a|common-sns=a]]

这样就引入了社交平台的相关样式。在此基础上，只需要插入以下代码：

[[include :backrooms-wiki-cn:component:sns-post
|account-id=@i2wot
|account-image=http://japan-backrooms-storage.wdfiles.com/local--files/file%3A3358370-72-7b3u/sns01_icon_outlet.jpg
|time=1 day
|locate-link=level-110-n
|locate-name=Level 110 N
|content=文本01
|attached-image= https://japan-backrooms-storage.wdfiles.com/local--files/file%3A3358370-74-6ay2/discount_01.jpg
]]

[[div style="display: none"]]

[[/div]]

就能以社交平台帖子的风格显示文本了。

选项一览

必填选项

account-id:	输入发帖者的账号 ID（也就是类似 `@aaaaaaaaa` 这样的部分）。
content:	帖子的内容。

可能会经常用到的选项（可留空）

intro: 在此处输入合适的值（比如 a 就可以）， _

就能让帖子显示在独特的黑色渐变背景上，适合在文章开头使用。

reply: 在此处输入合适的值（比如 a 就可以）， _

文本框的左侧就会留出一些空间，就像回帖的效果。

account-image:

在此输入作为账号头像的图片 URL。 _

图片需要先上传至沙盒或图床。 _
若留空，则头像会显示为纯灰色。

account-name:

输入发帖者的账号名称。 _

若留空，则不显示此内容。

account-color:

输入发帖者账号 ID 的显示颜色。 _

有效值包括 rgb(var(--general-account-color))、 _
rgb(var(--administrator-account-color)) 等。 _
若留空，则默认使用 rgb(var(--general-account-color))。

time:

输入发帖者的发布时间 _

若留空，则不显示此内容。

locate-name:

输入发帖者的位置信息。 _

若留空，则不显示此内容。

locate-link: 设置点击 locate-name 时跳转的页面链接。 _

仅可设置为 backrooms-wiki-cn 站内的页面。 _
若留空，则 locate-name 不会成为可点击的链接。

attached-image:

在此输入附加在帖文中的图片 URL。 _

若留空，则不显示此内容。

+ 修改帖子底部按钮的参数　因为很多所以折叠了

- 修改帖子底部按钮的参数　因为很多所以折叠了

button-press-a: 在此输入合适的值（比如 a 就可以）， _

就能将帖子底部最左侧的按钮（评论） _
显示为“已被读者按下”的颜色。 _
若留空，则按钮保持默认外观。

button-number-a: 在此输入合适的数字（比如 1 就可以）， _

就能在帖子底部最左侧的按钮（评论）旁 _
显示数字（类似评论数）。 _
若留空或输入 0，则不会显示数字。

button-press-b: 在此输入合适的值（比如 a 就可以）， _

就能将帖子底部左数第 2 个按钮（点赞） _
显示为“已被读者按下”的颜色。 _
若留空，则按钮保持默认外观。

button-number-b: 在此输入合适的数字（比如 1 就可以）， _

就能在帖子底部左数第 2 个按钮（点赞）旁 _
显示数字（类似点赞数）。 _
若留空或输入 0，则不会显示数字。

button-press-c: 在此输入合适的值（比如 a 就可以）， _

就能将帖子底部正中间的按钮（点踩） _
显示为“已被读者按下”的颜色。 _
若留空，则按钮保持默认外观。

button-number-c: 在此输入合适的数字（比如 1 就可以）， _

就能在帖子底部正中间的按钮（点踩）旁 _
显示数字（类似点踩数）。 _
若留空或输入 0，则不会显示数字。

button-press-d: 在此输入合适的值（比如 a 就可以）， _

就能将帖子底部右数第 2 个按钮（书签） _
显示为“已被读者按下”的颜色。 _
若留空，则按钮保持默认外观。

button-number-d: 在此输入合适的数字（比如 1 就可以）， _

就能在帖子最右侧的按钮（书签）旁 _
显示数字（类似收藏数）。 _
若留空或输入 0，则不会显示数字。

button-press-e: 在此输入合适的值（比如 a 就可以）， _

就能将帖子最右侧的按钮（分享） _
显示为“已被读者按下”的颜色。 _
若留空，则按钮保持默认外观。 _
_
由于该按钮在最右侧，出于布局上的考虑，不支持显示数字。

进一步自定义布局的方法

本组件相关的所有显示设置都已整理在页面中。如果只是更换颜色之类的简单修改，那么只需要编辑上述页面中的变量部分即可完成。

帖子底部的 5 个按钮可以更换为 Fontawesome ver4.3.0 所支持的任意图标。可用图标列表见此（需要注意，该页面包含了部分 ver4.7 才支持的图标，它们目前无法使用）¹。

+ 本组件相关的参数一览　因为很多所以折叠了

- 本组件相关的参数一览　因为很多所以折叠了

:root {
 
/* 常规颜色 */
 
    --sns-base-text-color: 0, 0, 0;
    --sns-border-color: var(--sns-base-text-color);
    --sns-gui-color: 100, 100, 100;
    --sns-button-color: 60, 60, 60;
    --sns-pressed-button-a-color: 48, 157, 219;
    --sns-pressed-button-b-color: 0, 200, 0;
    --sns-pressed-button-c-color: 200, 0, 0;
    --sns-pressed-button-d-color: 48, 157, 219;
    --sns-pressed-button-e-color: 48, 157, 219;
    --sns-locate-link-color: 138, 137, 136;
    --sns-normal-link-color: 48, 157, 219;
     --sns-intro-background-color: 0, 0, 0;

/* 账号颜色 */
 
    --administrator-account-color: 186, 186, 32;
    --general-account-color: 119, 111, 227;
 
/* 深色模式下的颜色 */
 
    --dark-sns-base-text-color: 255, 255, 255;
    --dark-sns-border-color: 190, 190, 190;
    --dark-sns-pressed-button-a-color: 48, 157, 219;
    --dark-sns-pressed-button-b-color: 90, 197, 90;
    --dark-sns-pressed-button-c-color: 197, 90, 90;
    --dark-sns-pressed-button-d-color: 48, 157, 219;
    --dark-sns-pressed-button-e-color: 48, 157, 219;
    --dark-sns-gui-color: 126, 124, 120;
    --dark-sns-button-color: 180, 180, 180;
    --dark-sns-locate-link-color: 200, 199, 198;
    --dark-sns-normal-link-color: 48, 157, 219;
    --dark-administrator-account-color: 224, 224, 80;
    --dark-general-account-color: 176, 170, 255;
 
/* 账号头像图片的尺寸 */
 
    --post-account-image-size: clamp(2.125rem, 1.761rem + 1.82vw, 3.125rem);
 
/* 按钮使用的 Fontawesome 字符 */
 
    --sns-button-a-content: "\f0e5";
    --sns-pressed-button-a-content: "\f075";
    --sns-button-b-content: "\f087";
    --sns-pressed-button-b-content: "\f164";
    --sns-button-c-content: "\f088";
    --sns-pressed-button-c-content: "\f165";
    --sns-button-d-content: "\f097";
    --sns-pressed-button-d-content: "\f02e";
    --sns-button-e-content: "\f08e";
    --sns-pressed-button-e-content: var(--sns-button-e-content);
 
}

使用例

[[include :backrooms-wiki-cn:component:sns-post
|account-color=rgb(var(--general-account-color))
|account-id=@post-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test-test
|account-image=https://japan-backrooms-storage.wdfiles.com/local--files/file%3A3358370-74-6ay2/discount_01.jpg
|time=1 day
|locate-name=后室维基
|content=需要注意，过长的账号名在某些环境下会被省略显示
大尺寸图片也可以正常设置为头像
可以选择不给位置信息添加任何链接
可以附加图片
[# #这种] [# #带井号标签的] [# #帖文] [# #也做得出来]
可以在帖子底部的按钮旁添加数字
|attached-image= https://japan-backrooms-storage.wdfiles.com/local--files/file%3A3358370-74-6ay2/discount_01.jpg
|button-number-a=2
|button-number-b=17
|button-number-c=991
]]

[[include :backrooms-wiki-cn:component:sns-post
|account-color=rgb(var(--administrator-account-color))
|account-id=@administrator
|content=可以改成管理员账号一样的专用颜色
可以隐藏时间
可以隐藏位置信息
可以让按钮处于“被按下”的状态

[[include :backrooms-wiki-cn:component:sns-post
|intro=a
|account-color=rgb(var(--administrator-account-color))
|account-id=@the_ourrooms
|account-image=https://japan-backrooms-storage.wdfiles.com/local--files/file%3A3358370-73-bwdz/ourrooms
|locate-name=后室维基　宣传员
|content=欢迎来到后室维基附属社交平台“The Ourrooms”。
这里定将成为各位放松身心的全新天地。
　
——把这样的文本框放在文章开头，可以很好地引入世界观，营造沉浸式氛围。
]]

[[include :backrooms-wiki-cn:component:sns-settings darkmode=a]]

Dependencies

The Backrooms中文维基

你曾经来过这里

这是什么？

使用方法

常规使用

在深色页面中使用

在除 The Ourrooms 以外的社交平台风格页面中使用

在除 The Ourrooms 以外的深色社交平台风格页面中使用

选项一览

必填选项

可能会经常用到的选项（可留空）

进一步自定义布局的方法

使用例