Butterfly 主题魔改 - 友情链接

博文迁移计划：本文由博客旧站迁移而来，仅对图片和错误显示的文字进行勘误翻新，对博文本身所述内容不做更改，望周知
魔改系列提示：本教程适用于原版 Butterfly 主题，对其衍生再发行版本的可用性不做保证

前言

参考教程
查看效果

Preview

替换flink.pug

整体替换 [Blogroot]\themes\butterfly\layout\includes\page\flink.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
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
#article-container
  .flink
    - let pageContent = page.content
    if page.flink_url
      script.
        (()=>{
          const replaceSymbol = (str) => {
            return str.replace(/[\p{P}\p{S}]/gu, "-")
          }

          let result = ""
          fetch("!{url_for(page.flink_url)}")
            .then(response => response.json())
            .then(str => {
              for(let i = 0; i < str.length; i++){
                const replaceClassName = replaceSymbol(str[i].class_name)
                const className = str[i].class_name ? `<h2 id="${replaceClassName}"><a href="#${replaceClassName}" class="headerlink" title="${str[i].class_name}"></a>${str[i].class_name}</h2>` : ""
                const classDesc = str[i].class_desc ? `<div class="flink-desc">${str[i].class_desc}</div>` : ""
                
                let listResult = ""
                const lists = str[i].link_list
                for(let j = 0; j < lists.length; j++){
                  listResult += `
                    <div class="flink-list-item">
                      <a href="${lists[j].link}" style="color:${lists[j].theme_color}" title="${lists[j].name}" target="_blank">
                        <div class="flink-item-icon">
                          <img class="no-lightbox" src="${lists[j].avatar}" onerror='this.onerror=null;this.src="!{url_for(theme.error_img.flink)}"' alt="${lists[j].name}" />
                        </div>
                        <div class="flink-item-name">${lists[j].name}</div> 
                        <div class="flink-item-desc" title="${lists[j].descr}">${lists[j].descr}</div>
                      </a>
                    </div>`
                }

                result += `${className}${classDesc} <div class="flink-list">${listResult}</div>`
              }

              document.querySelector(".flink").insertAdjacentHTML("afterbegin", result)
            })
        })()

    else
      if site.data.link
        - let result = ""
        each i in site.data.link
          - let className = i.class_name ? markdown(`## ${i.class_name}`) : "" 
          - let classDesc = i.class_desc ? markdown(`### ${i.class_desc}`) : ""

          - let listResult = ""

          each j in i.link_list
            - 
              listResult += `
                <div class="flink-list-item">
                  <a href="${j.link}" style="color:${j.theme_color}" title="${j.name}" target="_blank">
                    <div class="flink-item-icon">
                      <img class="no-lightbox" src="${j.avatar}" onerror='this.onerror=null;this.src="${url_for(theme.error_img.flink)}"' alt="${j.name}" />
                    </div>
                    <div class="flink-item-name">${j.name}</div> 
                    <div class="flink-item-desc" title="${j.descr}">${j.descr}</div>
                  </a>
                </div>`
            -

          - result += `${className}${classDesc} <div class="flink-list">${listResult}</div>`

        - pageContent = result + pageContent
    != pageContent

添加CSS

以下CSS样式可添加进任何已引入的.css文件中
例如，在 [Blogroot]\source\css\custom.css 下添加

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
/* 头像微调 */
.flink-item-icon {
    margin-right: 0 !important;
    transition: .5s !important;
}

.flink-item-name,
.flink-item-desc {
    padding-left: 10px !important;
}

/* 去掉原来自带的before */
#article-container .flink .flink-list>.flink-list-item::before {
    content: none;
}

/* 鼠标经过改变背景 */
#article-container .flink .flink-list>.flink-list-item:hover {
    background: linear-gradient(45deg, #07a6f1 25%, #633e9c);
    box-shadow: 0 0 20px rgba(0, 0, 0, .3);
}

/* 鼠标经过改变文字颜色 */
#article-container .flink .flink-list>.flink-list-item:hover a {
    color: white !important;
}

/* 鼠标经过头像滚动 */
#article-container .flink .flink-list>.flink-list-item:hover .flink-item-icon {
    width: 60px;
    margin-left: -70px;
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

添加theme_color属性

修改 [Blogroot]\source\_data\link.yml
在每个友链下加上 theme_color 属性，如下
注意：所有颜色值必须使用英文引号包裹

1
2
3
4
5
6
7
8
- class_name: 朋友
  class_desc: 即是相见 便是缘分
  link_list:
    - name: HiPeach
      link: https://opeach.cn
      avatar: https://opeach.cn/media/bestavatar.webp
      descr: 妙不可言
+     theme_color: "#6F42C1"

完成

请使用Hexo三连秘法
修改完数据记得本地测试后再上传！