1.站点信息的配置。

修改一些基本的配置，比如站点名、站点描述等等。

# Site
title: halisi7
subtitle: '一个专注技术的组织'
description: '涉猎的主要编程语言为 c语言、Java、mysql、linux、docker，领域涵盖算法、服务研发和对象存储等。'
keywords: c语言、Java、mysql、linux。
author: halisi7
language: zh-CN
timezone: ''

修改位置为根目录下的_config.yml文件。

2.修改主题（Next）。

首先命令行进入到项目的根目录，执行如下命令即可：

git clone https://github.com/theme-next/hexo-theme-next themes/next

执行完毕之后 Next 主题的源码就会出现在项目的 themes/next 文件夹下。

更换主题。

然后我们需要修改下博客所用的主题名称，修改项目根目录下的 _config.yml 文件，找到 theme 字段，修改为 next 即可，修改如下：

theme: next

重启服务。

hexo s

访问刷新下页面，就可以看到 next 主题就切换成功了，预览效果如下：

3.主题配置。

a.样式

通过修改配置文件的 scheme 字段即可。

scheme: Gemini

有多种样式可以选择：

b.个人头像。

将头像文件放置到themes/next/source/images/avatar.png 路径
在主题Next里面的_config.yml 文件下编辑 avatar 的配置，修改为正确的路径即可。
rounded 选项是是否显示圆形，rotated 是是否带有旋转效果，大家可以根据喜好选择是否开启。

c.代码块。

效果：

d.top

我们在浏览网页的时候，如果已经看完了想快速返回到网站的上端，一般都是有一个按钮来辅助的，这里也支持它的配置，修改 _config.yml 的 back2top 字段即可，我的设置如下：

e.github_banner

大家可能注意到在页面的右上角有个 GitHub 图标，点击之后可以跳转到其源码页面。

配置如下：

f.math

可能在一些情况下我们需要写一个公式，比如演示一个算法推导过程，MarkDown 是支持公式显示的，Hexo 的 Next 主题同样是支持的。
Next 主题提供了两个渲染引擎，分别是 mathjax 和 katex，后者相对前者来说渲染速度更快，而且不需要 JavaScript 的额外支持，但后者支持的功能现在还不如前者丰富。

我这里选择了 mathjax，通过修改配置即可启用：

mathjax 的使用需要我们额外安装一个插件，叫做 hexo-renderer-kramed，另外也可以安装 hexo-renderer-pandoc，命令如下：

npm un hexo-renderer-marked --save
npm i hexo-renderer-kramed --save

g.标签页。

现在我们的博客只有首页、文章页，如果我们想要增加标签页，可以自行添加，这里 Hexo 也给我们提供了这个功能，在根目录执行命令如下：

hexo new page tags //标签页
hexo new page categories //分类页

执行这个命令之后会自动帮我们生成一个 source/tags/index.md 文件，内容就只有这样子的：

我们可以自行添加一个 type 字段来指定页面的类型：

type: tags //标签页
comments: false
type: categories //分类页
comments: false

然后再在主题的 _config.yml 文件将这个页面的链接添加到主菜单里面，修改 menu 字段如下：

效果如下：

h.搜索页。

如果要添加搜索的支持，需要先安装一个插件，叫做 hexo-generator-searchdb，命令如下：

npm install hexo-generator-searchdb --save

然后在项目的 _config.yml 里面添加搜索设置如下：

然后在主题的 _config.yml 里面修改如下：

然后在项目的 _config.yml 里面添加搜索设置如下：

然后在主题的 _config.yml 里面修改如下：

hexo下next主题的优化相关推荐

hexo下yilia主题博客个性化自定义
我的博客采用的hexo下的yilia主题,这篇文章记录一下自己折腾配置博客的方法和经过. 首先是创建博客的基本的几个命令 hexo g # 生成博客网页文件 hexo s # 本地预览博客,打开本地网 ...
hexo下next主题实现鼠标移动特效
效果如下添加特效在\themes\next\source\js\中新建fairyDustCursor.js文件,并添加以下代码 (function fairyDustCursor() {var p ...
Hexo博客主题安装和优化（一）
当你看到这篇文章的时候,想必你已经搭建好了属于你的Hexo博客并且已经部署到了Github上面,如果还没有的话呢,请移步去Hexo+github搭建博客! 因为默认的Hexo主题实在太难看了,所以我们 ...
hexo的next主题的最新优化_2
前言在hexo的next主题的最新优化_1中介绍了一些简单点的操作,希望对你们有所帮助,如果实在看不懂,可以扫一扫文章最后的QQ群二维码,有什么问题可以私聊我呦!好的废话就不多说了.我们开始吧! 主 ...
基于Hexo的matery主题搭建博客并深度优化
本文转自悟尘纪,获取更新内容可查看原文: https://www.lixl.cn/2019/092856736.html 对于有一定技术背景的同学,自己动手搭建博客网站是一个很不错的选择.选择喜欢的 ...
hexo下NexT的主题背景及框体透明度修改
首先定位主题文件夹next目录下的主题配置文件 .\themes\next\\_config.yml 打开并查找 style: source/_data/styles.styl 并 ...
Hexo 个人博客 SEO 优化（3）：改造你的博客，提升搜索引擎排名
Hexo 个人博客 SEO 优化三篇系列文章终于完成了 Hexo 个人博客 SEO 优化(1):搜索引擎原理介绍 Hexo 个人博客 SEO 优化(2):站内优化 Hexo 个人博客 SEO 优化(3 ...
Hexo部署+Sakura主题调教教程
CSDN不定期补充个人博客内会实时更新推送: https://flymc.cc/2020/03/28/Sakura/ 前言这个教程的重点在于调教Sakura主题,关于Hexo+GitHub搭建博客 ...
hexo的next主题个性化教程打造炫酷网站
看到有些next主题的网站很炫酷,那么是怎么配置的呢?接下来我会讲一讲如何实现一些炫酷的效果主要有以下30种: 在右上角或者左上角实现fork me on github 添加RSS 添加动态背景实 ...

hexo下next主题的优化

1.站点信息的配置。

修改一些基本的配置，比如站点名、站点描述等等。

2.修改主题（Next）。

首先命令行进入到项目的根目录，执行如下命令即可：

更换主题。

重启服务。

访问刷新下页面，就可以看到 next 主题就切换成功了，预览效果如下：

3.主题配置。

a.样式

b.个人头像。

c.代码块。

d.top

e.github_banner

f.math

g.标签页。

hexo下next主题的优化相关推荐

最新文章

热门文章