{"id":21831175,"url":"https://github.com/yansheng836/404pages","last_synced_at":"2025-06-18T18:38:15.432Z","repository":{"id":57751963,"uuid":"197338346","full_name":"yansheng836/404pages","owner":"yansheng836","description":"收集了几个自定义的404页面的模板。","archived":false,"fork":false,"pushed_at":"2022-10-06T16:47:16.000Z","size":3301,"stargazers_count":42,"open_issues_count":0,"forks_count":16,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-21T07:39:56.055Z","etag":null,"topics":["404","404page","css","html","javascript"],"latest_commit_sha":null,"homepage":"https://yansheng836.github.io/404pages/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yansheng836.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-17T07:29:33.000Z","updated_at":"2025-04-14T21:58:26.000Z","dependencies_parsed_at":"2022-08-22T17:01:34.931Z","dependency_job_id":null,"html_url":"https://github.com/yansheng836/404pages","commit_stats":null,"previous_names":[],"tags_count":3,"template":true,"template_full_name":null,"purl":"pkg:github/yansheng836/404pages","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yansheng836%2F404pages","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yansheng836%2F404pages/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yansheng836%2F404pages/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yansheng836%2F404pages/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yansheng836","download_url":"https://codeload.github.com/yansheng836/404pages/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yansheng836%2F404pages/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260611222,"owners_count":23036297,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["404","404page","css","html","javascript"],"created_at":"2024-11-27T19:08:50.283Z","updated_at":"2025-06-18T18:38:10.419Z","avatar_url":"https://github.com/yansheng836.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![GitHub](https://img.shields.io/github/license/yansheng836/404pages.svg) ![GitHub repo size](https://img.shields.io/github/repo-size/yansheng836/404pages.svg) ![GitHub release](https://img.shields.io/github/release/yansheng836/404pages.svg) ![GitHub last commit](https://img.shields.io/github/last-commit/yansheng836/404pages.svg) ![GitHub language count](https://img.shields.io/github/languages/count/yansheng836/404pages.svg) ![GitHub top language](https://img.shields.io/github/languages/top/yansheng836/404pages.svg)\r\n\r\n# 404pages : HTTP Status 404 – Not Found\r\n\r\n![404pages](https://s2.ax1x.com/2019/07/17/ZLQV0g.jpg)\r\n\r\n## 介绍\r\n\r\n1. 该项目收集了几个404的页面模板，可用于替换原生的404页面。我这里只是进行整理，部分来自网络，部分来自其他项目。\r\n\r\n2. 自定义一个404页面好像并不难，难的是如何让”状态码为404的请求“都转向我们自定义的404页面，关于这个问题可参考我转发的一篇博客：[三种思路实现自定义404页面](https://blog.csdn.net/weixin_41287260/article/details/96030104)，我这里用的是第三种：利用web容器提供的error-page标签，在`web.xml`中添加 `\u003cerror-page\u003e` 标签即可实现，如下所示：\r\n\r\n```xml\r\n\u003cerror-page\u003e\r\n    \u003cerror-code\u003e404\u003c/error-code\u003e\r\n    \u003clocation\u003e/resource/view/404.html\u003c/location\u003e\r\n\u003c/error-page\u003e\r\n```\r\n\r\n3. 我已将每个404页面独立开来，并将他们整理到一个个二级文件夹。这样\u003cfont color=\"red\"\u003e如果有需要，直接复制对应文件夹即可\u003c/font\u003e；当然你也可以进行修改，对其进行个性化设置，可参考：[修改建议](https://github.com/yansheng836/404pages/blob/master/docs/change-advice.md)。\r\n\r\n## 404页面分类\r\n\r\n具体效果到 [github pages](https://www.yansheng.xyz/404pages/) 查看，下面是简单介绍。\r\n\r\n（注：该分类主要是以页面是否有大量js交互为依据）\r\n\r\n1. 静态404页面：HTML+简单CSS+简单的js交互。\r\n   - 透明简约404页面![eMdO76.jpg](https://s2.ax1x.com/2019/07/27/eMdO76.jpg)\r\n   - 暗黑主题404页面![eMwS9e.jpg](https://s2.ax1x.com/2019/07/27/eMwS9e.jpg)\r\n   - 飞机404页面![eMw9cd.jpg](https://s2.ax1x.com/2019/07/27/eMw9cd.jpg)\r\n   - 哭脸404页面![eMwFBt.jpg](https://s2.ax1x.com/2019/07/27/eMwFBt.jpg)\r\n   - 蓝色简约-纯文字404页面![eMwinI.jpg](https://s2.ax1x.com/2019/07/27/eMwinI.jpg)\r\n\r\n2. 动态404页面：HTML+CSS动画+简单的js交互。（浏览器加载时，会比较耗内存、GPU。）\r\n   - 纯css3海面404页面动画特效![eMwVN8.gif](https://s2.ax1x.com/2019/07/27/eMwVN8.gif)\r\n   - 腾讯公益-404页面![eMwkHP.jpg](https://s2.ax1x.com/2019/07/27/eMwkHP.jpg)\r\n   \r\n3. 404小游戏：\r\n   \r\n   - 吾爱破解社区-《圈小猫》![eMwEAf.jpg](https://s2.ax1x.com/2019/07/27/eMwEAf.jpg)\r\n   - 404小游戏2：google-酷跑（暂未添加）\r\n\r\n## 补充内容\r\n\r\n1. 应用js的三种方式。\r\n2. 使超链接失效的方法。\r\n3. 实现跳转到上一页的方法。\r\n\r\n## 致谢\r\n\r\n1. [i7素材网](http://www.17sucai.com)：部分404页面来自该网站。\r\n2. [吾爱破解社区](https://www.52pojie.cn)：我当时想自定义404页面就是受《圈小猫》游戏的影响，我的项目中的此部分内容转载自：吾爱破解社区在github上的开源项目：[phaser-catch-the-cat](https://github.com/ganlvtech/phaser-catch-the-cat)，游戏试玩地址：\u003chttps://ganlvtech.github.io/phaser-catch-the-cat/\u003e 。\r\n该项目使用一个游戏引擎写的，有兴趣可到官网了解：\u003chttps://phaser.io/\u003e 。\r\n\r\n## 声明\r\n\r\n本项目仅用于学习交流使用，大部分网页源自网络，所有权归原作者所有，如涉及侵权，请联系我进行删除。\r\n\r\n## 我的环境\r\n\r\nMyEclipse10.7, JDK1.8, Tomcat7.0\r\n\r\n## 构建(使用)\r\n\r\n1. 克隆项目到本地：git clone https://github.com/yansheng836/404pages.git\r\n2. 利用IDE（因为后期考虑添加另外两种访问404的方法）：导入(My)Eclipse，调整相关环境，部署到Tomcat，访问`index.html`。\r\n3. 不利用IDE（只能查看404页面，不能实现让”状态码为404的请求“都转向我们自定义的404页面）：直接用浏览器打开`index.html`。\r\n\r\n## 总结\r\n\r\n有空我会持续改进，希望可以加关注： `watch` 、 `star`或者`fork`，同时也方便下次访问。\r\n\r\n## License\r\n\r\n\u003cdiv style=\"text-align:left\"\u003e\u003cimg src=\"https://img.shields.io/github/license/yansheng836/404pages.svg\"/\u003e\u003c/div\u003e\r\n\r\nThis software is licensed under the MIT License. [View the license](https://github.com/yansheng836/404pages/blob/master/LICENSE).\r\n\r\n## Star History\r\n\r\n[![Star History Chart](https://api.star-history.com/svg?repos=yansheng836/404pages\u0026type=Timeline)](https://star-history.com/#yansheng836/404pages\u0026Timeline)\r\n\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyansheng836%2F404pages","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyansheng836%2F404pages","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyansheng836%2F404pages/lists"}