— 甜蜜絮语 —

欢迎,亲爱的~!外表就是一切,穿得光鲜亮丽,而这就是第一步。

重要提示!

我用了多个图片文件来制作这个模板,它们都托管在 Imgur 上。这里有一个包含我用到的所有图片的压缩包。随意使用它们,怎么用都行。

------------------------------------

如何安装

1. 复制全部内容 | (GOOGLE 文档镜像)

2. 粘贴到你的 JanitorAI「关于我」框中。

3. 在那里进行修改(参见下方速查表)。

4. 保存、刷新,也用手机检查一下效果。

避免出错的规则

1. 任何地方都不要留空行。要另起一段,请输入<br><br>

2. 图片链接必须是直链:https://i.imgur.com/abc123.png

如果不使用某张图片,就像这样留空:src=""(空图片会自行隐藏,其边框也会收起)

3. 只能更改引号内的文字或 > 与 < 之间的内容。不要删除引号、< >、{ } 或任何写着 class= 的内容

4. 绝不要在style部分中添加 /* 注释 </ 或 >和 ~ 字符:JanitorAI 会在这些字符处截断样式表。

字符数不要超过 70,000(模板大约有 57,900 个字符),否则代码末尾会被截断。只能通过链接添加图片。JanitorAI 会删除任何 CSS url(...)、@import 和嵌入式 (data:) 图片,所以无法使用这些方式。

速查表:查找此项(Ctrl/Cmd + F)-> 修改它

你的名字

content:"Your Name" 页面顶部显示的名称。

JanitorAI 的真实用户名会被隐藏,并由这段文字代替,所以想写什么都行(保留引号)。它会以 Cinzel Decorative 字体显示为大写。它位于以 .pp-uc-title::after 开头的规则中。名字较长时会换到第二行,因此不会被截掉。

个人资料用词

content:"admirers" 关注者数量后面的词

content:"Joined: mm.dd.yy" 加入日期。填入你的日期。

content:"Admire" / "Admired" 关注按钮

content:"Darlings" 机器人标签页

content:"Love Letters" 脚本标签页

content:"darlings" / "love letters" 数量旁边的词

代词

<div class="xb-pron"><span>代词</span><span>这里</span></div>

在 span 中填写你的代词(或者任何内容)。按需添加或删除 span。

你的照片

(透明 PNG 效果最好)

class="xb-sona" 页眉右侧的竖幅图片

class="xb-intro-img" 简介旁边的竖幅图片。它不会改变框的大小:图片会裁切以适应框体,也可能超出框体上沿。如果页眉图片留空,则会显示你的常规头像,置于带珍珠环绕的圆框中。(珍珠由 .pp-uc-avatar-container::before 规则生成。删除该规则即可移除珍珠。)

背景

页面由多层构成,从后到前依次是:

1. 柔和的粉色页面底色

2. 铺满整个页面的图片(class="xb-bg"),以一半强度显示,让粉色调覆盖在上面。在 .xb-bg 规则中更改 opacity:.5。不用时将 src="" 留空。

3. X/O 壁纸(class="xb-wall"),一张叠加在上方、透明度为 30% 的 PNG 图片。在 .xb-wall img 规则中更改 opacity:.3。壁纸是一张 3456 x 1728 像素的图片(已包含,文件名为 "X-O Wallpaper 3456x1728.png"),并已在模板中添加链接。<div class="xb-wall"><img src="..."></div>替换该链接即可使用自己的图片,或者删除整个 div 来移除壁纸。

星星条纹图案

简介后面的粉色星星条纹是一张无缝拼接图片,尺寸为 3840 x 4800 像素(已包含,文件名为 "Sweet Nothings - Star Pattern 3840x4800.png"),并已在模板中添加链接:<div class="xb-pat"><img src="..."></div>。图片按原尺寸从左上角开始显示,因此星星不会拉伸。要使用自己的图案,请替换该链接。图片尺寸设为 3840 x 4800(更大的图片只会被裁切,更小的图片会在超大屏幕上留下空白),并将文件控制在 1 MB 以下,以免 Imgur 重新压缩。没有 CSS 备用图案,所以链接失效时,这条色带会显示为纯粉色。色带顶部和底部边缘会渐隐至壁纸中。

状态

点击信封会使页面变暗,并渐显一封写着你留言的信。点击信封之外的任意位置即可关闭。

class="xb-status xb-online" 将 xb-online 改为 xb-away 或 xb-offline

<b>爱意留言</b> 信封上的文字。后面的 "- open" 会自动显示。

<span class="xb-msg">...</span> 留言 <i>...</i> 日期(前面会显示 "written")

简介

class="xb-title" 标题

class="xb-hl" 高亮显示的第一行

<p>...</p> 个人简介文字

class="xb-chips" 标签胶囊。X 和 O 的形状会自动交替。

链接:<a href="PASTE-LINK-HERE" class="xb-link">

<img src=""><span>名称</span><i>简短说明</i></a>

已设置三个链接(每行三列)。

蝴蝶结

简介框蝴蝶结:<img class="xb-bow" src="..."> 放在 xb-intro-text div 的顶部(尺寸由 .xb-intro-text .xb-bow 规则设定)

信封蝴蝶结: <span class="xb-seal"><img src="..."></span>(尺寸在 .xb-seal 规则中设为 width:140px)

系列蝴蝶结:<img class="xb-bow" src="..."> 放在每个系列封面的<summary>内(尺寸由 .xb-sitem .xb-bow 规则设定)

删除<img class="xb-bow">即可移除蝴蝶结。要添加新的系列封面,请复制整行封面,这样蝴蝶结也会一并复制。

为蝴蝶结重新着色:CSS 无法直接修改图片的颜色,但可以

调整色相。在该蝴蝶结的规则中添加滤镜,例如:

filter:hue-rotate(-70deg)

粉色蝴蝶结:-70deg 为薰衣草色,-115deg 为蓝色,+55deg 为橙色或金色,+150deg 为绿色。白色部分仍保持白色。之后添加 saturate(1.3) 或 brightness(1.1) 来调整效果。无法用这种方式精确匹配某个十六进制颜色(要做到这一点,需要直接编辑 PNG 文件)。请注意,新滤镜会替换蝴蝶结上的柔和阴影,所以要重复添加阴影:filter:hue-rotate(-70deg) drop-shadow(0 4px 4px #d9648b40)

个人简介框(X X X)

框会以柔和的淡入和滑动效果缓缓展开。要修改它,请编辑 @keyframes xb-drop 和 .xb-bio 规则中的 animation:xb-drop .7s 部分。关闭时会立即收起。删除这两项即可恢复为普通的瞬间切换效果。

关于我

class="xb-photo xb-p1" 和 "xb-p2" 两张椭圆形肖像(不使用时设为 src="";如果两张都留空,文本框就会占满宽度)

class="xb-cap" 照片上的贴纸<div class="xb-box"><b>信息</b><p> 三个框。标签写在<b>中,正文写在<p>中。

计划表

(位于「其他」框内,在其文字下方)

四个可以点击展开的小项目框。每个项目的格式如下:

<details class="xb-job xb-done"><summary><span>标题</span>

</summary><p>在此填写详情。</p></details>

类名决定外观:

xb-job xb-done 已完成:实心爱心,标题带删除线

xb-job xb-now 进行中:脉动的爱心和粉色边框

xb-job 计划中:空心爱心

复制一行来添加项目,删除一行来移除项目。要移除整个计划表,请删除<div class="xb-road">区块(从开头的<div>一直到与之对应的</div>)。列表上方的 "Roadmap" 一词来自 .xb-road::before 规则。

作品展示

(系列书架)

每个系列由一对匹配项组成:

<details class="xb-sitem xb-s1" ...> 封面(图片 + 名称)

<div class="xb-sinfo xb-i1"> 与封面 s1 对应的页面是 i1,s2 对应 i2,以此类推。请确保数字匹配。页面内容包括:横幅图片、标题、描述和链接(在写着 YOURTAG 的位置填入你的系列标签)。已设置五个系列。如果需要的系列更少,就删除匹配的一对。封面行会在所有屏幕尺寸下横向滚动,所以你可以添加超过五个:复制一个封面,给它下一个编号(xb-s6、xb-i6),然后将 xb-s6 和 xb-i6 添加到 CSS 中那条列出 s1-s5 和 i1-i5 的长规则里(以 .xb-series:has(.xb-s1[open]) 开头的规则)。封面下方的空间会始终留空,因此选择系列时页面不会跳动。只有奶油色窗口会淡入淡出。

画廊模式

(如果你不想要系列板块)

1. 将 xb-gallery 添加到作品展示区块的 class 中:<div class="xb-drawer xb-series xb-gallery" id="xb-series">

2. 删除整个<div class="xb-sdisplay"> ... </div>区块(所有 xb-sinfo 页面),这样就不会留下空白。

3. 将每张图片的链接放进封面的<img src="">中,并保留或清空名称。空的<b></b>会隐藏小缎带。

封面将不再可点击,你可以通过复制封面行来添加任意数量的封面。将作品展示标题改成类似 "画廊" 的名称。

好友

<a href="PASTE-LINK-HERE" class="xb-pal"><img src="">

<span>名称</span></a>

着迷对象

<a href="PASTE-LINK-HERE" class="xb-fav"><img src="">

<span>机器人名称</span></a>

这两栏都会横向滚动。每一行代表一个项目。复制一

行来添加,删除一行来移除。好友和着迷对象都位于

「收藏集」标签页下。

板块标题

每个标题下方的 x o x o 一行来自

.xb-title::after 规则(修改 content:"" 中的文字,或删除

这条规则)。

角色卡片

每张机器人卡片看起来就像一篇 Instagram 帖子:顶部有爱心、机器人名称和省略号;中间是玫瑰色边框内的方形图片;底部显示聊天数、令牌数和手写风格的 "xoxo"。卡片完全由网站自身的卡片组件构成,因此爱心和聊天气泡图标仅为装饰。在电脑上,将鼠标悬停在卡片上,会有一张「评论」卡片滑上来,显示机器人的简介、创作者的@name(爱心旁边),以及列在底部的标签。手机和平板没有悬停功能,因此轻点只会打开机器人,可能无法显示这张卡片。

标签页、搜索和排序

Darlings / Love Letters 标签页、搜索栏、筛选按钮和排序菜单都改成了奶油色与金色风格,以匹配页面。要重命名标签页,请参阅「个人资料用词」。

额外装饰

飘落花瓣

以<div class="xb-petals">开头的这一行(飘落的 X、O 和爱心)。删除它即可移除这些装饰。

脉动 xoxo

简介框角落里的粉色 "xoxo"。它来自 .xb-intro-text::after 规则:更改文字、大小或颜色,或者删除该规则。宽屏上标签胶囊会为它留出空间,手机上则会显示在它上方。

水波

页眉卡片底部柔和的粉色涟漪水波和闪光分别来自 .xb-hdr::before(水波)和 .xb-hdr::after(闪光)规则。删除这两条规则即可将它们移除。名称的柔和光晕来自 .pp-uc-title::before 规则。

页面小宠物

一只小宠物会在屏幕底部、所有内容上方来回走动,随机切换待机和行走状态,并带有微妙的挤压与拉伸效果。它向左走时会转身。找到 HTML 底部的<div class="xb-pet">。将第一张图片(待机)放进 xb-pet-idle img,将第二张图片(行走)放进 xb-pet-walk img。每个 img 都在自己的 span 内,请不要改动 span。删除整个 xb-pet div 即可

移除宠物。在手机上,它会走在网站底部菜单栏上方。路线每 80 秒循环一次。要更改路线,请编辑@keyframes xb-petmove 中的百分比(left: 的数值),并确保对应的 xb-petidle、xb-petwalk 和 xb-petflip 百分比也同步调整。

减少动态效果

如果访客开启了「减少动态效果」,动画会静止,宠物也会隐藏行走状态(他们会看到待机图片保持不动)。

不使用变量

JanitorAI 会移除 CSS 变量(--something

开头的行),所以这个模板没有使用任何变量。颜色

都直接写在各自的规则里,因此「查找&替换」

可以全局使用。

颜色

主要颜色(查找并替换即可重新着色):

#fb9ebb 粉色 #f2799f 深粉色(按钮)

#fedcdb 腮红色 #ffe6ee 淡粉色

#f6c3d3 柔和边框 #5a3228 标题(深棕色)

#43261f 正文文字 #86594c 柔和棕色(标签)

#fffafa 珍珠白 #d8b97c 镀金装饰

#d9648b 玫瑰色(卡片边框)

署名

Sweet Nothings CSS 作者:@Ru1nous

免费使用和编辑,随你喜欢!欢迎注明出处,但并非必须。

页面底部那行小字 "SWEET NOTHINGS CSS by Ru1nous" 可以保留,

也可以删除,由你决定。