教程：Butterfly 主题文章双栏布局插件

原文链接：https://zfe.space/post/hexo-butterfly-article-double-row.html
作者：小冰博客（しゅふがく）

效果

首页文章列表从单栏变成双栏卡片布局：

  • 文章卡片左右两列排列
  • 卡片圆角 + 阴影
  • 封面图在左，标题/摘要在右
  • 宽屏屏幕下更紧凑美观

NPM 插件安装

在博客根目录下打开终端，运行：

1
2
3
4
npm i hexo-butterfly-article-double-row --save

# 或者
cnpm i hexo-butterfly-article-double-row --save

注意：一定要加 --save，不然本地预览时可能不会显示！

配置

在博客根目录 _config.yml 中添加：

1
2
butterfly_article_double_row:
  enable: true

运行

执行 hexo 三连：

1
hexo clean && hexo g && hexo s

即可看到首页文章列表变成双栏布局。

展示效果优化（本站实践）

原插件注入的 cardlistpost.min.css 存在三处问题，本站新增
source/css/double_row.css 在其之后加载并覆盖：

问题 原始写法 修正
封面尺寸规则失效 img.post_bg（下划线） 主题实际类名是 img.post-bg（连字符），已补上正确选择器
内容概述被整段隐藏 >.content{display:none} 改为 -webkit-line-clamp:3 显示三行概述，与首页 description 导读一致
封面被拉变形 固定 height:200px，无 object-fit 改用 aspect-ratio:16/9 + object-fit:cover

另外补充：卡片悬停上浮、封面图片缓慢放大、标题最多两行省略、
≤900px 自动回退单列，以及保证 swiper 轮播与分类磁贴不被 flex 双栏挤压。

修改的文件：source/css/double_row.css（新增），
并在 _config.butterfly.yml 的 inject.head 中引入该样式。