日志

个人空间装修流程

热度 164已有 608 次阅读2024-7-15 15:45 |系统分类:兴趣分享

1. XML部分

决定了空间的版式，如比例是几比几、每部分包含哪些模块。

1) 讨论需要哪些模块、页面如何分布，最终会画一张版式图作为依据。

2) 编写xml代码。

3) 转码，将xml代码合并成一行并转为URL编码，填入下方的两个字段：决定页面比例的currentlayout、决定包含模块的layoutdata（栗子很长就详见附录了）。

2. CSS部分

决定了空间内所有元素的属性，包括尺寸、位置、颜色、透明度、背景图、悬停动画等几乎所有内容均可以由它指定。

也可以创造一些伪元素（如:before）来实现不借助自定义模块也可以在页面中插入内容的效果，如我头像悬停的“The Hanged Man”、无怪头像悬停的牛牛替身使者等等。

CSS代码的可自定义化的程度相当高、需求也因人而异，因此需要按部就班地详细讨论每一个模块，以敲定最终需要达成的效果，再依此编写代码来实现。代码将会填入mycss字段。

举个栗子：

#ct { //调整主版面的属性

background: rgba(146, 160, 166, 0.5) !important; //调整背景颜色为50%透明度的浅灰蓝

transition: background 0.5s; //调整悬停效果的变化速度

border-radius: 10px; //加圆角

backdrop-filter: blur(5px); //加模糊效果

}

#ct:hover { //设置悬停效果

background: rgba(255, 255, 255, 0.6) !important; //悬停时变成60%透明度的白色

}

这只是冰山一角，把页面上所有的元素挨个调教一遍之后，差不多会有个两三百行左右（虽然有不少空行和左大括号单独占行）。快的话大约两三个小时，慢的话……就说不准了（悲）。

3. 个人空间DIY部分

决定了每个模块的内部属性，配合CSS一起做出最终想要的页面效果。

常见的有：每个模块的标题、统计信息要显示哪些内容、主题记录等显示几条、自定义模块填什么内容等等。

举个栗子：

在属性里设置统计信息，只显示积分和来访数，然后在CSS中插入

#statistic_content div:nth-child(1) ul:nth-child(2) li:nth-child(1) {

display: none;

}

这段代码，就可以让“积分: xxx”设置为不显示，另外8种属性就能强迫症狂喜地规规整整排在一起了。

4. 注入代码

将上述字段填好后，在任意一个日志（其实是可回复窗口都行，但主页随便找个日志最方便）打开F12开发者工具，在控制台(Console)里运行注入代码即可。

mycss=`【CSS代码】`

formhash=document.querySelector('input[name=formhash]').value;

fetch("/home.php?mod=spacecp&ac=index", {"credentials":"include","headers":{"content-type":"application/x-www-form-urlencoded"},"body":"spacecss=" + encodeURIComponent(mycss) + "&formhash=" + formhash + "&style=【t1~8 用于选择页面主题一般用t4猫猫/t8圣诞】&layoutdata=【XML部分经url编码后】&currentlayout=【比例经过url编码后】&diysubmit=true","method":"POST","mode":"cors"});

【附录：我的空间的两个字段】

页面比例（英文冒号编码后是%3A）：currentlayout=1%3A2%3A1

包含模块（这玩意儿巨巨巨巨巨长）：layoutdata=

%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22ISO-8859-1%22%3F%3E%3Croot%3E%3Citem%20id%3D%22diypage%22%3E%3Citem%20id%3D%22frame%60frame1%22%3E%3Citem%20id%3D%22attr%22%3E%3Citem%20id%3D%22name%22%3E%3C!%5BCDATA%5Bframe1%5D%5D%3E%3C%2Fitem%3E%3Citem%20id%3D%22moveable%22%3E%3C!%5BCDATA%5Bfalse%5D%5D%3E%3C%2Fitem%3E%3Citem%20id%3D%22className%22%3E%3C!%5BCDATA%5Bframe%20cl%5D%5D%3E%3C%2Fitem%3E%3Citem%20id%3D%22titles%22%3E%3C%2Fitem%3E%3C%2Fitem%3E%3Citem%20id%3D%22column%60frame1_left%22%3E%3Citem%20id%3D%22attr%22%3E%3Citem%20id%3D%22name%22%3E%3C!%5BCDATA%5Bframe1_left%5D%5D%3E%3C%2Fitem%3E%3Citem%20id%3D%22className%22%3E%3C!%5BCDATA%5Bz%20column%5D%5D%3E%3C%2Fitem%3E%3C%2Fitem%3E%3Citem%20id%3D%22block%60profile%22%3E%3Citem%20id%3D%22attr%22%3E%3Citem%20id%3D%22name%22%3E%3C!%5BCDATA%5Bprofile%5D%5D%3E%3C%2Fitem%3E%3Citem%20id%3D%22className%22%3E%3C!%5BCDATA%5Bblock%20move-span%5D%5D%3E%3C%2Fitem%3E%3Citem%20id%3D%22titles%22%3E%3Citem%20id%3D%220%22%3E%3Citem%20id%3D%22text%22%3E%3C!%5BCDATA%5B%E5%A4%B4%E5%83%8F%5D%5D%3E%3C%2Fitem%3E%3C%2Fitem%3E%3Citem%20id%3D%22className%22%3E%3Citem%20id%3D%220%22%3E%3C!%5BCDATA%5Bblocktitle%20title%5D%5D%3E%3C%2Fitem%3E%3C%2Fitem%3E%3Citem%20id%3D%22style%22%3E%3C%2Fitem%3E%3C%2Fitem%3E%3C%2Fitem%3E%3C%2Fitem%3E%3Citem%20id%3D%22block%60statistic%22%3E%3Citem%20id%3D%22attr%22%3E%3Citem%20id%3D%22name%22%3E%3C!%5BCDATA%5Bstatistic%5D%5D%3E%3C%2Fitem%3E%3Citem%20id%3D%22className%22%3E%3C!%5BCDATA%5Bblock%20move-span%5D%5D%3E%3C%2Fitem%3E%3Citem%20id%3D%22titles%22%3E%3Citem%20id%3D%220%22%3E%3Citem%20id%3D%22text%22%3E%3C!%5BCDATA%5Bstatistic%5D%5D%3E%3C%2Fitem%3E%3C%2Fitem%3E%3Citem%20id%3D%22className%22%3E%3Citem%20id%3D%220%22%3E%3C!%5BCDATA%5Bblocktitle%20title%5D%5D%3E%3C%2Fitem%3E%3C%2Fitem%3E%3Citem%20id%3D%22style%22%3E%3C%2Fitem%3E%3C%2Fitem%3E%3C%2Fitem%3E%3C%2Fitem%3E%3Citem%20id%3D%22block%60block1%22%3E%3Citem%20id%3D%22attr%22%3E%3Citem%20id%3D%22name%22%3E%3C!%5BCDATA%5Bblock1%5D%5D%3E%3C%2Fitem%3E%3Citem%20id%3D%22className%22%3E%3C!%5BCDATA%5Bblock%20move-span%5D%5D%3E%3C%2Fitem%3E%3Citem%20id%3D%22titles%22%3E%3Citem%20id%3D%220%22%3E%3Citem%20id%3D%22text%22%3E%3C!%5BCDATA%5Bblock1%5D%5D%3E%3C%2Fitem%3E%3C%2Fitem%3E%3Citem%20id%3D%22className%22%3E%3Citem%20id%3D%220%22%3E%3C!%5BCDATA%5Bblocktitle%20title%5D%5D%3E%3C%2Fitem%3E%3C%2Fitem%3E%3Citem%20id%3D%22style%22%3E%3C%2Fitem%3E%3C%2Fitem%3E%3C%2Fitem%3E%3C%2Fitem%3E%3Citem%20id%3D%22block%60block2%22%3E%3Citem%20id%3D%22attr%22%3E%3Citem%20id%3D%22name%22%3E%3C!%5BCDATA%5Bblock2%5D%5D%3E%3C%2Fitem%3E%3Citem%20id%3D%22className%22%3E%3C!%5BCDATA%5Bblock%20move-span%5D%5D%3E%3C%2Fitem%3E%3Citem%20id%3D%22titles%22%3E%3Citem%20id%3D%220%22%3E%3Citem%20id%3D%22text%22%3E%3C!%5BCDATA%5Bblock2%5D%5D%3E%3C%2Fitem%3E%3C%2Fitem%3E%3Citem%20id%3D%22className%22%3E%3Citem%20id%3D%220%22%3E%3C!%5BCDATA%5Bblocktitle%20title%5D%5D%3E%3C%2Fitem%3E%3C%2Fitem%3E%3Citem%20id%3D%22style%22%3E%3C%2Fitem%3E%3C%2Fitem%3E%3C%2Fitem%3E%3C%2Fitem%3E%3Citem%20id%3D%22block%60block3%22%3E%3Citem%20id%3D%22attr%22%3E%3Citem%20id%3D%22name%22%3E%3C!%5BCDATA%5Bblock3%5D%5D%3E%3C%2Fitem%3E%3Citem%20id%3D%22className%22%3E%3C!%5BCDATA%5Bblock%20move-span%5D%5D%3E%3C%2Fitem%3E%3Citem%20id%3D%22titles%22%3E%3Citem%20id%3D%220%22%3E%3Citem%20id%3D%22text%22%3E%3C!%5BCDATA%5Bblock3%5D%5D%3E%3C%2Fitem%3E%3C%2Fitem%3E%3Citem%20id%3D%22className%22%3E%3Citem%20id%3D%220%22%3E%3C!%5BCDATA%5Bblocktitle%20title%5D%5D%3E%3C%2Fitem%3E%3C%2Fitem%3E%3Citem%20id%3D%22style%22%3E%3C%2Fitem%3E%3C%2Fitem%3E%3C%2Fitem%3E%3C%2Fitem%3E%3C%2Fitem%3E%3Citem%20id%3D%22column%60frame1_center%22%3E%3Citem%20id%3D%22attr%22%3E%3Citem%20id%3D%22name%22%3E%3C!%5BCDATA%5Bframe1_center%5D%5D%3E%3C%2Fitem%3E%3Citem%20id%3D%22className%22%3E%3C!%5BCDATA%5Bz%20column%5D%5D%3E%3C%2Fitem%3E%3C%2Fitem%3E%3Citem%20id%3D%22block%60thread%22%3E%3Citem%20id%3D%22attr%22%3E%3Citem%20id%3D%22name%22%3E%3C!%5BCDATA%5Bthread%5D%5D%3E%3C%2Fitem%3E%3Citem%20id%3D%22className%22%3E%3C!%5BCDATA%5Bblock%20move-span%5D%5D%3E%3C%2Fitem%3E%3Citem%20id%3D%22titles%22%3E%3Citem%20id%3D%220%22%3E%3Citem%20id%3D%22text%22%3E%3C!%5BCDATA%5Bthread%5D%5D%3E%3C%2Fitem%3E%3C%2Fitem%3E%3Citem%20id%3D%22className%22%3E%3Citem%20id%3D%220%22%3E%3C!%5BCDATA%5Bblocktitle%20title%5D%5D%3E%3C%2Fitem%3E%3C%2Fitem%3E%3Citem%20id%3D%22style%22%3E%3C%2Fitem%3E%3C%2Fitem%3E%3C%2Fitem%3E%3C%2Fitem%3E%3Citem%20id%3D%22block%60doing%22%3E%3Citem%20id%3D%22attr%22%3E%3Citem%20id%3D%22name%22%3E%3C!%5BCDATA%5Bdoing%5D%5D%3E%3C%2Fitem%3E%3Citem%20id%3D%22className%22%3E%3C!%5BCDATA%5Bblock%20move-span%5D%5D%3E%3C%2Fitem%3E%3Citem%20id%3D%22titles%22%3E%3Citem%20id%3D%220%22%3E%3Citem%20id%3D%22text%22%3E%3C!%5BCDATA%5Bdoing%5D%5D%3E%3C%2Fitem%3E%3C%2Fitem%3E%3Citem%20id%3D%22className%22%3E%3Citem%20id%3D%220%22%3E%3C!%5BCDATA%5Bblocktitle%20title%5D%5D%3E%3C%2Fitem%3E%3C%2Fitem%3E%3Citem%20id%3D%22style%22%3E%3C%2Fitem%3E%3C%2Fitem%3E%3C%2Fitem%3E%3C%2Fitem%3E%3Citem%20id%3D%22block%60album%22%3E%3Citem%20id%3D%22attr%22%3E%3Citem%20id%3D%22name%22%3E%3C!%5BCDATA%5Balbum%5D%5D%3E%3C%2Fitem%3E%3Citem%20id%3D%22className%22%3E%3C!%5BCDATA%5Bblock%20move-span%5D%5D%3E%3C%2Fitem%3E%3Citem%20id%3D%22titles%22%3E%3Citem%20id%3D%220%22%3E%3Citem%20id%3D%22text%22%3E%3C!%5BCDATA%5Balbum%5D%5D%3E%3C%2Fitem%3E%3C%2Fitem%3E%3Citem%20id%3D%22className%22%3E%3Citem%20id%3D%220%22%3E%3C!%5BCDATA%5Bblocktitle%20title%5D%5D%3E%3C%2Fitem%3E%3C%2Fitem%3E%3Citem%20id%3D%22style%22%3E%3C%2Fitem%3E%3C%2Fitem%3E%3C%2Fitem%3E%3C%2Fitem%3E%3C%2Fitem%3E%3Citem%20id%3D%22column%60frame1_right%22%3E%3Citem%20id%3D%22attr%22%3E%3Citem%20id%3D%22name%22%3E%3C!%5BCDATA%5Bframe1_right%5D%5D%3E%3C%2Fitem%3E%3Citem%20id%3D%22className%22%3E%3C!%5BCDATA%5Bz%20column%5D%5D%3E%3C%2Fitem%3E%3C%2Fitem%3E%3Citem%20id%3D%22block%60block4%22%3E%3Citem%20id%3D%22attr%22%3E%3Citem%20id%3D%22name%22%3E%3C!%5BCDATA%5Bblock4%5D%5D%3E%3C%2Fitem%3E%3Citem%20id%3D%22className%22%3E%3C!%5BCDATA%5Bblock%20move-span%5D%5D%3E%3C%2Fitem%3E%3Citem%20id%3D%22titles%22%3E%3Citem%20id%3D%220%22%3E%3Citem%20id%3D%22text%22%3E%3C!%5BCDATA%5Bblock4%5D%5D%3E%3C%2Fitem%3E%3C%2Fitem%3E%3Citem%20id%3D%22className%22%3E%3Citem%20id%3D%220%22%3E%3C!%5BCDATA%5Bblocktitle%20title%5D%5D%3E%3C%2Fitem%3E%3C%2Fitem%3E%3Citem%20id%3D%22style%22%3E%3C%2Fitem%3E%3C%2Fitem%3E%3C%2Fitem%3E%3C%2Fitem%3E%3Citem%20id%3D%22block%60block5%22%3E%3Citem%20id%3D%22attr%22%3E%3Citem%20id%3D%22name%22%3E%3C!%5BCDATA%5Bblock5%5D%5D%3E%3C%2Fitem%3E%3Citem%20id%3D%22className%22%3E%3C!%5BCDATA%5Bblock%20move-span%5D%5D%3E%3C%2Fitem%3E%3Citem%20id%3D%22titles%22%3E%3Citem%20id%3D%220%22%3E%3Citem%20id%3D%22text%22%3E%3C!%5BCDATA%5Bblock5%5D%5D%3E%3C%2Fitem%3E%3C%2Fitem%3E%3Citem%20id%3D%22className%22%3E%3Citem%20id%3D%220%22%3E%3C!%5BCDATA%5Bblocktitle%20title%5D%5D%3E%3C%2Fitem%3E%3C%2Fitem%3E%3Citem%20id%3D%22style%22%3E%3C%2Fitem%3E%3C%2Fitem%3E%3C%2Fitem%3E%3C%2Fitem%3E%3Citem%20id%3D%22block%60friend%22%3E%3Citem%20id%3D%22attr%22%3E%3Citem%20id%3D%22name%22%3E%3C!%5BCDATA%5Bfriend%5D%5D%3E%3C%2Fitem%3E%3Citem%20id%3D%22className%22%3E%3C!%5BCDATA%5Bblock%20move-span%5D%5D%3E%3C%2Fitem%3E%3Citem%20id%3D%22titles%22%3E%3Citem%20id%3D%220%22%3E%3Citem%20id%3D%22text%22%3E%3C!%5BCDATA%5Bfriend%5D%5D%3E%3C%2Fitem%3E%3C%2Fitem%3E%3Citem%20id%3D%22className%22%3E%3Citem%20id%3D%220%22%3E%3C!%5BCDATA%5Bblocktitle%20title%5D%5D%3E%3C%2Fitem%3E%3C%2Fitem%3E%3Citem%20id%3D%22style%22%3E%3C%2Fitem%3E%3C%2Fitem%3E%3C%2Fitem%3E%3C%2Fitem%3E%3C%2Fitem%3E%3C%2Fitem%3E%3C%2Fitem%3E%3C%2Froot%3E

118