说起404界面，其实在很久以前就想搞了，但是对于那时候的我来说，对主题还不是很了解，每次想改源码的时候，就会出现了一堆的报错，然后就是回退不了了之了。目前我主题的魔改基本上都来源于Heo的设计，由于本人学过点前端，所以基本的东西了解点，但就是写不来CSS，所以样式这方面就…

在前短时间就有小伙伴在评论区指出希望我可以出一期404界面的魔改。其实好多魔改我都不怎么愿意出的，因为不是自己设计的（不好意思）。但是想了下，其实这个就算做是分享吧（坏笑）。那么就让我们开始吧！

修改源码

由于需要在404界面添加推荐的文章，那么我们就需要修改源码了，对于修改源码出现了报错等现象，不要惊奇，我们的版本可能不一致我也没有办法了，但是基本上是可以实现的。

修改themes/pottery/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=_p('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
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
#error-wrap .error-content .error-info .error_subtitle{
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
}

#error-wrap {
    position: absolute;
    top: 50%;
    right: 0px;
    left: 0px;
    margin: 0px auto;
    padding: 0px 1rem;
    max-width: 1000px;
    transform: translate(0px, -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: 0px 1rem;
    height: 18rem;
    border-radius: 5px;
    background: var(--card-bg);
    box-shadow: var(--card-box-shadow);
    transition: all 0.3s ease 0s;
}

#error-wrap .error-content:hover {
    box-shadow: var(--card-hover-box-shadow);
}

@media screen and (max-width: 768px) {
    #error-wrap .error-content {
        -webkit-box-orient: vertical;
        flex-direction: column;
        margin: 0px;
        height: 25rem;
    }
}

#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: rgb(48, 122, 246);
    background-position: center center;
    background-size: cover;
}

@media screen and (max-width: 768px) {
    #error-wrap .error-content .error-img {
        -webkit-box-flex: 1;
        flex: 1 1 0%;
        width: 100%;
        border-top-right-radius: 8px;
        border-bottom-left-radius: 0px;
    }
}

#error-wrap .error-content .error-info {
    -webkit-box-flex: 1;
    flex: 1 1 0%;
    padding: 0.5rem;
    text-align: center;
    font-size: 14px;
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

@media screen and (max-width: 768px) {
    #error-wrap .error-content .error-info {
        -webkit-box-flex: 1.1;
        flex: 1.1 1 0%;
        width: 100%;
    }
}

#error-wrap .error-content .error-info .error_title {
    margin-top: -4rem;
    font-size: 9em;
}

@media screen and (max-width: 768px) {
    #error-wrap .error-content .error-info .error_title {
        margin-top: -3rem;
    }
}

#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: 0.5rem;
    padding: 0.3rem 1.5rem;
    background: var(--btn-bg);
    color: var(--btn-color);
}

#error-wrap .error-content .error-info a i {
    padding-right: 0.3rem;
}
.button--animated {
    border-radius: 8px !important;
    transition: 0.3s;
}

#error-wrap .error-content .error-info a:hover {
    background-color: var(--Jay-blue);
    transition: 0.3s;
    transform: scale(1.03);
    box-shadow: var(--Jay-shadow-blue);
}

.button--animated:before {
    display: none;
}
#error-wrap {
    top: 40%;
}

#error-wrap .error-content .error-info .error_title {
    margin-top: -3rem !important;
}

#error-wrap .error-content {
    box-shadow: none !important;
    border-radius: 12px;
    background: var(--Jay-card-bg) !important;
}

#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: var(--Jay-card-bg);
    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;
}

到这里就结束了，由于源码较乱，如果发现css样式缺失可以自行f12获取下。

对于颜色变量请查看博客魔改前置教程