在你的文中插入便签纸 组件
Rating: +84


这是什么？

这是一个能在你的页面上添加便签纸式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没有seed

列表暂不可用： 此 ListPages 查询尚未由只读迁移站支持。

示例代码：

+ 示例代码- 示例代码

[[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]]

+ Listpages模式源代码- Listpages模式源代码
css


.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;
    margin-bottom: 1em;
    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。

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:theme-squares）

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:theme-squares）

                           

示例

有seed没有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]]

+ 无序列表模式源代码- 无序列表模式源代码
css
.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没有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]]

+ Div模式源代码- Div模式源代码
css


.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;
}
原创组件
页面版本：⁨0⁩, 最后编辑于: ⁨2026/4/8 13:16:09⁩ (⁨⁨161⁩ 日前⁩), 现时评分: 84
历史 附件 + 选项