Hexo 自定义主题样式

Hexo博客主题NexT使用自定义的CSS样式


添加样式支持

为了不吧原先的像是文件搞得太乱,这里,添加子集的样式文件。
首先,在next主题目录下样式文件的source文件夹下找到css文件夹,打开main.styl文件,在最后添加:

css
1
2
3
//My Layer
//--------------------------------------------------
@import "_my/mycss";

新建自定义样式

找到样式文件夹css新建_my文件夹,在其中新建mycss.styl文件,之后就可以按照stylus的格式自定义样式了。

实例

例如:我想在文章中添加个自定义样式的按钮,怎么做呢???

打开新建的mycss.styl文件,在其中添加样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.myButton {
background-color:#0f94bd;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:11px 27px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
background-color:#5cbf2a;
}
.myButton:active {
position:relative;
top:1px;
}

(ps:这里直接使用的css的格式写的,因为css的代码在网上很好找到,而stylus预处理器的就不那么容易找到了,stylus一样支持css格式,所以在这里直接使用了css文件,没有写成stylus语法。其实让我写我也不会,哈哈!)
引用:在想要引用的时候添加

1
<a href="#" class="myButton">MyButton</a>

推荐

推荐一个css button样式的生成网站:Button Generator


文章转载自Magicer