声明:本文是基于NexT v5.1版本的主题进行的优化配置,与目前最新版本v7.2会有一些区别,大部分设置都没有影响,变化的部分会在该部末尾指出。以下内容都切实可行,博客平台的搭建请移步Hexo个人博客-搭建站点,7.2版本的变化请移步NexT v5到v7.2的版本变化。
注意:文件目录分隔符在Windows下为
\
,而Linux下为/
,本文没有区分。读者需区分站点配置文件(\myblog\_config.yml
)和主题配置文件(\myblog\themes\next\_config.yml
)。
Description: 对Hexo-NexT主题的优化,添加头像和网站图标,添加菜单项,搜索功能,字体大小,代码样式,主页阴影效果,网页背景和图片,文章版权声明,,动态背景,友情链接,以及NexT v7版本的一些变化。
文章目录
项目主页添加README
在Github
上建立博客仓库的时候,没有生成README
文件,这样使得其他人无法知道我们这个仓库是做什么,即我们的这个仓库缺少一个说明文件;但是如果直接使用命令hexo n README
,再部署后会被解析为html
文件,这不是我们想要的。
解决方式是在路径\myblog\source
下手动新建README.mdown
,注意这里的后缀是.mdown
,然后再在这个新建文件中写README
即可。部署后它会被复制到public
文件夹,而不会被解析成html
文件。
添加头像和网站图标
将头像或图标文件放入/themes/next/source/images/
文件夹内,在myblog/themes/next/_config.yml
中,找到favicon
字段,修改为:
favicon: /images/xxxx.png # 网站图标
...
avatar: /images/avatar.png # 头像
添加友情链接
在myblog/themes/next/_config.yml
中配置,
# Blog rolls
links_title: 友情链接 #修改名称
#links_layout: block
#links_layout: inline
links: #该行取消注释
Paul Romer: https://paulromer.net/
周其仁: http://www.zhouqiren.net/
添加菜单项
在博客根目录中执行:
$ hexo new page "categories"
$ hexo new page "tags"
$ hexo new page "about"
完成后在/source/
文件夹下会有categories,tags,about
三个文件夹,将其中的index.md
文件分别进行修改,
---
title: categories
date: 2017-03-12 22:06:24
type: "categories"
---
---
title: 标签
date: 2017-03-12 17:27:16
type: "tags"
---
---
title: about
date: 2017-03-12 22:07:26
type: "about"
---
在myblog/themes/next/_config.yml
中找到menu
,去掉categories、tags、about
的注释。
添加归档,执行hexo new page archives
,后将主题配置文件中对应的注释取消。其他类似。
添加搜索功能
在博客根目录执行cnpm install hexo-generator-searchdb --save
,在/myblog/_config.yml
中新增配置:
search:
path: search.xml
field: post
format: html
limit: 10000
然后在/myblog/themes/next/_config.yml
中启用local_search
。
效果展示:
修改字体大小
打开\themes\next\source\css\ _variables\base.styl
文件,将$font-size-base
改成17px
。
设置顶部加载条
修改/myblog/themes/next/_config.yml
中,修改 pace: true
,还可以换不同样式的加载条。
自定义代码块样式
在\themes\next\source\css\_custom\
目录下新建custom.styl
文件,加入以下配置: (颜色可自定义)
// Custom styles.
code {
color: #ff7600;
background: #fbf7f8;
margin: 2px;
}
// 大代码块的自定义样式
.highlight, pre {
margin: 5px 0;
padding: 5px;
border-radius: 3px;
}
.highlight, code, pre {
border: 1px solid #d6d6d6;
}
文章主页阴影效果
在上一步的基础上,在\themes\next\source\css\_custom\custom.styl
文件中添加:
// 主页文章添加阴影效果
.post {
margin-top: 60px;
margin-bottom: 60px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}
如果是V7.0或以上版本,要将主题设置
custom.sytl
文件放在myblog/source/_data/
路径下更名为styles.styl
,然后在/myblog/themes/next/_config.yml
中找到custom_file_path
,取消相应注释。推荐lei2rock的配置
注意: 是博客根目录而不是主题目录下的source文件夹。
背景颜色和图片
- 页面背景在
themes\next\source\css\_variables\base.styl
中修改body-bg-color
- 头部背景色在
themes/next/source/css/_schemes/Mist/sidebar/_header.styl
中 - 底部背景色在
themes/next/source/css/_schemes/Mist/index.styl
中 - 其他部分同理
- 背景图片在
\themes\next\source\css\_custom\custom.styl
中添加:
//导航区背景
.site-meta {
background: url("../images/header-bg.jpg");
background-position:70% 20%;
}
//页面背景
body {
background-image:url("../images/body-bg.png");
background-repeat: repeat;
background-attachment:fixed;
background-position:50% 50%;
}
注意:V7.0或以上版本要添加到
myblog/source/_data/styles.styl
中。
显示浏览进度和文章预览
在myblog/themes/next/_config.yml
中,修改scrollpercent: true
和excerpt_description: true
。
设置预览字数:
auto_excerpt:
enable: true
length: 150
文章末尾添加版权信息
在myblog/themes/next/_config.yml
里修改:
post_copyright:
enable: true
license: CC BY-NC-SA 3.0
license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/
在NexT v7.0以上的版本中,只需要修改
creative_commons
的设置即可。
修改文章底部#标签
打开/themes/next/layout/_macro/post.swig
文件,搜索rel="tag">#
,将其中的#
换成<i class="fa fa-tag"></i>
。
在NexT v7.0以上的版本中,只需要在
/themes/next/_config.yml
中修改tag_icon: true
即可。
文章结束标志
在\themes\next\layout\_macro
路径下,新建passage-end-tag.swig
文件,粘贴如下代码:
{% if theme.passage_end_tag.enabled %}
<div style="text-align:center;color: #ff0000;font-size:14px;">
------ 本文结束 ------</div>
{% endif %}
然后在路径\themes\next\layout\_macro\
下找到并打开post.swig
文件,在post-body之后,post-footer之前添加如下代码(post-footer之前两个DIV):
{% if not is_index and theme.passage_end_tag.enabled %}
<div>
{% include 'passage-end-tag.swig' %}</div>
{% endif %}
最后在 /myblog/themes/next/_config.yml
中,在末尾添加:
passage_end_tag:
enabled: true
效果展示:
未完,待续 Hexo个人博客-主题优化(二)