在你的文中插入便签纸 组件

注意

此页为于 SCP 维基内部使用的“组件”页。用于在其他页面中引用。

未经组件作者或工作人员允许，请勿修改此页的内容。

---

这是什么？

这是一个能在你的页面上添加便签纸式div的组件。具体有什么用我也不知道，但反正我之后会用到，所以开源一下。

你可以在任意页面上使用该组件，理论上不应该与任何版式产生冲突，即使是黑标。IOS上我没测试，我也没法修IOS的bug，凑合看吧。

使用方法

本组件有三种使用方法，具体用哪种看你需求，混着用也可以。跟着流程来就行。

Listpages模式

简单来说在这个模式下，你可以用这个组件来让你的Listpages模块显示的结果变成一个个便签纸。

首先，在页面上方（但在你引用版式那几行的下面）插入include。

[[include :scp-wiki-cn:component:sticky-note-backend inc-listpages=--]
|width=20rem
|darkmode=*
]]

inc-listpages	辨识符。 告诉组件你要使用Listpages模式。仅可且必须填入 --]。
width （可选）	便签宽度。 默认为220px。你也可以填你自己的数值，比如300px或者200rem之类的，反正最长不会超过页面宽度。 不用的话就把这行删了。
darkmode （可选）	暗色模式。 填入*以启用暗色模式配色。填别的不起效果。 和上面那个一样，不用就把这行删了。 具体配色方案见下文。

然后，在你想用这个组件的地方，插入以下代码：

[[div class="sticky-listpages"]]
[[module ListPages]]
[[div class=" seed r-[[#expr %%commented_by_id%% % 5]] x-[[#expr %%commented_by_id%% % 5]] y-[[#expr %%commented_by_id%% % 5]] c-[[#expr %%commented_by_id%% % 5]]"]]
Listpages模块的内容
[[/div]]
[[/module]]
[[/div]]

基础的Listpages应该都会用吧，那我就不教了。

值得注意的是在筛选部分，wrapper这个变量是不能加的，不然会崩。推荐加入limit变量来限制显示页面数，不然你就等着整个页面全是便签纸吧。

另外就是那些加粗的%%commented_by_id%%那部分，这里也可以填入%%created_by_id%%、%%size%%、%%rating%%或者%%rating_votes%%之类，只要是能生成出整数的变量都可以。但是相对的，不能生成整数的就不行。

如果你是用在比如竞赛中心页的作品展示上，你用上面那几个都行。但如果你是用在作者页上，我比较推荐你不要用%%created_by_id%%，毕竟你知道的，你的作者页肯定都是created by 你自己啊。

上面那一大串seed参数决定了你每张便签纸的颜色、倾斜角度、上下左右的错位。如果你完全不加那个div也可以，那样的话就会是一堆默认淡黄色的便签纸很规则地立正了。

示例

有seed

SCP-CN-4342 [+2 (+2/-0)]
创建于：19 Apr 2026 01:42
标签：euclid scp site-cn-65 原创
字符数：2451

SCP CN 4112 [+-9 (+0/-9)]
创建于：19 Apr 2026 00:43
标签：euclid scp 原创
字符数：2492

SCP-099-ID [+1 (+1/-0)]
创建于：19 Apr 2026 00:29
标签：id lemrusan safe scp
字符数：9804

SCP-1730 [+563 (+564/-1)]
创建于：22 Nov 2016 14:37
标签：scp 冒险 基金会制 小丑巴伯 建筑 异常事件 恐怖 悬疑 插画 无效化 空间影响 超维度 轮回 音频
字符数：67367

SCP-7482 [+1 (+1/-0)]
创建于：08 Jul 2025 16:35
标签：2025古典竞赛 scp thaumiel 官僚制度 恐怖 悲剧 犯罪小说 电脑 知识
字符数：3853

示例代码：

+ 示例代码

[[div class="sticky-listpages"]]

[[module ListPages tag="scp" order="updated_at desc" category="*" limit="5"]]

[[div class=" seed r-[[#expr %%commented_by_id%% % 5]] x-[[#expr %%commented_by_id%% % 5]] y-[[#expr %%commented_by_id%% % 5]] c-[[#expr %%commented_by_id%% % 5]]"]]

##003e3e|**%%title_linked%%** **{{[+%%rating%% (+[[#expr (%%rating_votes%%+%%rating%%)/2]]/-[[#expr (%%rating_votes%%-%%rating%%)/2]])]}}**##
##003e3e|{{**创建于：**%%created_at|%Y-%m-%d %R|agohover%%}}##
##003e3e|{{**标签：**%%tags%%}}##
##003e3e|{{**字符数：**%%size%%}}##

[[/div]]

[[/module]]

[[/div]]

没有seed

SCP-CN-4342 [+2 (+2/-0)]
创建于：19 Apr 2026 01:42
标签：euclid scp site-cn-65 原创
字符数：2451

SCP CN 4112 [+-9 (+0/-9)]
创建于：19 Apr 2026 00:43
标签：euclid scp 原创
字符数：2492

SCP-099-ID [+1 (+1/-0)]
创建于：19 Apr 2026 00:29
标签：id lemrusan safe scp
字符数：9804

SCP-1730 [+563 (+564/-1)]
创建于：22 Nov 2016 14:37
标签：scp 冒险 基金会制 小丑巴伯 建筑 异常事件 恐怖 悬疑 插画 无效化 空间影响 超维度 轮回 音频
字符数：67367

SCP-7482 [+1 (+1/-0)]
创建于：08 Jul 2025 16:35
标签：2025古典竞赛 scp thaumiel 官僚制度 恐怖 悲剧 犯罪小说 电脑 知识
字符数：3853

示例代码：

+ 示例代码

[[div class="sticky-listpages"]]

[[module ListPages tag="scp" order="updated_at desc" category="*" limit="5"]]

##003e3e|**%%title_linked%%** **{{[+%%rating%% (+[[#expr (%%rating_votes%%+%%rating%%)/2]]/-[[#expr (%%rating_votes%%-%%rating%%)/2]])]}}**##
##003e3e|{{**创建于：**%%created_at|%Y-%m-%d %R|agohover%%}}##
##003e3e|{{**标签：**%%tags%%}}##
##003e3e|{{**字符数：**%%size%%}}##

[[/module]]

[[/div]]

+ Listpages模式源代码

.sticky-listpages a:any-link {
    color: #243a52;
}
 
.sticky-listpages a:visited {
    color: #2a5c63;
}
 
.sticky-listpages .list-pages-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem 2.5rem;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem;
    color: #000000 !important;
}
 
.sticky-listpages .list-pages-box .list-pages-item {
    box-sizing: border-box;
    width: 220px;
    min-height: 160px;
    padding: 1.2rem 1rem;
    color: #000000 !important;
 
    --note-bg: #f6ecb8;
    background-color: var(--note-bg);
    border: 1px solid rgba(120, 100, 40, 0.18);
 
    box-shadow:
        0 0.35rem 0.8rem rgba(0, 0, 0, 0.18),
        0 0.1rem 0.2rem rgba(0, 0, 0, 0.08);
 
    position: relative;
}
 
.sticky-listpages .list-pages-box span[style] {
    color: #000000 !important;
}
 
.sticky-listpages .list-pages-item:has(.r-0) { transform: rotate(-4deg); }
.sticky-listpages .list-pages-item:has(.r-1) { transform: rotate(-2deg); }
.sticky-listpages .list-pages-item:has(.r-2) { transform: rotate(1deg); }
.sticky-listpages .list-pages-item:has(.r-3) { transform: rotate(2deg); }
.sticky-listpages .list-pages-item:has(.r-4) { transform: rotate(4deg); }
 
.sticky-listpages .list-pages-item:has(.x-0) { left: -10px; }
.sticky-listpages .list-pages-item:has(.x-1) { left: -5px; }
.sticky-listpages .list-pages-item:has(.x-2) { left: 0px; }
.sticky-listpages .list-pages-item:has(.x-3) { left: 5px; }
.sticky-listpages .list-pages-item:has(.x-4) { left: 10px; }
 
.sticky-listpages .list-pages-item:has(.y-0) { top: -10px; }
.sticky-listpages .list-pages-item:has(.y-1) { top: -5px; }
.sticky-listpages .list-pages-item:has(.y-2) { top: 0px; }
.sticky-listpages .list-pages-item:has(.y-3) { top: 5px; }
.sticky-listpages .list-pages-item:has(.y-4) { top: 10px; }
 
.sticky-listpages .list-pages-item:has(.c-0) { --note-bg: #FFF3A6; }
.sticky-listpages .list-pages-item:has(.c-1) { --note-bg: #FFDDE1; }
.sticky-listpages .list-pages-item:has(.c-2) { --note-bg: #DFF5E3; }
.sticky-listpages .list-pages-item:has(.c-3) { --note-bg: #DDEBFF; }
.sticky-listpages .list-pages-item:has(.c-4) { --note-bg: #E9DFFF; }
 
.sticky-listpages .list-pages-box .list-pages-item p {
    margin: 0;
    line-height: 1.5;
}
 
.sticky-listpages .list-pages-box .list-pages-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom right,
        rgba(255, 255, 255, 0.25),
        rgba(255, 255, 255, 0) 45%
    );
    pointer-events: none;
}
 
.sticky-listpages .list-pages-box .list-pages-item::after {
    content: "";
    position: absolute;
    top: -0.55rem;
    left: 50%;
    width: 3.2rem;
    height: 1rem;
    transform: translateX(-50%) rotate(-3deg);
 
    background: rgba(255, 255, 255, 0.65);
    border-left: 1px solid rgba(180, 170, 120, 0.25);
    border-right: 1px solid rgba(180, 170, 120, 0.25);
 
    box-shadow: 0 0.08rem 0.15rem rgba(0, 0, 0, 0.08);
    pointer-events: none;
}

无序列表模式

首先，在你的页面上方插入以下include：

[[include :scp-wiki-cn:component:sticky-note-backend inc-list=--]
|width=20rem
|darkmode=*
]]

inc-list	辨识符。 告诉组件你要使用无序列表模式。仅可且必须填入 --]。

除了辨识符以外和Listpages模式没区别，不多说了。

在你想要使用便签纸的地方插入以下代码：

[[div class="sticky-list"]]
* [[span class="seed r-1 x-2 y-3 c-4"]]x[[/span]] 占位符
* [[span class="seed r-1 x-2 y-3 c-4"]]x[[/span]] 占位符2
[[/div]]

*就是wikidot自带的无序列表符号，整体使用方法和原本的无序列表没有区别。

每个无序列表符号后面需要加一个span以自定义便签纸的颜色和姿势。span中间的x不能去掉，或者你也可以替换成随便什么内容，反正不会显示出来的。

r-0/1/2/3/4	定义便签纸的旋转角度，分别会让便签纸旋转-4/-2/1/2/4度。
x-0/1/2/3/4	定义便签纸向右移动的距离，分别会让便签纸移动-10/-5/0/5/10 px。
y-0/1/2/3/4	定义便签纸向下移动的距离，分别会让便签纸移动-10/-5/0/5/10度。
c-0/1/2/3/4	定义便签纸的颜色，分别为#FFF3A6/ #FFDDE1/ #DFF5E3/ #DDEBFF/ #E9DFFF。 暗色模式下，这些颜色为#5e5a2e/ #5a3e42/ #3e5a45/ #3b4f63/ #4b4263。

{$color1-name}{$color1-variable}{$color1-info}

{$color2-name}{$color2-variable}{$color2-info}

{$color3-name}{$color3-variable}{$color3-info}

{$color4-name}{$color4-variable}{$color4-info}

{$color5-name}{$color5-variable}{$color5-info}

{$color6-name}{$color6-variable}{$color6-info}

#FFF3A6--UI-soft-yellow255, 243, 166

#FFDDE1--UI-blush-pink255, 221, 225

#DFF5E3--UI-mint-mist223, 245, 227

#DDEBFF--UI-sky-wash221, 235, 255

#E9DFFF--UI-lavender-fade233, 223, 255

{$subcolor6-name}{$subcolor6-variable}{$subcolor6-info}

{$subcolor7-name}{$subcolor7-variable}{$subcolor7-info}

{$subcolor8-name}{$subcolor8-variable}{$subcolor8-info}

{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}

{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}

{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}

{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}

{$color1-name}{$color1-variable}{$color1-info}

{$color2-name}{$color2-variable}{$color2-info}

{$color3-name}{$color3-variable}{$color3-info}

{$color4-name}{$color4-variable}{$color4-info}

{$color5-name}{$color5-variable}{$color5-info}

{$color6-name}{$color6-variable}{$color6-info}

#5e5a2e--UI-olive-deep94, 90, 46

#5a3e42--UI-rose-deep90, 62, 66

#3e5a45--UI-moss-deep62, 90, 69

#3b4f63--UI-slate-blue-deep59, 79, 99

#4b4263--UI-purple-deep75, 66, 99

{$subcolor6-name}{$subcolor6-variable}{$subcolor6-info}

{$subcolor7-name}{$subcolor7-variable}{$subcolor7-info}

{$subcolor8-name}{$subcolor8-variable}{$subcolor8-info}

{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}

{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}

{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}

{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}

示例

有seed

• x 说，你是猪🔪
• x 😭
  
  你是猪

示例代码：

+ 示例代码

[[include :scp-wiki-cn:component:sticky-note-backend inc-list=--]
|darkmode=*
]]

[[div class="sticky-list"]]

* [[span class="seed r-1 x-2 y-3 c-1"]]x[[/span]] 说，你是猪🔪
* [[span class="seed r-0 x-4 y-2 c-4"]]x[[/span]] 😭 _
_
你是猪

[[/div]]

没有seed

• 说，你是猪🔪
• 😭
  
  你是猪

示例代码：

+ 示例代码

[[include :scp-wiki-cn:component:sticky-note-backend inc-list=--]
|darkmode=*
]]

[[div class="sticky-list"]]

* 说，你是猪🔪
* 😭 _
_
你是猪

[[/div]]

+ 无序列表模式源代码

.sticky-list a:any-link {
    color: #243a52;
}
 
.sticky-list a:visited {
    color: #2a5c63;
}
 
.sticky-list ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem 2.5rem;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem;
    list-style: none;
}
 
.sticky-list li {
    --note-bg: #FFF3A6;
 
    box-sizing: border-box;
    width: 220px;
    min-height: 160px;
    padding: 1.2rem 1rem;
    position: relative;
    margin: 0;
    list-style: none;
    color: #000000 !important;
 
    border: 1px solid rgba(120, 100, 40, 0.18);
    box-shadow:
        0 0.35rem 0.8rem rgba(0, 0, 0, 0.18),
        0 0.1rem 0.2rem rgba(0, 0, 0, 0.08);
 
    background-color: var(--note-bg);
}
 
.sticky-list li .seed {
    display: inline-block;
    width: 0;
    height: 0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    color: transparent;
}
 
.sticky-list li:has(.r-0) { transform: rotate(-4deg); }
.sticky-list li:has(.r-1) { transform: rotate(-2deg); }
.sticky-list li:has(.r-2) { transform: rotate(1deg); }
.sticky-list li:has(.r-3) { transform: rotate(2deg); }
.sticky-list li:has(.r-4) { transform: rotate(4deg); }
 
.sticky-list li:has(.x-0) { left: -10px; }
.sticky-list li:has(.x-1) { left: -5px; }
.sticky-list li:has(.x-2) { left: 0px; }
.sticky-list li:has(.x-3) { left: 5px; }
.sticky-list li:has(.x-4) { left: 10px; }
 
.sticky-list li:has(.y-0) { top: -10px; }
.sticky-list li:has(.y-1) { top: -5px; }
.sticky-list li:has(.y-2) { top: 0px; }
.sticky-list li:has(.y-3) { top: 5px; }
.sticky-list li:has(.y-4) { top: 10px; }
 
.sticky-list li:has(.c-0) { --note-bg: #FFF3A6; }
.sticky-list li:has(.c-1) { --note-bg: #FFDDE1; }
.sticky-list li:has(.c-2) { --note-bg: #DFF5E3; }
.sticky-list li:has(.c-3) { --note-bg: #DDEBFF; }
.sticky-list li:has(.c-4) { --note-bg: #E9DFFF; } 
 
.sticky-list li::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom right,
        rgba(255, 255, 255, 0.25),
        rgba(255, 255, 255, 0) 45%
    );
    pointer-events: none;
}
 
.sticky-list li::after {
    content: "";
    position: absolute;
    top: -0.55rem;
    left: 50%;
    width: 3.2rem;
    height: 1rem;
    transform: translateX(-50%) rotate(-3deg);
    background: rgba(255, 255, 255, 0.55);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0.08rem 0.15rem rgba(0, 0, 0, 0.08);
    pointer-events: none;
}
 
.sticky-list li p {
    margin: 0;
    line-height: 1.5;
}

Div模式

首先，在你的页面上方插入以下include：

[[include :scp-wiki-cn:component:sticky-note-backend inc-div=--]
|width=20rem
|darkmode=*
]]

inc-div	辨识符。 告诉组件你要使用Div模式。仅可且必须填入 --]。

除了辨识符以外和另外两个模式没区别，不多说了。

在你想要使用便签纸的地方插入以下代码：

[[div class="sticky-div"]]

[[div class="sticky-sub-div r-1 x-2 y-3 c-0"]]
便签内容
[[/div]]

[[div class="sticky-sub-div r-3 x-0 y-1 c-1"]]
便签内容
[[/div]]

[[/div]]

和无序列表本质是一样的，自己填seed变量，参数和上面一致。区别就是这里不叫seed了。

示例

有seed

这里是便签1

这里是便签2

这里是便签3

这里是便签4

示例代码：

+ 示例代码

[[include :scp-wiki-cn:component:sticky-note-backend inc-div=--]
]]

[[div class="sticky-div"]]

[[div class="sticky-sub-div r-1 x-2 y-3 c-0"]]
这里是便签1
[[/div]]

[[div class="sticky-sub-div r-3 x-0 y-1 c-1"]]
这里是便签2
[[/div]]

[[div class="sticky-sub-div r-0 x-4 y-0 c-4"]]
这里是便签3
[[/div]]

[[div class="sticky-sub-div r-2 x-0 y-2 c-3"]]
这里是便签4
[[/div]]

[[/div]]

没有seed

这里是便签1

这里是便签2

这里是便签3

这里是便签4

示例代码：

+ 示例代码

[[include :scp-wiki-cn:component:sticky-note-backend inc-div=--]
]]

[[div class="sticky-div"]]

[[div class="sticky-sub-div"]]
这里是便签1
[[/div]]

[[div class="sticky-sub-div1"]]
这里是便签2
[[/div]]

[[div class="sticky-sub-div"]]
这里是便签3
[[/div]]

[[div class="sticky-sub-div"]]
这里是便签4
[[/div]]

[[/div]]

+ Div模式源代码

.sticky-div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem 2.5rem;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem;
}
 
.sticky-sub-div {
    --note-bg: #FFF3A6;
 
    box-sizing: border-box;
    width: 220px;
    min-height: 160px;
    padding: 1.2rem 1rem;
    position: relative;
 
    background-color: var(--note-bg);
    border: 1px solid rgba(120, 100, 40, 0.18);
 
    box-shadow:
        0 0.35rem 0.8rem rgba(0, 0, 0, 0.18),
        0 0.1rem 0.2rem rgba(0, 0, 0, 0.08);
 
    color: #000000;
}
 
.sticky-sub-div.r-0 { transform: rotate(-4deg); }
.sticky-sub-div.r-1 { transform: rotate(-2deg); }
.sticky-sub-div.r-2 { transform: rotate(1deg); }
.sticky-sub-div.r-3 { transform: rotate(2deg); }
.sticky-sub-div.r-4 { transform: rotate(4deg); }
 
.sticky-sub-div.x-0 { left: -10px; }
.sticky-sub-div.x-1 { left: -5px; }
.sticky-sub-div.x-2 { left: 0px; }
.sticky-sub-div.x-3 { left: 5px; }
.sticky-sub-div.x-4 { left: 10px; }
 
.sticky-sub-div.y-0 { top: -10px; }
.sticky-sub-div.y-1 { top: -5px; }
.sticky-sub-div.y-2 { top: 0px; }
.sticky-sub-div.y-3 { top: 5px; }
.sticky-sub-div.y-4 { top: 10px; }
 
.sticky-sub-div.c-0 { --note-bg: #FFF3A6; }
.sticky-sub-div.c-1 { --note-bg: #FFDDE1; }
.sticky-sub-div.c-2 { --note-bg: #DFF5E3; }
.sticky-sub-div.c-3 { --note-bg: #DDEBFF; }
.sticky-sub-div.c-4 { --note-bg: #E9DFFF; }
 
.sticky-sub-div::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom right,
        rgba(255, 255, 255, 0.25),
        rgba(255, 255, 255, 0) 45%
    );
    pointer-events: none;
}
 
.sticky-sub-div::after {
    content: "";
    position: absolute;
    top: -0.55rem;
    left: 50%;
    width: 3.2rem;
    height: 1rem;
    transform: translateX(-50%) rotate(-3deg);
 
    background: rgba(255, 255, 255, 0.55);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
 
    box-shadow: 0 0.08rem 0.15rem rgba(0, 0, 0, 0.08);
    pointer-events: none;
}
 
.sticky-sub-div p {
    line-height: 1.5;
}