失眠网 > Hexo个人博客-主题优化(一)

Hexo个人博客-主题优化(一)

时间：2023-02-24 18:48:13

相关推荐

Hexo个人博客-主题优化(一)

声明：本文是基于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%; }