立即注册 登录
GameMale 返回首页

Le Fils des Étoiles https://www.gamemale.com/?733330 [收藏] [复制] [RSS]

日志

个人空间装修流程

热度 174已有 675 次阅读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
119

震惊
40

感谢
3

关心
4

加油
7

有爱

刚表态过的朋友 (173 人)

发表评论 评论 (15 个评论)

回复 xback 2024-7-15 16:10
我直接堆图片
回复 牛牛要白给了 2024-7-15 16:14
看不懂,已经秒了
回复 xvyi 2024-7-15 16:16
牛牛要白给了: 看不懂,已经秒了
直接把无怪的薅过来做情侣同款空间
回复 user_login 2024-7-15 16:20
看来是条条道路通罗马了。
为什么不发一贴?
回复 亚洛斯 2024-7-15 16:33
我看不懂,但我知道昨晚无怪在联机的时候一直在炫耀
回复 亚洛斯 2024-7-15 16:41
user_login: 看来是条条道路通罗马了。
为什么不发一贴?
支持,我要把我的崽和Ty狠狠的摆出来
回复 牛牛要白给了 2024-7-15 17:28
xvyi: 直接把无怪的薅过来做情侣同款空间
什么情侣空间啊,解解不知道不能喜欢上客人吗?
回复 xvyi 2024-7-15 17:31
牛牛要白给了: 什么情侣空间啊,解解不知道不能喜欢上客人吗?
   是让你copy
回复 星之子 2024-7-15 21:20
xback: 我直接堆图片
X老师的自由模块真的绝,已经发挥到极致了惹!
回复 星之子 2024-7-15 21:21
user_login: 看来是条条道路通罗马了。
为什么不发一贴?
因为放在日志里可以直接看效果,帖子里就没有这种沉浸感惹(doge
所以打算放一阵儿,回头有空再去CODE区发个
回复 边山月 2024-7-16 00:39
给我也整一个
回复 边山月 2024-7-16 00:39
xback: 我直接堆图片
你的空间我真的很爱,帮我弄弄,我给你做奴
回复 xwhdx 2024-7-16 22:35
好强哇
回复 好无聊的夏天 2024-8-20 00:33
我学,我学,我往死里学
回复 2297988 2024-11-5 18:25
额滴神啊

facelist

您需要登录后才可以评论 登录 | 立即注册

文字版|手机版|小黑屋|GameMale

GMT+8, 2024-12-18 12:13 , Processed in 0.033285 second(s), 12 queries , Redis On.

Copyright © 2013-2024 GameMale

All Rights Reserved.