子比美化 - 文章页顶部分割线+图标

第一步：准备好 “专属分割线素材”

• 首先要确认核心素材 —— 分割线代码和图标。文中提供的代码已经帮我们做好了基础框架：包含自动填充两侧的加粗虚线、垂直居中的图标容器，以及适配子比主题风格的样式（比如线条和图标的透明度统一为 0.6，避免过于突兀）。
• 唯一需要我们自行调整的，是图标路径。代码里默认的是 “黑猫.svg”，你可以替换成更贴合自己博客风格的图标：比如科技类博客用齿轮、芯片图标，文艺类博客用树叶、钢笔图标，生活类博客用相机、咖啡杯图标。图标建议选择 SVG 格式，因为它支持无限放大且不会模糊，适配不同屏幕尺寸；如果用 PNG，记得将尺寸调整为 18px×18px（代码中已固定图标大小），避免拉伸变形。
• 找图标的渠道很灵活：可以在Flaticon、Iconfont等平台下载免费图标，也可以用设计工具（如 Figma、Canva）制作专属图标，最后将图标上传到博客的媒体库，复制对应的 “文件 URL”，替换代码里src="https://img.520ak.com/i/2025/08/22/黑猫.svg"中的链接即可。

第二步：在子比主题后台 “一键植入” 代码

1. 登录你的 WordPress 后台，在左侧菜单栏找到 “子比主题设置”，点击进入；
2. 在主题设置页面，依次展开 “文章 & 列表”→“文章页面”，找到 “文章插入内容” 选项（这是子比主题专门为文章添加自定义内容的功能，支持在正文前、正文后插入内容，这里我们用它来加顶部分割线）；
3. 将文中提供的完整代码（包含 HTML 结构和 CSS 样式）复制粘贴到 “文章插入内容” 的输入框中，注意选择 “在正文前插入”（确保分割线出现在文章开头）；
4. 点击页面底部的 “保存设置”，此时代码已经生效，接下来只需发布或刷新一篇文章，就能看到效果了。
5. 部分朋友不需要顶部的作者信息和评论/浏览/点赞（子比没有设置，我是直接改的主题文件，zibll/inc/functions/zib-single.php 大概在345行，注释掉就行了。如下图所示！）

实现代码

第三步：根据博客风格微调，让效果更和谐

• 调整上下间距：如果觉得分割线与标题、正文的距离太近或太远，只需修改 CSS 里.divider-wrapper的margin: 12px 0;—— 比如想让间距更大，就改成margin: 16px 0;，想更小就改成margin: 8px 0;；
• 改变线条风格：默认是加粗虚线（border-top: 2px dashed #ccc;），若想换成实线，把dashed改成solid；想换线条颜色，把#ccc（浅灰色）改成博客主色调，比如#333（深灰色）、#2c91e6（蓝色）；
• 调整图标透明度：如果觉得图标太淡，可将.divider-img的opacity: 0.6;改成0.8或1（完全不透明），反之则改小数值。

最终效果：让每篇文章都有 “专属印记”

• 设置完成后，打开任意一篇文章，你会看到：页面顶部不再是单调的空白，而是一条对称的加粗线条，中间嵌着你选择的专属图标 —— 就像给文章盖了一枚 “专属印记”。不仅如此，这个分割线还能适配移动端：在手机屏幕上，线条会自动缩短，图标始终居中，不会出现变形或错位的情况。
• 其实，博客美化不一定需要复杂的插件或代码，像这样一个小小的顶部分割线图标，既能提升页面的精致度，又能让读者记住你的博客风格。如果你还在为文章开头的单调发愁，不妨试试这个方法，让每篇内容的 “开场白” 都更有辨识度。