【插件发布】自定义增强 V1.0.3

1,539

这个用户还没有留下简介。

回复讨论

早上逛论坛的时候看到到有个人说手机端下勋章中心显示有点问题，这就突然提醒到我了，之前我自己发现的时候就想解决一下结果后面又给忘了…像这种显示的小问题完全可以通过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%;
  }
}

请打赏后食用~