用了这么久的Butterfly主题了，也对这个主题有了一定的了解了，随着使用的次数增加，对它的要求也就越来越高了，看到别人好多的新功能，就想着自己也应该做些让自己方便的事情了。毕竟博客就是为了方便自己（记笔记、回顾知识等），所以就想着有些自定义的页面，这样自己网站也不会太单调。

这篇教程就是针对Butterfly主题如何实现自定义页面的。

详解

首先，我们需要了解Butterfly主题是怎么识别不同的页面的。当然，你得了解一点点前端的东西，其实就不难理解主题中的每一个文件的作用了。

一开始我们是不是不太明白为什么创建友链的时候创建link页面的时候需要加上type: "link"。其实这个就是告诉主题我们这个页面是特殊的页面。打开themes/butterfly/layout/page.pug文件，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
extends includes/layout.pug

block content
  #page
    if top_img === false
      h1.page-title= page.title

    case page.type
      when 'tags'
        include includes/page/tags.pug
      when 'link'
        include includes/page/flink.pug
      when 'categories'
        include includes/page/categories.pug
      when 'stars'
        include includes/page/stars.pug
      default
        include includes/page/default-page.pug

    if page.comments !== false && theme.comments && theme.comments.use
      - var commentsJsLoad = true
      !=partial('includes/third-party/comments/index', {}, {cache: true})

可以看到，这里会选择页面的类型，进入不同的页面。即when 'link'进入的就是友情链接页面，其他同理。

打开themes/butterfly/layout/includes/page文件，我们可以看到有flink.pug，tags.pug等，这些就是这个页面的代码了，需要自定义的小伙伴可以在里面进行修改。

创建自定义页面

看了上面的讲解，是不是已经了解了如何自定义页面了呢。

下面就是关于我是如何实现网站收藏页面的过程（顶部大图模块可以自行f12取），你可以参考自行选择。

创建页面

  1. 在博客根目录输入hexo new page stars，在source/stars/index.md的头部输入type: "stars"

  2. 在themes/butterfly/layout/includes/page文件下新建stars.pug文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    .flink#article-container
        if site.data.stars
            each i in site.data.stars
                if i.class_name
                    h2!= i.class_name
                if i.class_desc
                    .flink-desc!=i.class_desc
                .flink-list
                    each item in i.link_list
                        .flink-list-item
                            a(href=url_for(item.link)  title=item.name target="_blank")
                                - var urlNoProtocol = item.link.replace(/^https?\:\/\//i, "")
                                - var imgUrl = "https://api.iowen.cn/favicon/" + urlNoProtocol + ".png"
                                img.flink-avatar.entered.loaded(src=url_for(imgUrl) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name)
                                .img-alt.is-center= item.name
                                .flink-item-info
                                    span.flink-item-name= item.name
                                    span.flink-item-desc(title=item.descr)= item.descr
        != page.content

引入页面

修改themes/butterfly/layout/page.pug文件，注意对齐

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
extends includes/layout.pug

block content
  #page
    if top_img === false
      h1.page-title= page.title

    case page.type
      when 'tags'
        include includes/page/tags.pug
      when 'link'
        include includes/page/flink.pug
      when 'categories'
        include includes/page/categories.pug
+      when 'stars'
+        include includes/page/stars.pug
      default
        include includes/page/default-page.pug

    if page.comments !== false && theme.comments && theme.comments.use
      - var commentsJsLoad = true
      !=partial('includes/third-party/comments/index', {}, {cache: true})

引入样式

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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
.flink#article-container .flink-desc {
    margin: 0.2rem 0px 0.5rem;
}

.flink#article-container .flink-list {
    overflow: auto;
    padding: 10px 10px 0px;
    text-align: center;
}

.flink#article-container .flink-list > .flink-list-item {
    position: relative;
    float: left;
    overflow: hidden;
    margin: 15px 7px;
    width: calc(25% - 12px);
    height: 90px;
    border-radius: 5px;
    line-height: 17px;
    transform: translateZ(0px);
    transition: all 0.3s ease 0s;
}

@media screen and (max-width: 1200px) {
    .flink#article-container .flink-list > .flink-list-item {
        width: calc(25% - 12px) !important;
    }
}

@media screen and (max-width: 1024px) {
    .flink#article-container .flink-list > .flink-list-item {
        width: calc(33.3333% - 12px) !important;
    }
}

@media screen and (max-width: 768px) {
    .flink#article-container .flink-list > .flink-list-item {
        width: calc(50% - 12px) !important;
    }
}

@media screen and (max-width: 600px) {
    .flink#article-container .flink-list > .flink-list-item {
        width: calc(100% - 12px) !important;
    }
}

.flink#article-container .flink-list > .flink-list-item:hover {
    background: rgb(0, 108, 242);
    transform: scale(1.05);
}

.flink#article-container .flink-list > .flink-list-item a {
    color: var(--Jay-fontcolor);
    text-decoration: none;
}

.flink#article-container .flink-list > .flink-list-item a img {
    float: left;
    margin: 15px 10px;
    width: 60px;
    height: 60px;
    border-radius: 35px;
    transition: all 0.3s ease 0s;
}

.flink#article-container .flink-list > .flink-list-item a .img-alt {
    display: none;
}

.flink#article-container .flink-list > .flink-list-item a .flink-item-name {
    display: block;
    padding: 16px 10px 0px 0px;
    height: 40px;
    font-weight: 700;
    font-size: 1.43em;
}

.flink#article-container .flink-list > .flink-list-item a .flink-item-desc {
    display: block;
    padding: 16px 10px 16px 0px;
    height: 50px;
    font-size: 0.93em;
}
.flink#article-container .flink-list {
    padding: 0;
    margin: 1rem -6px 0 -6px;
    overflow-x: hidden;
}

.flink#article-container .flink-desc {
    margin: 0;
}

.flink#article-container .flink-list > .flink-list-item a .flink-item-desc {
    white-space: normal;
    padding: 5px 10px 16px 0;
    color: var(--Jay-fontcolor);
    text-align: left;
    height: 40px;
    text-overflow: ellipsis;
    opacity: 0.7;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.flink#article-container .flink-list > .flink-list-item:hover a .flink-item-desc {
    color: var(--Jay-white);
}

.flink-list-item .flink-item-info {
    max-width: 136px;
    overflow: hidden;
}

.flink-list-item:hover .flink-item-info {
    max-width: 100%;
}

.flink#article-container .flink-list > .flink-list-item a .flink-item-name {
    text-align: left;
    font-size: 19px;
    color: var(--Jay-fontcolor);
}

.flink#article-container .flink-list > .flink-list-item:hover a .flink-item-name {
    color: var(--Jay-white);
}

.flink#article-container .flink-list > .flink-list-item a {
    display: flex;
    border: none;
}

.flink#article-container .flink-list > .flink-list-item a:hover {
    background: none;
}

/* 友链头像 */
.flink#article-container .flink-list > .flink-list-item a img {
    border-radius: 32px;
    margin: 15px 20px 15px 15px;
    transition: 0.3s;
    background: var(--Jay-background);
    min-width: 60px;
    min-height: 60px;
}

/* 悬浮状态头像 */
.flink#article-container .flink-list > .flink-list-item:hover a img {
    transition: 0.6s;
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0.5rem;
    min-width: 0px;
    min-height: 0px;
}

.flink#article-container .flink-list > .flink-list-item a span {
    transition: 0.3s;
}

.flink#article-container .flink-list > .flink-list-item:hover a .flink-item-desc {
    overflow: inherit;
    width: 100%;
}

.flink#article-container .flink-list > .flink-list-item {
    margin: 6px 6px;
    transition: 0.3s;
    border-radius: 12px;
    transition-timing-function: ease-in-out;
    position: relative;
    width: calc(20% - 12px);
    border: var(--style-border);
    box-shadow: var(--Jay-shadow-border);
    background: var(--Jay-card-bg);
}

.flink#article-container .flink-list > .flink-list-item:hover {
    transform: scale(1);
    background: var(--Jay-theme);
    border: var(--style-border-hover);
    box-shadow: var(--Jay-shadow-main);
}

@media screen and (min-width: 1300px) {
    .flink#article-container .flink-list > .flink-list-item:hover {
        transform: scale(1.03);
    }

    .flink#article-container .flink-list > .flink-list-item:active {
        transform: scale(0.97);
    }
}

创建网页链接

上面已经创建好了页面，那么剩下的就是如何将想要收藏的页面发上去了。

  1. 新建source/_data/stars.yml文件，写法和友链页面一样

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    # siteshot就是站点缩略图的链接
    # list_style设置友链样式，不设置默认为butterfly

    - class_name: 设计素材
      class_desc: 为你的设计添加色彩
      list_style: butterfly
      link_list:
        - name: Font Awesome
          link: https://fontawesome.com/
          descr: 一个基于CSS和LESS的字体和图标工具包

    - class_name: 博客资源网
      class_desc: 帮助构建博客的资源网站
      list_style: butterfly
      link_list:
        - name: 百家号
          link: https://baijiahao.baidu.com/
          descr: 创作者打造的集创作、发布、变现于一体的内容创作平台（暂时可图床）

    这里不用填写avatar链接了，因为已经通过api获取了。

由于博主样式太多，已无法完整获取对应的样式（样式有点乱），所以缺少样式可以f12获取。