技术小黑屋

自定义Octopress404页面

刚刚在Octopress实现了自定义的404页面。参考别人的文章写的,很容易实现,谁知发现写完后,感觉自己掉进了一个坑,然后又爬了出来,所以,有必要自己写出来一个超级精简没有坑的帖子帮助别人。

最简一步到位

  • 只需执行rake new_page[404.html] 然后编辑404.html即可。
  • 执行完上述操作404.html页面会创建在source目录下。
  • 说明:网站404页面必须要在最终的Githug Pages网站根目录。
  • 关于404页面,很多人都喜欢设置成公益页面,这里推荐两个公益爱心404页面, 腾讯公司404益云公益404.

我的404.html示例,其中关闭了comments,sharing,去掉了footer。

1
2
3
4
5
6
7
8
9
---
layout: page
title: "404"
date: 2014-06-20 22:06
comments: false
sharing: false
footer: false
---
<script type="text/javascript" src="http://www.qq.com/404/search_children.js" charset="utf-8"></script>

——————————————实现和完美的分割线————————————————

高级处理

追求完美的人,请继续读下去。

禁止搜索引擎索引

  • 修改source/robots.txt 如文件不存在请创建。

我的robots.txt示例

1
2
3
4
5
6
7
---
layout: nil
---
User-agent: *
Disallow: /404.html

Sitemap: http://droidyue.com/sitemap.xml

禁止404页面加入sitemap

  • 修改plugins/sitemap_generator.rb
  • 在 EXCLUDED_FILES 中加入404.html

sitemap_generator.rb部分示例

1
2
3
4
5
6
7
SITEMAP_FILE_NAME = "sitemap.xml"

# Any files to exclude from being included in the sitemap.xml
EXCLUDED_FILES = ["atom.xml", "404.html"]

# Any files that include posts, so that when a new post is added, the last
# modified date of these pages should take that into account

参考资料:https://help.github.com/articles/custom-404-pages

Written with StackEdit.


我的知乎 Live 推荐