为博客添加404页面

这几天给自己的博客添加了一个404页面.

Octopress添加404页面还是非常简单的, 只不过在折腾地时候遇到了css样式优先级的问题, 在这里简单纪录一下.

添加404页面

添加404页面仅仅需要一步: 在source目录下新建一个名为404.html的文件即可. 里面的内容可以参照source目录下的index.html. 一个简单的示范文件如下:

404 example
1
2
3
4
5
---
layout: page
---

Not Found

这样当返回404的时候就会返回该页面的内容. 这个页面就像普通的文章一样, 可以根据自己的需要来定制, 相当方便;)

样式优先级

因为个人喜好, 决定404页面返回一个预先定义好的图片. 但是正如之前所说的, 因为这个页面也只是一篇普通的文章, 因此会应用到所有的样式. 但是很遗憾的是自己不想使用定义好的图片的样式(不想包含边框以及阴影). 很容易想到的一个解决方案是给图片添加一个新类, 手动指定它的样式. 于是在sass目录下做了些小修改:

  1. screen.scss文件尾添加一行@import "forfun";
  2. 在同级目录下创建名为_forfun.scss的文件, 在里面设定一些新的样式, 例如:
own style in _forfun.scss
1
2
3
4
.simpleimage {
    border: solid 0px #ccc;
    box-shadow: 0px 0px 0px;
}

然后在嵌入图片的时候手动制定图片的classsimpleimage:

image
1
{% img simpleimage your/image/path/name.png 404 %}

但是很遗憾的是没有生效, 应用的还是之前默认的格式. 于是Google一番, 发现是样式优先级的所导致的. 一句话概括下就是: 针对一个元素, css样式越具体, 优先级越高. 详细的介绍请猛击这里, 非常好的说明.

根据规则, 修改下源来的样式: 描述得更加具体

changed: more explict
1
2
3
4
.entry-content .simpleimage {
    border: solid 0px #ccc;
    box-shadow: 0px 0px 0px;
}

终于成功运用了自定义的样式;)

PPPPSSSS

国庆最后两天雨下的好大…

假期总是如此紧凑短暂, 回京继续奋斗吧…

css, web

Comments