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

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

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

Demo

引用站外地址，不保证站点的可用性和安全性
404
张洪Heo

代码

编辑路径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/npm/js-heo@1.0.11/mainColor/heoMainColor.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/js-heo@1.0.11/404/404.css">