Hexo下Next主题配置与优化
使用Next主题
- 在这里Downloads Next主题代码
- 将下载的代码放在myBlog/theme/next目录下
- 设置站点myBlog/_config.yml的theme字段值为next
- 生成新页面hexo g
- 开启服务hexo s –debug
- 发布代码hexo d
注:此时登录网站,发现是空白的,打开控制台,提示很多vendors目录下的文件404,解决办法是将next主题下即myBlog/themes/next/source下的vendors目录名改为lib,并修改myBlog/themes/next/_config.yml的_internal: vendors改为_internal: lib。
参考:iissnan的回答
主题配置
主题风格设定
通过修改next主题下的_config.yml的scheme字段,配置不同的风格。
# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
本站点使用的是默认的Muse,显示效果如下:

菜单设置
通过修改next主题下的_config.yml的menu字段,选定显示的菜单项。
menu:
home: /
categories: /categories
about: /about
archives: /archives
tags: /tags
#commonweal: /404.html
其中,home代表主页,categories代表分类页,about代表关于页面,archives代表归档页,commonweal代表404页面(page not found时候显示的页面)。
菜单项文本修改是在对next主题下的language文件夹下的文件进行修改,若当前语言是简体中文,直接修改language/zh-Hans.yml里的对应字段即可。
本站点显示主页,分类页,关于页面和归档页。
头像设置
在主题下的source/images/下放置头像文件avatar.gif即可。
设置文章代码主题
Next主题总共支持5种主题,默认主题是白色的normal。通过修改next主题下的_config.yml的highlight字段,来设置代码主题。
本站点使用的是night主题。即令highlight为night。
添加标签页面
前面通过修改next主题下的_config.yml文件中的menu选项,可以在主页面的菜单栏添加标签选项,但是此时点击标签,跳转的页面会显示page not found。
添加标签页面的具体方法是:
- 新建页面
输入如下命令:
$ cd myBlog
$ hexo new page tags
输入命令后,在myBlog/source下会新生成一个新的文件夹tags,在该文件夹下会有一个index.md文件。
- 设置页面类型
在上步新生成的myBlog/source/tags/index.md中添加type: “tags”,index.md文件内容如下:
---
title: tags
date: 2016-11-15 19:10:05
type: "tags"
---
- 设置具体文章的tags
当要为某一篇文章添加标签,只需在myBlog/source/_post目录下的具体文章的tags中添加标签即可,如:
---
title: 基于Hexo和Github搭建博客
date: 2016-11-09
tags: [npm, hexo, github]
categories: 搭建博客
---
本站添加为标签后的效果如下:

添加分类页面
步骤与添加标签页面类似,具体如下:
- 新建页面
输入如下命令:
$ cd myBlog
$ hexo new page categories
输入命令后,在myBlog/source下会新生成一个新的文件夹categories,在该文件夹下会有一个index.md文件。
- 设置页面类型
在上步新生成的myBlog/source/categories/index.md中添加type: “categories”,index.md文件内容如下:
---
title: categories
date: 2016-11-15 19:11:13
type: "categories"
---
- 设置具体文章的categories
当要为某一篇文章添加分类,只需在myBlog/source/_post目录下的具体文章的categories中添加分类即可,如:
---
title: 基于Hexo和Github搭建博客
date: 2016-11-09
tags: [npm, hexo, github]
categories: 搭建博客
---
本站添加为标签后的效果如下:

添加关于我页面
步骤与添加标签页面类似,具体如下:
- 新建页面
$ cd myBlog
$ hexo new page about
输入命令后,在myBlog/source下会新生成一个新的文件夹about,在该文件夹下会有一个index.md文件。
- 修改about/index.md
本站点index.md如下:
---
title: about
date: 2016-11-15 19:08:50
---
## 关于我
一只学习后端的小菜鸟,欢迎分享知识。
参考链接
Hexo下Next主题配置与优化的更多相关文章
- hexo的jacman主题配置
获得更多资料欢迎进入我的网站或者 csdn或者博客园 这是在我搭建博客时用的主题,这个主题时基于pacman修改的,同时我也是借助于wuchong同时他还在一直更新.一下时我的一些基本配置: 相关文章 ...
- Hexo 下 Markdown 的配置与学习
本篇 更换 Hexo 下的 Markdown 渲染插件 学习 Markdown 基本语法 ✎更换 Markdown 渲染插件 ✎原因 Hexo 内置的默认渲染插件是 hexo-renderer-mar ...
- Hexo的Next主题配置
使用Next主题 在这里Downloads Next主题代码 将下载的代码放在myBlog/next目录下 设置站点myBlog/_config.yml的theme字段值为next 生成新页面hexo ...
- Hexo博客主题优化
Hexo博客主题优化 添加背景图 在 themes/*/source/css/_custom/custom.styl 中添加如下代码: body{ background:url(/images/bg. ...
- Hexo系列(四) NexT主题配置
Hexo 框架允许我们更换合适的主题,以便于构建不同风格的网站,这里介绍目前最常使用的一款主题之一 -- NexT 一.NexT 安装 在正式开始讲解 NexT 安装之前,我们必须明确以下几个概念: ...
- Hexo+NexT(三):Next主题配置详解
阅读本篇之前,假定读者已经有了Node.js的基础,如需要补充Node.js知识的,请自行百度. Hexo是在Node.js框架下的一个项目,利用Node.js提供的强大功能,完成从Markdown到 ...
- Hexo+NexT(四):Hexo站点及Next主题配置详解
采用Hexo及NexT搭建好网站以后,有些效果不是我们需要的,Hexo及NexT提供了强大的定制功能,本文章将要讲解的就是如何在对网站进行配置及调整,达到博主需要的效果. 本文章配置环境是Hexo 3 ...
- 【3】hexo+github搭建个人博客的主题配置
更换博客主题 主题可参考:https://hexo.io/themes/ hexo默认主题:Landscape 示例主题:Next 下载Next主题 进入Blog所在目录,输入下载命令 #进入Blog ...
- 三、hexo+github搭建个人博客的主题配置
更换博客主题 主题可参考:https://hexo.io/themes/ hexo默认主题:Landscape 示例主题:Next 下载Next主题 进入Blog所在目录,输入下载命令 #进入Blog ...
随机推荐
- xmind的使用及入门
初识 xmind是什么 比较 入门 下载 基本操作 主界面 美化 工具 导出 初识 xmind是什么 说白了就是传说中的思维导图,用它我们可以画出下面这些图: 额,这张图好丑. 好吧,换一张: 他就是 ...
- Python collections系列之计数器
计数器(counter) Counter是对字典(无序)类型的补充,用于追踪值的出现次数. 使用counter需要导入 collections 类 ps:具备字典的所有功能 + 自己的功能 1.创建一 ...
- JAX-WS注解
JAX-WS注解: javax.jws.WebService @WebService应用于类或者接口上面,该类便是一个对外访问WebService,默认情况里面所有的public方法都是可以对外提供访 ...
- (转)NHibernate之Generator主键生成方式
本文转载自:http://www.cnblogs.com/lemon-love/archive/2010/03/10/1683058.html (1) assigned主键由外部程序负责生成,无需NH ...
- java代码实现通讯录实例,我不知道这有什么用。,
运行显示: Friend:zl,Address:武大樱花美Colleagues:蔡依林,Department:麻城市人民政府 题目: 1.任务描述 完善上面通讯录名片的例子. 2.技能要点 掌握类继承 ...
- Mybatis Laz-Load功能实现代码赏析(原创)
对于Mybatis 拥有的Lazy Load(有中文翻译成延迟加载)功能,应该很同学都有听说过,今天主要与大家一起来解读一下Mybatis在Lazy Load功能的实现的代码.Lazy Load实现的 ...
- AngularJS:实例
ylbtech-AngularJS:实例 1.返回顶部 1. AngularJS 实例 实例 您可以在线编辑实例,然后点击按钮查看结果. AngularJS 实例 <div ng-app=&qu ...
- spring事务 异常回滚
spring事务回滚 可抛出自定义继承自RuntimeException
- Oracle 监听莫名死掉
有一台oracle 10g的监听莫名死掉,进行查看 select * from v$version Oracle Database 10g Enterprise Edition Release 10. ...
- java中内部类的讲解
java中有一个内部类的概念,由于之前一直比较忙,没有单独拿出时间总结一下,今天我就把内部类的相关知识进行一下汇总,如果有不足之处,欢迎批评指正. 1)java内部类的概念. 在一个类的的 ...