实现原理：代码背后的逻辑

• PHP 代码：负责判断文章是否为置顶状态，若是则输出带特定类名的 “置顶” 标签（类名hm-honor-s，用于后续 CSS 定位）。
• CSS 代码：通过关键帧动画（@keyframes）定义火焰的燃烧形态，再用伪元素（before/after）在标签右侧生成两层火焰，配合动画让火焰 “动” 起来。

分步教程：从代码到效果的完整落地

第一步：修改 PHP 文件，输出带样式的置顶标签

1. 找到目标文件：
   登录网站后台，通过 FTP 或 “外观 - 主题文件编辑器” 打开子比主题的inc/functions/zib-posts-list.php（不同版本路径可能略有差异，若找不到可搜索含 “置顶” 文字的文件，通常在loop或post-item相关模板中）。
2. 替换置顶标签代码：
   搜索与 “置顶” 相关的代码（通常会有zib_is_sticky()判断），找到类似如下的代码段：

if (zib_is_sticky()) { $sticky = '<badge class="some-class">置顶</badge>'; } else { $sticky = ''; }

if (zib_is_sticky()) {
    $sticky = '<badge class="img-badge left hm-honor-s">置顶</badge>';
} else {
    $sticky = '';
}

第二步：添加 CSS 代码，实现火焰动态效果

1. 打开自定义 CSS 面板：
   后台进入 “外观 - 自定义 - 额外 CSS”（子比主题通常有这个入口，若没有可通过 “主题设置 - 自定义代码 - 自定义 CSS” 添加）。
2. 粘贴完整 CSS 代码：
   将下面的 CSS 代码复制进去，点击 “保存并发布”：

第三步：调整细节，适配你的网站风格

• 火焰位置：修改.hm-honor-s:before中的right（左右位置）和top（上下位置），比如right: -35px让火焰更靠近标签。
• 火焰大小：调整width（宽度）和height（高度），数值越小火焰越紧凑。
• 动画速度：修改animation中的时间（如0.9s改为1.2s让火焰燃烧更慢）。
• 颜色渐变：替换background: linear-gradient(...)中的色值（如#ff5722改为#e91e63加深红色调）。

常见问题：遇到问题这样解决

1. 火焰不显示？
   检查 PHP 代码中是否正确添加了hm-honor-s类名，以及 CSS 是否完整添加到自定义样式中（可通过浏览器 “检查元素” 查看是否有该类名的样式）。
2. 火焰位置错乱？
   可能是主题标签的默认样式影响，可在.hm-honor-s中添加margin: 0 5px（调整标签间距），或通过!important强制覆盖冲突样式。
3. 动画卡顿？
   火焰动画依赖clip-path，老旧浏览器（如 IE）不支持，建议忽略；现代浏览器卡顿可适当增大动画时间（如1s以上）。

总结：让置顶内容 “会说话”