chrome小恐龙游戏是chrome浏览器在断网的时候提供的离线小游戏，简单有趣，让我们把它配置到我们的404页面上吧~

新建404页面

在source中新建404文件夹，把下载下来的源文件粘贴过来

打开主题配置文件，修改跳过渲染

这里很坑，自己的js会被hexo编译导致错误，所以需要跳过它

1
2
skip_render:
  - 404/**

清缓存和执行

1
2
hexo clean
hexo d -g

nginx配置修改

进入nginx目录

1
cd /usr/local/nginx/conf

修改nginx配置

1
2
3
4
5
vim nginx.conf

error_page 404 /404.html
//修改为
error_page 404 /404

重启nginx

1
nginx -s reload

若报错

参考内容包含reload问题和内容包含修改文件和端口占用问题

简单优化界面

1
2
3
4
5
6
7
8
9
10
<title >页面丢失啦Σ(っ °Д °;)っ</title>//美化显示在页面标签上的文字

//删去或者注释掉都可以，因为手机上这行字不会消失
<!--<h1 style="text-align: center;font-family: 'Open Sans', sans-serif;">Press Space to start</h1>-->

//添加文字提醒，添加位置在</body>前
<p align="center">页面丢失啦Σ(っ °Д °;)っ</p>
<p align="center">不如来玩玩游戏吧~</p>
<p align="center">按空格或点击手机屏幕使小恐龙跳起来哦~</p>
<a href="/"><center>返回上一页<center></a>

当然啦，这只是简单的小优化，有前端基础的大可以自己修改。

问题与总结

public文件夹的文件会自动删除

我最初把整个小游戏的源码都放在public里面，但是一执行hexo d -g就会自动删除404.html

404页面路径

我最初的error_page 404页面是/404.html（nginx中设定的那个），而我的www.treasurew.com/404,却是空的

出现了访问www.treasurew.com/404出现空的404界面，但访问不存在页面出现小游戏页面的古怪情况。

这一问题最后更改了nginx的error_page 404页面才最终解决

404与404.html

若404页面只是单个html文件，则需要把路径精确到404.html，若是多个文件，则路径最后一步应为404文件夹

没注意这个问题，导致花费了大量的时间寻找错误，实在是不应该

layout跳过主题渲染

适用hexo3.0以上

1
2
3
4
5
6
7
8
9
10
11
skip_render: "test.html"    # source 文件夹下指定文件

skip_render: test/*    # 单个文件夹下全部文件

skip_render: test/*.md    # 单个文件夹下指定类型文件

skip_render: test/**    # 单个文件夹下全部文件及子文件

skip_render:         # 多个文件夹以及其他情况
    - test/*
    - test/*.html

hexo不光会渲染自己写的html，还会渲染自己写的js，有点自作主张的意味了，这导致public的js和source的js不一样

这个错误找了很久很久，引以为戒！