Hexo-Next-CSS样式修改

Hexo-Next主题美化

1. 修改文章内链接文本样式

将链接文本设置为蓝色,鼠标划过时文字颜色加深,并显示下划线。修改文件themes\next\source\css\_common\components\post\post.styl,添加如下css样式

1
2
3
4
5
6
7
8
9
.post-body p a{
color: #0593d3;
border-bottom: none;
&:hover {
color: #0477ab;
text-decoration: underline;
}
}

选择.post-body是为了不影响标题,选择p是为了不影响首页“阅读全文”的显示样式。

2. 删除标题上下方横线

修改文件themes/next/layout/_partials/header.swig文件,删除logo-line相关项

修改前

1
2
3
4
5
6
7
<div class="custom-logo-site-title">
<a href="{{ config.root }}" class="brand" rel="start">
<span class="logo-line-before"><i></i></span>
<span class="site-title">{{ config.title }}</span>
<span class="logo-line-after"><i></i></span>
</a>
</div>

修改后

1
2
3
4
5
<div class="custom-logo-site-title">
<a href="{{ config.root }}" class="brand" rel="start">
<span class="site-title">{{ config.title }}</span>
</a>
</div>

3. 修改header背景颜色为白色

找到themes\next\source\css\_schemes\Mist\header.styl文件,修改.header { background: $white; },将颜色改为白色

4. 修改footer的文字居中

找到themes/next/source/css/_schemes/Mist/index.styl文件中的footer,将.footer-innertext-align: left修改为center

5. 修改post-title的颜色

找到\themes\next\source\css\_common\components\post\post-title.styl文件,将.post-title-link下的color修改为自己想要的颜色

6. 为边框添加立体阴影效果

找到\source\css\_common\components\post\post.styl文件,在use-motion .post下,添加box-shadow的代码box-shadow生成网站

7. 将菜单栏的文字颜色改为白色

找到\themes\next\source\css\_schemes\Mist\menu.styl文件,在.menu-item a下添加color: white;,并将background改为header一样的颜色,那样就不会出现不协调的情形。

8. 改变post-meta的颜色

找到\next\source\css\_common\components\post\post-meta.styl文件,在.post-meta下添加如下代码

1
2
3
4
5
6
a {
color: blueviolet;
text-decoration: none;
border-bottom: 1px solid #999;
word-wrap: break-word;
}

更新于:2017/3/12 16:28:59


9. 新建导航栏

找到主题文件下的\languages\zh-Hans.yml文件,在titlemenu下添加machinelearning: 机器学习字段。然后再到主题配置文件_config.ymlmenu下添加绝对路径,menu_icons下添加对应的FontAwesome图标


10. 静态资源cdn加速

在主题配置文件中,找到vendors,添加字段,cdn地址来自bootcdn

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
vendors:
# Internal path prefix. Please do not edit it.
_internal: vendors
# Internal version: 2.1.3
jquery: //cdn.bootcss.com/jquery/2.1.3/jquery.min.js
# Internal version: 2.1.5
# Fancybox: http://fancyapps.com/fancybox/
fancybox: //cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.pack.js
fancybox_css: //cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.css
# Internal version: 1.0.6
fastclick: //cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js
# Internal version: 1.9.7
lazyload: //cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js
# Internal version: 1.2.1
velocity: //cdn.bootcss.com/velocity/1.3.1/velocity.min.js
# Internal version: 1.2.1
velocity_ui: //cdn.bootcss.com/velocity/1.3.1/velocity.ui.min.js
# Internal version: 0.7.9
ua_parser: //cdn.bootcss.com/UAParser.js/0.7.12/ua-parser.min.js
# Internal version: 4.4.0
# http://fontawesome.io/
fontawesome: //cdn.bootcss.com/font-awesome/4.6.2/css/font-awesome.min.css

11. 添加百度统计

之前用的是google统计,但是每次进入首页加载的时候太慢了,所以干脆换一个百度统计。在百度统计注册账号之后,按照官网文档教程,在主题配置文件下找到baidu_analytics字段,去掉前面的注释,添加百度统计的ID。

自动生成网站地图

网站地图,又称站点地图,它就是一个页面,上面放置了网站上需要搜索引擎抓取的所有页面的链接。网站地图可以通过在线的形式生成,但是速度会有点慢,使用插件 hexo-generator-sitemaphexo-generator-baidu-sitemap能自动生成站点地图,方法如下

1
2
3
# 安装两个插件
$ npm install hexo-generator-sitemap --save
$ npm install hexo-generator-baidu-sitemap --save

到站点配置文件中,添加如下字段

1
2
3
4
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml

hexo g -d之后,public文件夹下回自动生成网站地图,然后再将生成好的网站地图分别添加至百度和谷歌即可。

12. 设置点击加载 Disqus

在没有满足科学上网条件下的网络,访问网站时往往由于 Disqus 而迟迟不能完全加载,下面这个教程则可以满足既能使用 Disqus,又不会影响网站加载的速度。

Hexo Next 主题点击加载 Disqus

觉得还不错?帮我赞助点域名费吧:)