早上逛论坛的时候看到到有个人说手机端下勋章中心显示有点问题，这就突然提醒到我了，之前我自己发现的时候就想解决一下结果后面又给忘了…像这种显示的小问题完全可以通过CSS来临时解决（不想等太久的），而目前好像设置中没有自定义CSS的功能于是“自定义增强”顺势而生
它是干什么的？
一句话：在后台按「条目」管理多条自定义 CSS 或 HTML 片段，保存后全站生效，适合站长自己微调界面、或对新手来说先试水「自定义外观」。
当前版本要点：
自定义 CSS：多条规则会合并注入到 body 起始处 的 <style> 里，并带上注释标签，方便你以后对照是哪一条生效。
HTML · head 末尾：片段插入全站 <head> 末尾。
HTML · body 起始：片段插在 body 开头、主内容之前，适合做公告条、埋点容器一类。
每种类型都可以建多条，列表里可编辑、删除；编辑某一条时也可以 删除本条，避免只在列表里找按钮。
适合谁？
想改导航间距、字号、暗色细节，但不想 fork 主题的；
先把样式写在插件里试错，满意了再考虑固化进主题的。
使用上要注意什么？
权限在 管理员，配置只在插件后台，普通用户看不到。
怎么用起来？
上传压缩包
后台启用插件后，进入 「自定义增强 · 插件详情」。
新增一条 → 填名称（仅列表展示用）、选类型、贴代码 → 保存本条。
前台刷新验证；需要关掉某条就 删除 或清空代码再保存
##最后的话
常规自定义CSS的时候基本都是大段大段的代码，用的多了想要找到其中某个即使是在有注释的情况下也比较麻烦，所以按「条目」管理也算是这个插件小小的亮点吧~
插件设置界面：
手机端勋章中心优化：
ts@media (max-width: 1023px) {
.grid.grid-cols-2.gap-4.xl\:grid-cols-4 {
align-items: stretch;
}
.grid.grid-cols-2.gap-4.xl\:grid-cols-4 > div.flex.h-full.flex-col {
height: 100% !important;
min-height: 0;
overflow: hidden !important;
border-radius: 0.75rem !important;
-webkit-mask-image: -webkit-radial-gradient(white, black);
mask-image: radial-gradient(white, black);
}
.grid.grid-cols-2.gap-4.xl\:grid-cols-4 > div.flex.h-full.flex-col > div.p-4:first-of-type {
border-top-left-radius: 0.75rem;
border-top-right-radius: 0.75rem;
overflow: hidden;
}
.grid.grid-cols-2.gap-4.xl\:grid-cols-4 > div.flex.h-full.flex-col > div.flex.flex-1.items-center.p-4 {
margin-top: auto !important;
flex: 0 0 auto !important;
align-self: stretch !important;
width: 100% !important;
padding-top: 0.75rem !important;
}
.grid.grid-cols-2.gap-4.xl\:grid-cols-4 > div.flex.h-full.flex-col > div.p-4 > p.line-clamp-3 {
font-size: 0.75rem !important;
line-height: 1.5 !important;
-webkit-line-clamp: 4 !important;
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
min-height: calc(1.5em * 4);
box-sizing: border-box;
word-break: normal !important;
overflow-wrap: break-word !important;
}
.grid.grid-cols-2.gap-4.xl\:grid-cols-4 .flex.items-start.justify-between {
gap: 0.35rem !important;
}
.grid.grid-cols-2.gap-4.xl\:grid-cols-4 .flex.items-start.justify-between > span.rounded-full {
font-size: 0.625rem !important;
line-height: 1.2 !important;
padding: 0.08rem 0.28rem !important;
flex-shrink: 0;
align-self: flex-start !important;
max-width: 3.6rem;
text-align: center;
white-space: normal !important;
word-break: keep-all;
}
.grid.grid-cols-2.gap-4.xl\:grid-cols-4 .flex.items-start.justify-between > a[href^="/badges/"] {
flex: 1 1 0% !important;
min-width: 0 !important;
align-items: flex-start !important;
gap: 0.35rem !important;
}
.grid.grid-cols-2.gap-4.xl\:grid-cols-4 .flex.items-start.justify-between > a[href^="/badges/"] > div.flex.h-11.w-11.shrink-0 {
height: 1.625rem !important;
width: 1.625rem !important;
min-height: 1.625rem !important;
min-width: 1.625rem !important;
border-radius: 0.42rem !important;
font-size: 0.8125rem !important;
}
.grid.grid-cols-2.gap-4.xl\:grid-cols-4 .flex.items-start.justify-between > a[href^="/badges/"] > div.flex.h-11.w-11 > span {
font-size: 0.8125rem !important;
}
.grid.grid-cols-2.gap-4.xl\:grid-cols-4 .flex.items-start.justify-between > a[href^="/badges/"] > div.flex.h-11.w-11 svg,
.grid.grid-cols-2.gap-4.xl\:grid-cols-4 .flex.items-start.justify-between > a[href^="/badges/"] > div.flex.h-11.w-11 img {
max-width: 0.875rem !important;
max-height: 0.875rem !important;
width: auto !important;
height: auto !important;
}
.grid.grid-cols-2.gap-4.xl\:grid-cols-4 .flex.items-start.justify-between > a[href^="/badges/"] > div.min-w-0 {
flex: 1 1 0% !important;
min-width: 0 !important;
width: 100%;
max-width: 100%;
}
.grid.grid-cols-2.gap-4.xl\:grid-cols-4 .flex.items-start.justify-between > a[href^="/badges/"] > div.min-w-0 > p.truncate {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.grid.grid-cols-2.gap-4.xl\:grid-cols-4 .flex.items-start.justify-between > a[href^="/badges/"] > div.min-w-0 > h2 {
font-size: clamp(0.68rem, 1.25vw + 0.52rem, 0.8125rem) !important;
line-height: 1.28 !important;
font-weight: 600 !important;
margin-top: 0.125rem !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: break-word !important;
overflow: visible !important;
display: block !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: unset !important;
text-overflow: clip !important;
max-width: 100%;
}
}
请打赏后食用~
附件列表
站内附件
Zidy-1.0.3.zip
ZIP · 6 KB · 下载 6回复可下
登录并回复本帖后可下载
这个用户还没有留下简介。
效果：