美文网首页Hexo
Hexo如何优雅的使用Next主题

Hexo如何优雅的使用Next主题

作者: 奔跑嘞大肚皮 | 来源:发表于2020-03-24 11:40 被阅读0次

Hexo 作为一个 快速、简洁且高效的博客框架 ,同时也是拥有很多的插件和主题可供使用
而 Hexo 的 Next 开源主题,也是 GitHub 上 Start 最多的主题之一,其简洁的风格和可选的三种布局也是我个人很喜欢的
接下来我就抛砖引玉,讲下我是如何在 Hexo 上使用 Next 主题的
这里使用的 Next 主题为最新的稳定版本
这里只是讲一下安装 Next 主题的方式和自定义主题需要修改什么地方,具体的一些配置就不展开了,后面有空会写一写我的一些配置和修改

我的博客

Hexo 主题的安装方式

Hexo 的主题文件是存放在根目录下的 themes 文件夹下,一般的我的安装 Hexo 主题都是将主题文件放到该目录下,然后修改 Hexo 的配置文件 _config.ymltheme 属性为我们放到 themes 下的主题文件夹名来进行安装。

虽说最终的目的都是将主题文件放到 themes 目录下,但是方式确实有很多种,可谓是殊途同归。

不管是使用什么主题,多多少少都会遇到有时候自己会自定义一些功能或者是修改一些样式的时候,但是如果我们直接修改主题的源文件的话就会有个问题,比如说主题升级之后,会有一些文件的修改和我们自己的修改是有冲突的,这样就会很麻烦,还要去对比这些冲突了的文件,将我们修改的和升级之后的主题文件修改的文件进行对比,然后再融合,稍有不慎还可能导致搞错了,主题出现各式各样的问题。

所以应该已一种优雅的方式来安装主题,下面就以我使用 Next 主题的方式来举个例子。

安装 Next 主题

如果你的 Hexo 整个目录是放到类似 GitHub 之类的平台托管的话,应该使用 Git 的 SubModule 的方式来安装,反之,可直接使用 Git 拉取主题到 Hexo 的主题目录下安装。两种方式都差不多。

使用 Submodule 的安装方式

在 Hexo 根目录下执行命令:

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

直接拉取 Hexo 仓库文件的安装方式

在 Hexo 根目录下执行命令:

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

移动 Next 主题配置文件

拉取完成 Next 主题之后,需要将 Next 主题目录下的 _config.yml 配置文件拷贝到 Hexo 目录下的 source/_data 目录下,并且重命名为 next.yml

这一步就是优雅的使用 Next 主题的关键,因为将配置文件移动到该目录下之后,以后的配置都是在拷贝过来的 next.yml 文件上面修改。

打开 next.yml 文件,找到 override 属性,这个属性是是否重写 Next 配置文件的意思,默认值是 false,即 Next 会将新拷贝的 next.yml 文件和 Next 主题目录下 _config.yml 文件的配置信息合并之后使用,如果修改为 true 的话,就是完全使用新拷贝的 next.yml 文件配置。

使用 Next 主题

在 Hexo 根目录找到 _config.yml 文件,打开找到 theme 属性,修改为 next,然后执行 hexo clean && hexo generate && hexo server,不出意外,应该可以看到你的博客主题已经切换为 Next 主题了。

Next 主题提供的自定义拓展点

Next 主题为我们提供了自定一的拓展,打开 next.yml 配置文件,找到 custom_file_path 属性,可以看到:

custom_file_path:
  #自定义页面插入内容模版文件
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #自定义样式文件
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl

默认的配置都是注释掉没有生效的,如果需要自定义的话,就可以自己编写对应的插入点文件或者自定义样式,然后放开注释,让 Next 使用你自定义的修改。

Next 主题升级

使用上面讲的操作来对 Next 主题进行修改的话,我们就可以对主题进行无损平滑的升级,而不需要每次升级的时候还要去挨个的检查文件,修改冲突。

如果是 Submodule 的方式安装的,只需要执行 git submodule update --remote 更新即可。

如果是直接拉取的 Next 源码仓库内容的话,直接执行 git pull 更新即可。

这样更新之后,我们只需要检查一下我们之前拷贝的 next.yml 文件和更新之后的 Next 主题目录下的 _config.yml 文件的差异即可,不需要再去管其他的文件的差异。

相关文章

  • Hexo如何优雅的使用Next主题

    Hexo 作为一个 快速、简洁且高效的博客框架 ,同时也是拥有很多的插件和主题可供使用而 Hexo 的 Next ...

  • Hexo主题设置

    hexo默认主题是landscape,hexo官方也提供了许多主题。推荐使用Next和Yelee。Next简洁美观...

  • NexT的认识及使用技巧

    NexT是什么 Hexo 的一种主题,Elegant Theme for Hexo 。 使用技巧 (官方使用文档)...

  • 优雅的Hexo主题-NexT

    NexT是一个优雅的Hexo主题,主题作者很努力,NexT已经很完善了,现在版本是5.1.0。我这里只记录下简单的...

  • Blogging On Github

    使用Hexo+Github配置博客 初步使用Hexo+Github配置博客 进阶最详细的Hexo Next主题配置...

  • Hexo主题--Hueman初体验

    之前折腾过hexo的主题next,相信用hexo搭博客的,很多人都选用next,但在使用的过程中,总感觉next缺...

  • hexo使用NexT主题

    -------所写文章力求精简,旨在全面,难免遗漏,请多指点! hexo与NexT主题 关于NexT NexT 主...

  • Hexo博客主题推荐

    昨天写了一篇文章介绍了如何使用Hexo建立独立博客,今天为大家推荐几个美观的Hexo博客主题。 NexT 我的网站...

  • Hexo-设置阅读全文

    最近使用Hexo搭建了自己的博客,并且使用了简洁但是强大的NexT主题。这里介绍一下NexT主题下设置在首页显示一...

  • 将hexo 经典的next-theme主题迁移至博客园

    cnblogs-theme-next 将hexo 经典的next-theme主题迁移至博客园,使用论文格式设计,专...

网友评论

    本文标题:Hexo如何优雅的使用Next主题

    本文链接:https://www.haomeiwen.com/subject/ukhoyhtx.html