自定义NexT主题

详细的下载安装及设置教程在这里:NexT 使用文档
效果图就不用看了吧,毕竟效果已经摆出来了,如果你也喜欢,那就动手吧。

1、添加Title 。

NexT主题的Title和网站主页上的左上角的LOGO字体是一样的,在这里我想设置成不一样的怎么办呢?其实很简单,只需要在配置文件中添加一个name(注意:这个配置文件的位置是HEXO的配置文件不是主题的配置文件。
ps:我觉得还是用logo比较好,由于子集以前就是用的name,在这里就不更改了)

1
2
title: Jangrui|Jangrui's Notes
name: Jangrui

然后,在NexT主题文件夹中找到layout文件夹下的_partials文件夹下的header.swig文件 找到:

1
<span class="site-title">{{ config.title }}</span>

config.title修改为config.name即可


2、使页面底步链接到about界面

找到:主题layout文件夹下的_partials文件夹下的footer.swig文件:
找到:

1
<span class="author" itemprop="copyrightHolder">{{ config.author }}</span>

将其改为

1
2
3
<a class="theme-link" href="/about/index.html">
<span class="author" itemprop="copyrightHolder">{{ config.author }}</span>
</a>

当然也可以连接到一个网址,比如我的设置就是这样的:

1
2
3
<a class="theme-link" href="http://notes.jangrui.com/">
<span class="author" itemprop="copyrightHolder">{{ config.author }}</span>
</a>

3、hexo博客同时托管在github和coding

修改配置文件

找到hexo目录下站点配置文件 _config.yml

1
2
3
4
5
deploy:
type: git
repo:
github: git@github.com:imwillxue/imwillxue.github.io.git,master
coding: git@git.coding.net:willxue/willxue.git,master

可能要安装插件:

1
npm install hexo-deployer-git --save

然后,测试一下吧。

1
hexo clean && hexo d -g

开启pages服务

开启pages服务

我开启的master分支的。
开启以后访问 jangrui.coding.me 测试一下看看成功了吗。

绑定域名

添加海外线路可以实现国内访问跳转到coding,国外访问跳转到github。

海内外线路

注: 我的这种配置要在github根目录新建个CNAME文件,里面填上willxue.top。另外在coding的pages里要绑定域名。

可以用站长之家测试一下:

访问测速

coding和github分配的ip


4、使用自定义的CSS样式

因为markdown支持html标签,使用自定义的CSS样式还是不错的。下面总结一下具体的使用过程:

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

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语法。其实让我写我也不会,哈哈!)

引用:用md写文章时,在想要引用的时候添加

1
&lt;a href=":#" class="myButton"&gt;MyButton&lt;/a&gt;

对,你没有看错,就是使用转义的代码,因为makedown会自动转义html代码

样式如下:

MyButton

效果已经出来了,怎么样??是不是瞬间高大上。。有想要使用的样式,自行百度,找到后粘贴即可使用。

参考文章:

推荐一个css button样式的生成网站
Chillax’s Blog
Magicer

Enjoy it ! Donate me ! 欣赏此文 ! 求鼓励,求支持 !