本篇会介绍如何使用Hexo主题,并且进行个性化配置。

学习本篇前,你必须具备以下知识储备:

  • 已经安装且运行了Hexo。
  • 对前端知识有初步的基础认识。
  • 有自己查阅文档的能力。

如果有以下知识储备,那就更好了:

  • 能编写css样式。

怎么使用Hexo主题

上篇教程 中我们的Hexo博客已经可以跑起来了。但是默认的主题实在是很丑一点都不狂拽酷炫。
而我们搭建一个属于自己的狂拽酷炫的博客的博客的第一步,就是先在Hexo官网上挑选一个最接近适合我们博客的主题。
挑选到自己喜欢的主题后,接下来就是考验你眼力的适合了。因为我们要在展示的示例网站中,找到这个主题的项目名字、或者是地址。
作者放出来的该主题的示例网站,他可能是一个作者正在使用的个人站、也有可能是一个展示站(即样式展示而已)。也有可能是很规范的示例网站(即包含示例、教程、文档,同时单独挂载出来)。
这里我们以本站所使用的volantis主题为例子。进去之后就是非常完整的主题默认样式展示,同时是有版本更新内容以及文档教程等。

我们在主题网站的教程页面里,找到了如下安装命令:
安装命令
我们一步一步来解释以下这几步命令的含义,同时对于其他主题的安装也是大同小异,举一反三即可。

  1. Hexo中所有的主题都是下载到themes文件夹下进行统一管理。

  2. 而下载的git命令如上图所示,首先你要在命令行状态下进入到你的博客文件夹,然后使用下载命令进行主题下载。

  3. 而其他地址也一样,你所需要做的就是找到你想要的主题的地址,然后clone到themes下。

  4. 博客根目录下的_config.yml是整个博客项目的配置文件,而更改主题也是在其中进行更改。

    完成之后,别忘了我们的hexo三部曲:hexo clean,generate,service

    然后你就会看到,你的网站变成了这个样子:
    valantis主题下页面
    接下来就是进行一些基础的讲解与配置。

如何适配主题

配置文件

安装上面的步骤配置完,你的目录结构应该是下面这个样子:

目录结构
上面提到_config.yml文件为我们的配置文件。这里出现了两个yml文件,一个在根目录下,一个在主题的根目录下。
项目根目录下的yml为全局配置文件,而主题下的为主题配置文件。优先级上前者大于后者。
一般对于样式的个性化,都可以主题配置文件中完成。

主题目录结构

对于hexo的目录结构,上篇我们已经大致分析完了。我们现在来分析以下theme下主题的目录结构,而个性化你的主题样式,基本都是在这里进行实现。
不同的主题间目录结构大体是相同的,了解后举一反三即可。

  • .github文件夹是git仓库相关的文件夹,忽略。

  • languages文件夹是用来适配不同语言的实现国际化的,相关配置可以在主题配置文件下完成。再重申以下,所有的主题的相关配置,你基本都可以在主题配置文件下进行配置。

  • layout (重点)这里一般是用来存放文件样式模板的,一般采用ejs格式。

  • scripts 这里用来存放相关事件触发的js以及一些组件按钮相关的逻辑。

  • source (非常重要)用来存放样式、字体等文件。需要进行修改源码进行主题个性化的同学,这里就是我们的主战场。

    有几个知识点需要先理解一下:

  • hexo的理念就是一切皆为模板,根据模板自动生成所对应的html页面。所以layout文件夹就是他的结构模板所在。

  • 一般情况下,主题都可以在主题配置文件(yml)中进行配置与修改,个别情况下需要修改layout或者source下的文件夹才能diy成自己想要的样式。

  • 重要)但是修改layout或者source会对主题源码进行破坏。对于下次主题升级时,如果有代码或者文件冲突,就会造成问题。

  • 所以在优先级上,配置yml>引入其他样式/js文件>修改源码。

    建议有一定基础的同学,将主题单独fork进自己github的仓库中,
    然后再从自己的仓库中clone到项目中,那么在下次主题进行更行的适合,
    只需要解决merge的问题即可,此为最优解决办法。

主题个性化

终于进入了正题。本篇指在讲解一些最基础的适配,其他的依旧举一反三即可。

yml配置文件的修改

我们以最基础的为例子先。在进入安装完主题进去项目的时候,应该会发现,很多的导航链接打不开,或者是跳转到了题主的链接上。
于是我们的第一件事,就是把其中的一些必须修改的配置修改了。


打开主题的yml文件,我们会看到如下代码:
代码
yml文件有非常明确的层级结构。所以里面的代码前面的空格的多少都代表着层级关系。
如这里就是style(样式)下的一些配置,
其中包括导航栏样式配置navbar、字体对齐方式text_align等。
参照着官网教程来进行修改。

进阶修改

这一部分需要你有一定的前端代码基础。

大部分修改都是可以在yml中进行修改的,小部分个性化的样式,需要更改源码实现。
比方说最开始的时候我想给首页的字体添加一个荧光环绕的shadow-box的效果,就只能从源码动手
但是如果可以的话,最好不要修改源码,或者是从自己的仓库clone下来,
这么做的好处除了防止根源性污染源码,同时也可以把自己的对于主题的魔改进行保存提交。


而对于源码的修改,分为三种:

  1. 结构性的修改。

  2. 样式性的修改。

  3. 全局添加式的修改。

    对于结构性的修改,都在layout文件夹里面。
    我们以修改封面为例子,比方说我们不想要首页的这个搜索栏,正确的做法我们应该是查看yml文件是否有的配置有修改,本文只是简单展示个例子。
    我们找到了_cover文件夹下,找到index.ejs。看到代码如下:
    代码
    而根据代码,圈中的部分就是封面中搜索栏的所在的结点,把它去除、然后hexo clean,hexo g,hexo s三部曲,
    你就会看到你的封面上已经去除掉搜索栏了。
    其他的结构修改跟这里也是大同小异,你只需要找到结构所对应的ejs文件,添加新结点,删除结点,或者是更改结构顺序的等。


    对于样式性css修改,又或者是js等修改,都在source文件夹下。
    这里还是以封面为例子,我们找到了/source/css/_layout/cover.styl
    代码如下:
    代码
    圈住的部分,我把它原来的字体颜色,改成了红色。刷新你的页面之后,你就会看他已经生效了:
    代码生效
    这里有些人可能会有点疑问,为什么这里不需要clean,g,s三部曲了呢?
    因为hexo所生成的是一个静态页面,他根据你的结构所生成对应的html文件,而样式等在代码里是分离开的。
    也就是说,如果你的改动是涉及到结点、结构、以及由hexo所生成的文件的改变,你需要重新三部曲一下。
    如果你的改动是涉及到样式、js等之类的修改,你只需要刷新下即可。
    但不管如何,如果你遇到了各种不生效的问题,三部曲一下,总是没错的。


更进阶修改

更进阶的修改,类似于全局js点击特效、live2d等的修改,
我推荐官方也推荐的这篇文章
这部分需要有一定的代码基础才能尝试下。
同时我也推荐Hexo的中文站(Hexo官方文档其实并不友善,难以阅读。而这个开源站还是很不错的。)
里面有非常详细的从维护到建议以及”魔改教程”。

尾声

我们搭好了毛胚房,同时也精装修好了,剩下的家具购买,就看你自己的想象力和动手能力啦。
无论如何,都希望可以学会举一反三,由浅入深,大胆尝试,独立解决问题,
这对于工作还是生活,都是非常有帮助的。

评论