1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

---
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: 关于本页
---


<!-- 页面内容 -->

1
2
3
4
5
6

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

#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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

+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

  ···

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

#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;
  }
}

1
2
3
4
5
6
7
8
9

  ···

inject:
  head:
    - <link rel="stylesheet" href="/css/equipment.css"> 
  bottom:
    - ···

  ···

1
2
3
4
5
6
7
8
9
10
11
12
13
14

- 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