Butterfly的魔改教程：好物推荐页

本篇教程基于 Hexo 6.3.0 & Butterfly 4.8.5 为博主的魔改教程记录，以防自己日后因魔改迷失所记录 📝

本小节魔改内容不包括 顶部banner栏，如有需要请移步至 ✨ 第二章 - 三小节 | 魔改页前置

本小节最后更新于 2023 年 11 月 07 日

231107更新：@林子书提醒，补充一个缺失的replaceAll函数

230607更新：现采用yml数据结构，预计适配json以及memos

效果预览

封の生活好物

靠谱的日常伙伴让工作与生活充满期待

创建数据

创建 [blogRoot]/source/equipment/index.md 页面

---
title: 我的装备
date: 2023-06-06 17:09:42
type: equipment
top_img: false
aside: false
top_page: true
top_bg: https://s11.ax1x.com/2023/06/07/pCiOBKU.jpg
top_item: 我的装备
top_title: 封の生活好物
top_tips: 靠谱的日常伙伴 让工作与生活充满期待
top_link: /blog/42#好物推荐页
top_text: 关于本页
---


<!-- 页面内容 -->

修改 [blogRoot]/themes/butterfly/layout/page.pug 来使页面匹配
（ + 号直接删除即是正常缩进）

      when 'categories'
        include includes/page/categories.pug
+      when 'equipment'
+        include includes/page/equipment.pug
      default
        include includes/page/default-page.pug

创建 [blogRoot]/themes/butterfly/layout/includes/page/equipment.pug 页面，并新增以下内容

#icat-equipment
  - var result = ''
  each i in site.data.equipment
    - let className = i.class_name ? markdown(`## ${i.class_name}`) : ""
    - let classDesc = i.class_desc ? `<div class="equipment-desc">${i.class_desc}</div>` : ""

    - let listResult = `${className}${classDesc} `
    - let listContent = ''
    each j in i.equipment_list
      - let details = ''
      -
        if (j.details_link) {
          details = `<a href="${j.details_link}" title="本站关于 ${j.name} 的产品体验报告" target="_blank" rel="external nofollow">查看文章</a>`
        } else if (j.details_flink) {
          details = `<a href="${j.details_flink}" title="跳转到 ${j.name} 的产品详情" target="_blank" rel="external nofollow">详情</a>`
        }
        listContent += `
          <div class="icat-equipment-box">
            <img src="${j.image}">
            <div class="icat-equipment-content">
              <div class="icat-equipment-name">${j.name}</div>
              <div class="icat-equipment-custom">${j.custom}</div>
              <div class="icat-equipment-opinion">${j.opinion}</div>
              <div class="icat-equipment-box-more">
                ${details}
                <div class="icat-bber-reply" onclick="icatequipment.commentText('${j.name} (${j.custom})')">
                  <i class="iconfont icat-message"></i>
                </div>
              </div>
            </div>
          </div>`
      -
    - listResult += `<div class="equipment">${listContent}</div>`
    - result += listResult
  != result + page.content

如若没有添加过即刻短文页的js，那么就需要在equipment.pug页面第一行增加以下内容
（ + 号直接删除即是正常缩进）

+script.
+    var icatequipment = {
+      replaceAll: function (e, n, t) {
+        return e.split(n).join(t);
+      },
+      commentText: function(e) {
+        if (e == "undefined" || e == "null") e = "好棒！";
+        var n = document.getElementsByClassName("el-textarea__inner")[0],
+          t = document.createEvent("HTMLEvents");
+        if (!n) return;
+        t.initEvent("input", !0, !0);
+        var o = icatequipment.replaceAll(e, "\n", "\n> ");
+        (n.value = "> " + o + "\n\n"), n.dispatchEvent(t);
+        var i = document.querySelector("#post-comment")
+          .offsetTop;
+        window.scrollTo(0, i - 80),
+          n.focus(),
+          n.setSelectionRange(-1, -1),
+          document.getElementById("comment-tips") && document.getElementById("comment-tips")
+          .classList.add("show");
+      }
+    }

#icat-equipment
  - var result = ''
  each i in site.data.equipment

  ···

新建 [blogRoot]/source/css/equipment.css 样式文件，并新增以下内容
（也可以在自建的css文件里新增内容）

#icat-equipment > h2 {
  margin: 20px 7px 0;
}
#icat-equipment .equipment-desc {
  margin: 0 7px;
  color: var(--icat-secondtext);
}
#icat-equipment {
  padding-bottom: 12px;
}
#icat-equipment .equipment {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 0 0;
  gap: 16px;
}
/* 初始化 */

#icat-equipment .equipment > .icat-equipment-box {
  border: 1px solid var(--icat-secondbg);
  background: var(--icat-card-bg);
  width: calc(100% / 4 - 12px);
  border-radius: 12px;
  overflow: hidden;
}
#icat-equipment .equipment .icat-equipment-box img {
  min-width: 100%;
  max-width: 100%;
  height: 200px;
  object-fit: cover;
  animation:fadeIn 1s;
  cursor:pointer;
  transition:all .4s ease-in-out;
}
#icat-equipment .equipment .icat-equipment-box img:hover {
	transform:scale(1.03);
}
#icat-equipment .equipment .icat-equipment-box .icat-equipment-content {
  padding: 16px;
}
#icat-equipment .equipment .icat-equipment-box .icat-equipment-content .icat-equipment-name {
  color: var(--icat-fontcolor);
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#icat-equipment .equipment .icat-equipment-box .icat-equipment-content .icat-equipment-custom {
  font-size: 12px;
  color: var(--icat-secondtext);
  line-height: 1;
  margin-bottom: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#icat-equipment .equipment .icat-equipment-box .icat-equipment-content .icat-equipment-opinion {
  line-height: 20px;
  color: var(--icat-secondtext);
  height: 60px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin-bottom: 16px;
}
#icat-equipment .equipment .icat-equipment-box .icat-equipment-content .icat-equipment-box-more {
  display: flex;
  justify-content: space-between;
}

#icat-equipment .equipment .icat-equipment-box .icat-equipment-content .icat-equipment-box-more a {
  font-size: 12px;
  background: var(--icat-gray-op);
  color: var(--icat-fontcolor);
  padding: 4px 12px;
  border-radius: 6px;
  letter-spacing: 1px;
}
#icat-equipment .equipment .icat-equipment-box .icat-equipment-content .icat-equipment-box-more a:hover {
  color: var(--icat-white);
  background: var(--icat-blue);
  box-shadow: 0 8px 16px -4px var(--icat-black-op);
}
/* 好物页基础样式 */

@media screen and (max-width: 900px) {
  #icat-equipment .equipment {
    gap: 10px;
  }
  #icat-equipment .equipment > .icat-equipment-box {
    width: calc(100% / 3 - 7px);
  }
}
@media screen and (max-width: 768px) {
  #icat-equipment .equipment {
    gap: 8px;
  }
  #icat-equipment .equipment > .icat-equipment-box {
    width: 100%;
  }
  #icat-equipment .equipment .icat-equipment-box img {
    height: 220px;
  }
}
/* 响应式 */

/* 我的好物样式 */

在 _config.butterfly.yml 主题配置文件中 inject 下的 head 引入 equipment.css

  ···

inject:
  head:
    - <link rel="stylesheet" href="/css/equipment.css"> # 我的好物推荐 - 样式
  bottom:
    - ···

  ···

创建 [blogRoot]/source/_data/equipment.yml 文件，并新增以下内容

- class_name: 日常生产力
  class_desc: 平常生活、工作增添效率的产品
  equipment_list:
    - name: iPhone XR
      custom: 主力 | 128G
      opinion: 吸引我的第一点就是珊瑚橙，其次就是当初的性价比，算是跨越性机型吧；特别喜欢裸机的手感，尺寸厚薄等方面也刚刚好，习惯性选手。
      details_flink: https://www.apple.com.cn/
      image: https://s11.ax1x.com/2023/06/07/pCiB3vD.jpg

    - name: iPhone 7
      custom: 备用 | 128G
      opinion: 学生时代的独宠，在当时性能方面也是能轻易吊打新生代们的；修修换换许多次，现在依然顽强的战斗着。
      details_link: https://www.apple.com.cn/
      image: https://s11.ax1x.com/2023/06/07/pCiBYbd.jpg

使用参数

参数	描述	优先级	默认值
name	产品名称	必填	/
custom	产品注释可自定义内容	必填	/
opinion	产品评价	必填	/
details_flink	产品详情链接站外	选填	与 `details_link` 二选一，必须填其中一个
details_link	产品详情链接站内	选填	暂未适配pjax
image	产品图片	必填	/

效果预览

创建数据

使用参数

订阅本站文章：