添加404页面

发表于 | 分类于 | 阅读次数:

我使用了mp4的动态视频作为背景，感觉看大片一样呀

创建个html文件404.html 放在blog的source目录下面，hexo d的时候会自动上传github
如果找不到页面会自动跳转404页面的
可以预览我的404页面：Dream

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
layout: false
title: "404"
---
<!DOCTYPE html>
<html>
<head>
<title>404 Page not found</title>
<meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge">
<script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src="https://www.google-analytics.com/analytics.js",s.parentNode.insertBefore(o,s)}(window,document,"script",0,"ga"),ga("create","UA-100434861-1","auto"),ga("send","pageview")</script></head><style>body{margin:0;background:rgba(255,255,255,0);font-family:Lato,"PingFang SC","Microsoft YaHei",sans-serif}video{position:fixed;top:50%;left:50%;min-width:100%;min-height:100%;width:auto;height:auto;z-index:-100;transform:translateX(-50%) translateY(-50%);background:url(https://yixiuer.oss-cn-shanghai.aliyuncs.com/Picture/404bg.png) no-repeat;background-size:cover}h1{font-size:3rem;text-transform:uppercase;letter-spacing:.3rem;text-align:center;top:15%;left:5%;right:5%;position:absolute}.footer{font-size:2rem;position:absolute;bottom:15%;left:10%;right:10%;text-align:center}a{color:#5073b8;text-decoration:underline}a:hover{color:#a166ab;text-decoration:underline;cursor:pointer}@media only screen and (max-device-width:1024px){html{background:url() no-repeat rgba(255,255,255,0);background-size:100% 100%}#bgvid{display:none}}</style>
<body>
<video poster="http://pic.qiantucdn.com/58pic/28/19/46/84Z58PICquE_1024.jpg!/fw/780/watermark/url/L3dhdGVybWFyay12MS4zLnBuZw==/align/center" id="bgvid" playsinline="" autoplay muted loop>
<source src="http://pic.qiantucdn.com/58pic/video/28/19/46/28194684_26.mp4" type="video/mp4">
</video>
<div class="footer"><a href="https://ciweigg.github.io/">页面丢失啦，点击返回</a>
</script>
</body>
</html>