「盒子萌Lolimeow」主题二创「纸鸢版🕊️更新」与「🗼开发笔记」 🎐 🕊️灵阈研都

「盒子萌Lolimeow」主题二创「纸鸢版🕊️更新」与「🗼开发笔记」

白木 2025年8月27日 2026年4月3日 2.93k

🔘 短代码按钮样式优化

文件位置: assets/css/style.css

修复图标下移：调整 [ downloadbtn] 和按钮图标的垂直对齐方式，确保图标与文字居中对齐

.single-content .download_btn:before,
  .single-content .links_btn:before {
      font-family: 'FontAwesome';
      margin-right: 8px;
      font-size: 14px;
      line-height: 1;
      display: inline-block;
      vertical-align: middle;
  }

取消圆角下划线：添加特殊规则，确保短代码按钮不显示文字链接的粉色圆角下划线

/* 🚫 短代码按钮不显示链接下划线 */
  .single-content .download_btn,
  .single-content .links_btn {
      padding: 8px 16px !important;
  }
  
  /* 🚫 确保短代码按钮不显示圆角下划线 */
  .single-content .download_btn::before,
  .single-content .links_btn::before {
      background: none !important;
      height: auto !important;
      position: static !important;
      border-radius: 0 !important;
  }

修复悬停图标消失：添加规则确保按钮悬停时图标保持可见

/* ✨ 确保按钮悬停时图标保持可见 */
  .single-content .download_btn:hover::before,
  .single-content .links_btn:hover::before {
      opacity: 1 !important;
      display: inline-block !important;
  }

优化效果：

✅ 按钮图标正确显示在文字左侧
✅ 图标与文字垂直居中对齐
✅ 按钮不再显示粉色圆角下划线
✅ 悬停时图标保持可见
✅ 兼容深色模式

✨ 代码块样式优化及行号修复

问题描述

代码块行号到9后自动从0开始，而不是显示为10
行号区域缺少背景色
代码内容ol可能超出pre区域
代码块缺少底部阴影
代码块没有悬停效果
语法高亮需要优化支持多语言
无法在代码内容区域选中代码文本

解决方案

通过CSS计数器实现行号正确递增，添加背景色、阴影和悬停效果，优化语法高亮，并确保代码文本可以正常选中。

具体修改

优化代码块CSS样式

文件位置: assets/css/style.css

添加了CSS计数器实现行号正确递增
为行号区域添加了渐变背景色，支持亮色和暗色模式
确保代码内容不超出pre区域
添加了底部阴影效果
实现了斜角流动渐变悬停效果
优化了多语言语法高亮颜色方案
添加了user-select属性确保代码文本可以选中

核心代码：

/* 🎨 代码块样式优化 */
.post-single pre {
    width: 100% !important;
    overflow: auto !important;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* 行号容器样式 */
.post-single pre.prettyprint ol.linenums {
    position: relative;
    background: var(--bs-white);
    border: 1px solid #ebebeb;
    padding: 5px 0;
    box-shadow: inset 33px 0 0 linear-gradient(0deg, #d8d8d8, #ececec), inset 34px 0 0 #ebebeb;
    list-style-type: none;
    counter-reset: line-number;
    z-index: 1;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: pre-wrap !important;
    overflow: hidden !important;
}

/* 行号样式 */
.post-single pre.prettyprint ol.linenums li:before {
    content: counter(line-number);
    display: inline-block;
    width: 25px;
    text-align: right;
    margin-right: 15px;
    position: absolute;
    left: 0;
    color: #999;
    font-size: 12px;
    padding: 0 5px;
    user-select: none;
}

/* 行号悬停效果 */
.post-single pre.prettyprint ol.linenums:after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 4px;
    background: repeating-linear-gradient(
        -45deg,
        rgba(255, 0, 255, 0.8) 0,
        rgba(255, 0, 255, 0.8) 30px,
        rgba(4, 0, 255, 0.8) 30px,
        rgba(4, 0, 255, 0.8) 60px,
        rgba(0, 255, 242, 0.8) 60px,
        rgba(0, 255, 242, 0.8) 90px
    );
    background-size: 300% 300%;
    background-position: 0% 0%;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

/* 确保文本可以选中 */
.post-single pre.prettyprint,
.post-single pre.prettyprint * {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    cursor: text !important;
}

更新行号初始化逻辑

文件位置: assets/js/boxmoe.js

更新了initPrettyPrint()函数，确保CSS计数器正常工作
移除了冲突的行号属性，避免与CSS计数器冲突
确保每一行都正确应用计数器递增

核心代码：

function initPrettyPrint() {
    const prettyprintElements = document.querySelectorAll('.prettyprint');
    if (prettyprintElements.length && window.prettyPrint) {
        window.prettyPrint();
        
        // 修复行号显示问题：当行号超过9时，从10开始显示而不是从0开始
        setTimeout(() => {
            const codeBlocks = document.querySelectorAll('.prettyprint ol.linenums');
            codeBlocks.forEach((codeBlock) => {
                // 确保代码块使用我们的CSS计数器样式
                codeBlock.style.counterReset = 'line-number';
                codeBlock.style.listStyleType = 'none';
                
                const lines = codeBlock.querySelectorAll('li');
                lines.forEach((line, index) => {
                    // 移除Prettify库生成的value属性，避免与CSS计数器冲突
                    line.removeAttribute('value');
                    // 移除所有内联样式，使用CSS中定义的样式
                    line.removeAttribute('style');
                    // 确保每一行都正确应用计数器递增
                    line.style.counterIncrement = 'line-number';
                    // 为每一行设置正确的class，避免Prettify库的样式影响
                    line.className = `L${index % 10}`;
                });
            });
        }, 200);
    }
}

优化行号修复脚本

文件位置: assets/js/fix-prettify-line-numbers.js

调整了行号修复逻辑，确保与CSS计数器方案兼容
移除了冲突的value属性和内联样式
确保CSS计数器正常工作

核心代码：

// 🎯 修复Prettify代码块行号显示问题
// 问题：行号到9后自动从0开始，而不是显示为10
// 解决方案：确保CSS计数器方案正常工作，移除冲突的行号属性

(function() {
    // 等待页面加载完成
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', fixPrettifyLineNumbers);
    } else {
        fixPrettifyLineNumbers();
    }

    function fixPrettifyLineNumbers() {
        // 检查是否存在prettify相关元素
        const prettyprintElements = document.querySelectorAll('.prettyprint.linenums');
        if (prettyprintElements.length === 0) {
            return;
        }

        // 重写PR.prettyPrint函数，确保行号正确生成
        if (window.PR) {
            // 保存原始的prettyPrint函数
            const originalPrettyPrint = window.PR.prettyPrint;
            
            window.PR.prettyPrint = function() {
                // 调用原始函数
                originalPrettyPrint.apply(this, arguments);
                
                // 确保CSS计数器正常工作
                ensureCSSCounterWorks();
            };
        }

        // 立即修复已渲染的行号
        ensureCSSCounterWorks();
    }

    function ensureCSSCounterWorks() {
        // 查找所有带有行号的代码块
        const codeBlocks = document.querySelectorAll('.prettyprint.linenums');
        
        codeBlocks.forEach(function(block) {
            const ol = block.querySelector('ol.linenums');
            if (ol) {
                const lines = ol.querySelectorAll('li');
                
                // 确保CSS计数器正常工作
                ol.style.counterReset = 'line-number';
                ol.style.listStyleType = 'none';
                
                // 修复每个li元素
                lines.forEach(function(line, index) {
                    // 移除冲突的value属性，避免与CSS计数器冲突
                    line.removeAttribute('value');
                    
                    // 移除内联样式，使用CSS中定义的样式
                    line.removeAttribute('style');
                    
                    // 确保行号递增
                    line.style.counterIncrement = 'line-number';
                    
                    // 保持L0-L9的循环样式，用于交替行高亮
                    line.className = `L${index % 10}`;
                });
            }
        });
    }
})();

优化效果

✅ 行号从1开始正确递增，不会在9后重置为0
✅ 行号区域添加了美观的渐变背景色
✅ 代码内容不会超出pre区域，正确包裹显示
✅ 代码块添加了底部阴影，增强视觉层次感
✅ 实现了斜角流动渐变悬停效果，提升用户体验
✅ 优化了多语言语法高亮，支持HTML、CSS、JS、Vue、SCSS、TS、PHP、Go等语言
✅ 代码文本可以正常选中，方便复制使用

使用说明

确保主题已加载相关CSS和JavaScript文件
在文章中使用Markdown代码块语法即可
支持语言标识符，如
```
、
```
html 等
代码块会自动应用优化后的样式

技术要点

使用CSS计数器实现行号正确递增
采用CSS变量和渐变实现美观的样式
支持亮色和暗色模式自适应
使用CSS mask实现复杂的悬停效果
确保代码文本可以正常选中复制
优化了多语言语法高亮颜色方案

参考文件

h:\shiroki-wordpress\shiroki\shiroki\app\public\wp-content\themes\lolimeow-shiroki\assets\css\style.css
h:\shiroki-wordpress\shiroki\shiroki\app\public\wp-content\themes\lolimeow-shiroki\assets\js\boxmoe.js
h:\shiroki-wordpress\shiroki\shiroki\app\public\wp-content\themes\lolimeow-shiroki\assets\js\fix-prettify-line-numbers.js

✨ MD卡片式内容优化

文件位置: wp-content/themes/lolimeow-shiroki/assets/css/shiroki-md-card.css · wp-content/themes/lolimeow-shiroki/core/module/fun-basis.php · wp-content/themes/lolimeow-shiroki/core/module/fun-markdown.php

🔧 修复内容

标签样式优化：

- 修复了文章页面标签样式过大的问题
- 调整了标签的字体大小、内边距和边框圆角
- 确保标签在不同屏幕尺寸下都能正常显示

分类图标居中修复：

- 修复了分类图标不居中在圆角样式内的问题
- 为图标添加了垂直对齐和显示属性
- 确保图标在各种情况下都能保持居中

重复a标签问题修复：

- 修复了卡片链接被重复包裹的问题
- 调整了markdown解析顺序
- 实现了占位符技术，确保卡片内容被正确解析
- 解决了嵌套HTML元素的问题

样式文件分离：

- 将所有md卡片样式从主样式文件移到了单独的文件 shiroki-md-card.css
- 提高了代码的可维护性和可读性
- 避免了样式冲突

避免继承主题a标签样式：

- 新增了避免继承主题a标签悬停背景色的样式
- 确保md卡片的样式不会受到主题样式的影响
- 实现了独立的卡片样式系统

移除!important声明：

- 移除了所有!important声明
- 使用更高的CSS特异性来确保样式生效
- 提高了代码的可维护性

悬停动画优化：

- 将卡片悬停动画改为上移效果
- 增强了悬停时的阴影效果
- 确保动画流畅自然
- 适配浅色和深色模式

头像边框动画修复：

- 取消了悬停时头像边框的动画
- 只保留了头像的缩放和阴影动画
- 确保边框颜色和宽度在悬停时保持不变

勋章样式优化：

- 将勋章背景色从渐变改为纯黄色
- 确保勋章在浅色和深色模式下都能正常显示
- 保持了勋章的其他样式不变

头像边框圆角修复：

- 修复了头像边框从圆角变成四方形的问题
- 确保头像始终保持圆形
- 移除了边框圆角的动画效果
- 适配浅色和深色模式

📋 代码优化要点

CSS特异性优化：

- 为所有md卡片相关样式添加了body前缀
- 提高了CSS选择器的特异性
- 确保卡片样式不会被主题样式覆盖

Markdown解析优化：

- 调整了markdown解析顺序
- 实现了占位符技术
- 确保卡片内容被正确解析
- 避免了嵌套HTML元素

样式重置优化：

- 重置了卡片链接的所有可能影响样式
- 确保卡片内部元素不受主题样式影响
- 实现了独立的卡片样式系统

动画优化：

- 只过渡必要的属性
- 确保动画流畅自然
- 避免了不必要的动画效果

🎨 样式特点

漫画风格设计：

- 采用圆角、阴影和渐变效果
- 头像圆形设计，带有边框和阴影
- 左上角勋章标签，带有旋转效果
- 整个卡片可点击跳转（新标签打开）

响应式设计：

- 适配不同屏幕尺寸
- 在小屏幕上自动调整为单列布局
- 确保在各种设备上都能正常显示

暗色模式适配：

- 为深色模式下的卡片添加了专门的样式
- 确保卡片在深色模式下也能正常显示
- 保持了与浅色模式一致的设计风格

📖 使用说明

启用MD语法编辑器：

- 后台 → 外观 → 盒子萌主题设置 → 系统优化 → 启用MD语法编辑器

使用卡片语法：

名称：
   头像链接：
   描述：
   链接：
   勋章：

发布文章：

- 在编辑器中输入卡片语法，点击发布
- 前端将显示漫画风格的卡片

🔍 代码寻找

MD卡片样式：wp-content/themes/lolimeow-shiroki/assets/css/shiroki-md-card.css
样式加载：wp-content/themes/lolimeow-shiroki/core/module/fun-basis.php
Markdown解析：wp-content/themes/lolimeow-shiroki/core/module/fun-markdown.php

📝 优化效果

✅ 标签样式大小适中，显示正常
✅ 分类图标居中在圆角样式内
✅ 卡片链接不再重复
✅ 卡片样式独立，不受主题样式影响
✅ 无!important声明，代码可维护性高
✅ 悬停时卡片上移，动画流畅自然
✅ 头像边框无动画，保持静止状态
✅ 勋章背景色为纯黄色
✅ 头像始终保持圆形，边框无动画
✅ 适配浅色和深色模式

🚀 后续优化方向

进一步优化CSS特异性：

- 继续优化CSS选择器
- 确保样式的精确性
- 提高代码的可维护性

增强响应式设计：

- 进一步优化不同屏幕尺寸下的显示效果
- 确保在各种设备上都能提供良好的用户体验

优化性能：

- 减少CSS和JavaScript的加载大小
- 优化动画性能
- 提高页面加载速度

增强可定制性：

- 提供更多的卡片样式选项
- 支持自定义卡片颜色和动画
- 允许用户根据需要调整卡片样式

📅 更新记录

2025-12-21：完成了MD卡片式内容的全面优化
2025-12-20：修复了标签样式和分类图标居中问题
2025-12-19：将md卡片样式移到了单独的文件
2025-12-18：修复了重复a标签和!important声明问题
2025-12-17：优化了悬停动画和头像边框动画

📌 总结

独立的样式系统：不会受到主题样式的影响
流畅的动画效果：悬停时卡片上移，增强用户体验
适配浅色和深色模式：在各种主题下都能正常显示
响应式设计：适配不同屏幕尺寸
漫画风格设计：美观、可爱，符合主题风格
可维护的代码：移除了!important声明，使用更高的CSS特异性

这个优化后的MD卡片式内容系统，将为用户提供更好的阅读体验，同时也提高了代码的可维护性和扩展性。

分页🎉 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

上一次更新已经跑远惹✨ 计算中...

(‾◡◝) 本内容里的一些消息，可能已经跟不上时间啦～

查看评论列表

小笨蛋 2026年01月13日

赞！

小笨蛋 2026年01月13日

不错不错ツ

发表评论取消回复

访客未填写邮箱

[填写昵称邮箱后可以评论]

插入代码

「Hugo-Teek」优化及建议

2025-12-17阅读全文

加载中

「盒子萌Lolimeow」主题二创「纸鸢版🕊️更新」与「🗼开发笔记」

🔘 短代码按钮样式优化

✨ 代码块样式优化及行号修复

问题描述

解决方案

具体修改

✨ MD卡片式内容优化

🔧 修复内容

📋 代码优化要点

🎨 样式特点

📖 使用说明

🔍 代码寻找

📝 优化效果

🚀 后续优化方向

📅 更新记录

📌 总结

评论（2）

发表评论取消回复

插入代码

调查...

北京时间 (Asia/Shanghai)

最新文章

🎮「游戏资讯」20260409日报整理

🦐 「OpenCalw」内置指令

🦐 「OpenCalw」容器关键指令

🎮「游戏资讯」20260408日报整理

🎮「游戏资讯」20260407日报整理

SCUM刻荒岛共创

银幕不灭，故事无删

「七日世界」获取模组的地方汇总 - 包含地点、坐标、获得类型、对应boss

年号

🎮「游戏资讯」20260314日报整理

🎮「游戏资讯」20260316日报整理

「灵机之都」28集团军及治安 - 系统机制 - 个人创意策划

「Hugo-Teek」优化及建议

加载中

「盒子萌Lolimeow」主题二创「纸鸢版🕊️更新」与「🗼开发笔记」

🔘 短代码按钮样式优化

✨ 代码块样式优化及行号修复

问题描述

解决方案

具体修改

✨ MD卡片式内容优化

🔧 修复内容

📋 代码优化要点

🎨 样式特点

📖 使用说明

🔍 代码寻找

📝 优化效果

🚀 后续优化方向

📅 更新记录

📌 总结

感谢您的支持

评论（2）

发表评论 取消回复

插入代码

调查...

北京时间 (Asia/Shanghai)

最新文章

银幕不灭，故事无删

发表评论取消回复