404页面是在文件不存在的时候产生的。设想一个场景,用户急于寻找问题的答案,那么当用户通过例如搜索引擎和错误的内链进入到404网页时,用户可能下意识就会关闭网站。如何在404页面留住用户呢?

在无法判断用户的来源和目标的情况下,最好的还是做主动推荐。所以我在404页面的下方添加了最近的文章列表,使用的是butterfly的侧边栏最近文章列表的代码。

值得一提的是,最近文章模块没有必要在首页显示,因为和左侧的文章列表重复。

Demo

立即访问

代码

编辑路径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('error404.back_button')

.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

1
2
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/zhheo/JS-Heo@main/mainColor/heoMainColor.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/zhheo/JS-Heo@main/404/404.css">