📚 文档目录

01-添加自定义css和js文件02-footer栏03-友链卡片样式04-站点图片批量半自动截图05-分类磁贴插件版06-添加侧边栏电子钟07-侧边栏归档、分类修改08-标签云增加文章数上下标09-顶部加载渐变条10-导航栏魔改11.1-返回顶部按钮显示网页阅读进度11.2-添加白天夜间模式转换动画11.3-增加分享本页11.4-直达底部12-添加51统计13-404页面展示最近文章14-分类标签归档页增加文章索引15-新标签打开文章16-使用Algolia搜索17-文章双栏布局插件18-动态分类标签导航栏19-增加评论热评轮播功能20-链接卡片标签外挂21-新年倒计时卡片22-文章统计图页面23-隐藏部分文章不在首页显示

修改404页面

修改路径[you_blog]\themes/butterfly/layout/includes/404.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
- var top_img = theme.error_404.background || theme.default_top_img
- var bg_img = `background-image: url('${url_for(top_img)}')`

#body-wrap.error
  div(style='display: none')
    include ./header/index.pug

  #error-wrap
    .error-content
      .error-img(style=bg_img)
      .error-info
        h1.error_title= '404'
        .error_subtitle= theme.error_404.subtitle
        a.button--animated(href=config.root)
          i.fas.fa-rocket
          = _p('回到主页')
          
  .aside-list
    .aside-list-group
        - let postLimit = theme.aside.card_recent_post.limit === 0 ? site.posts.length : theme.aside.card_recent_post.limit || 5
        - let sort = theme.aside.card_recent_post.sort === 'updated' ? 'updated' : 'date'
        - site.posts.sort(sort, -1).limit(postLimit).each(function(article){
          - let link = article.link || article.path
          - let title = article.title || _p('no_title')
          - let no_cover = article.cover === false || !theme.cover.aside_enable ? 'no-cover' : ''
          - let post_cover = article.cover
          .aside-list-item(class=no_cover)
            if post_cover && theme.cover.aside_enable
              a.thumbnail(href=url_for(link) title=title)
                img(src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
            .content
              a.title(href=url_for(link) title=title)= title
              if theme.aside.card_recent_post.sort === 'updated'
                time(datetime=date_xml(article.updated) title=_p('post.updated') + ' ' + full_date(article.updated)) #[=date(article.updated, config.date_format)]
              else
                time(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date)) #[=date(article.date, config.date_format)]
        - })

增加css

在自定义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
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
/* 404页面start */
#error-wrap{
  top: 40%;
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
  padding: 0 1rem;
  max-width: 1000px;
  transform: translate(0,-50%);
}
#error-wrap .error-content {
  display: flex;
  -webkit-box-orient: horizontal;
  flex-direction: row;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  margin: 0 1rem;
  height: 18rem;
  transition: all .3s ease 0s;
  box-shadow: none!important;
  border-radius: 12px;
  background: #fff !important;
}
#error-wrap .error-content .error-img {
  -webkit-box-flex: 1;
  flex: 1 1 0%;
  height: 100%;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  background-color: #307af6;
  background-position: center center;
  background-size: cover;
}
#error-wrap .error-content .error-info {
  -webkit-box-flex: 1;
  flex: 1 1 0%;
  padding: .5rem;
  text-align: center;
  font-size: 14px;
  font-family: "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
#error-wrap .error-content .error-info .error_title{
  margin-top: -3rem!important;
  font-size: 9em;
  padding-top: 0;
  padding-left: 0!important;
}
#error-wrap .error-content .error-info .error_subtitle {
  margin-top: -3.5rem;
  word-break: break-word;
  font-size: 1.6em;
  -webkit-line-clamp: 2;
}
#error-wrap .error-content .error-info a {
  display: inline-block;
  margin-top: .5rem;
  padding: .3rem 1.5rem;
  background: #3f3f3f;
  color: #fff;
}
#error-wrap .error-content .error-info a i {
  padding-right: .3rem;
}
#body-wrap.error .aside-list{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  bottom: 0px;
  position: absolute;
  padding: 1rem;
  width: 100%;
  overflow: scroll;
}
#body-wrap.error .aside-list .aside-list-group{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  max-width: 1200px;
  margin: 0 auto;
}
#body-wrap.error .aside-list .aside-list-item{
  padding: 0.5rem;
}
#body-wrap.error .aside-list .aside-list-item img{
  width: 100%;
  object-fit: cover;
  border-radius: 12px;
}
#body-wrap.error .aside-list .aside-list-item .thumbnail{
  overflow: hidden;
  width: 230px;
  height: 143px;
  background: #fff;
  display: flex;
}
#body-wrap.error .aside-list .aside-list-item .content .title{
  -webkit-line-clamp: 2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-height: 1.5;
  justify-content: center;
  align-items: flex-end;
  align-content: center;
  padding-top: 0.5rem;
}
#body-wrap.error .aside-list .aside-list-item .content time{
  display: none;
}
/* 404页面end */

修改配置项

在[you_blog]\_config.butterfly.yml中修改配置项：

1
2
3
4
5
# A simple 404 page
error_404:
  enable: true
  subtitle: '请尝试站内搜索寻找文章'
  background: /img/404.gif

参考链接

14-分类标签归档页增加文章索引 12-添加51统计