声明:本文是基于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添加头像和网站图标添加友情链接添加菜单项添加搜索功能修改字体大小设置顶部加载条自定义代码块样式文章主页阴影效果背景颜色和图片显示浏览进度和文章预览文章末尾添加版权信息修改文章底部#标签文章结束标志本文参考项目主页添加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 rollslinks_title: 友情链接 #修改名称#links_layout: block#links_layout: inlinelinks: #该行取消注释Paul Romer: /周其仁: /
添加菜单项
在博客根目录中执行:
$ hexo new page "categories"$ hexo new page "tags"$ hexo new page "about"
完成后在/source/
文件夹下会有categories,tags,about
三个文件夹,将其中的index.md
文件分别进行修改,
---title: categoriesdate: -03-12 22:06:24type: "categories"------title: 标签date: -03-12 17:27:16type: "tags"------title: aboutdate: -03-12 22:07:26type: "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.xmlfield: postformat: htmllimit: 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: truelength: 150
文章末尾添加版权信息
在myblog/themes/next/_config.yml
里修改:
post_copyright:enable: truelicense: CC BY-NC-SA 3.0license_url: /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个人博客-主题优化(二)
本文参考
知乎Hexo搭建的GitHub博客之优化大全
如果觉得《Hexo个人博客-主题优化(一)》对你有帮助,请点赞、收藏,并留下你的观点哦!