Hexo高级教程之主题开发

最新推荐文章于 2024-09-11 18:25:11 发布

Jamling

最新推荐文章于 2024-09-11 18:25:11 发布

阅读量1.7w

点赞数 19

分类专栏： Web 文章标签：前端 hexo hexo主题

本文链接：https://blog.csdn.net/melordljm/article/details/51985129

版权

本文是关于Hexo高级教程的主题开发篇，详细介绍了如何修改和开发Hexo主题，包括主题配置、风格、模板和辅助函数的修改。强调了在前端技术基础上理解hexo模板、变量和辅助函数的重要性，提供了主题设计、资源管理和第三方插件的集成建议。

摘要由CSDN通过智能技术生成

引言

有感于hexo高级教程实在太少，当初本人在开发Nova主题时，曾遇到过不少坑，为填这些坑，较为深入地学习了hexo源码，又自学了不少node.js知识，才总算将这些坑基本填完。本着人人为我，我为人人的分享精神，特开一hexo高级教程专题，希望广大hexo爱好者拍砖~

本系列的定位为高级教程，所以要求读者具备以下知识或技能：

前端技术：前端基础知识不用说了，必须要具备的比如HTML，CSS，Javascript，Node.js。如果知识储备不足，推荐去W3C School好好学习。
hexo模板：hexo中的layout模板都是使用某个具体的模板引擎写的，模板引擎有swig,ejs，jade等。layout可以视为MVC模式中的View层，用于负责具体页面的展示。
hexo变量：hexo内置了不少常用的变量，例如site.posts是站点所有的博客文章， config为hexo博客设置，page为hexo页面对象。hexo变量可以视为MVC模式中的Model层，负责给View提供要展示的数据。
[辅助函数]：hexo中内置了不少[辅助函数]，这些辅助函数可以在模板中直接使用，用于快速地插入要展现的变量内容。辅助函数与MVC中的Controller有点类似，负责数据Model的获取以及如何在View中展示。
Hexo基础知识：基础知识可以自行度娘或谷歌。PS：个人建议还是看官方文档，有简体中文版本，遗憾的是，官方网站在国内访问有点慢☺。

主题修改

在讲到主题开发之前，不得不讲一下主题修改。目前hexo已有许多成熟的主题。但是未必完全符合博主的要求。灵活性好一些的主题，可能通过修改主题配置可以达到博主的目的，有些则需要修改主题模板或CSS甚至是辅助函数。不过与开发全新的主题相比，工作量还是少了许多。个人建议，如无必要，没有必要开发全新的主题。毕竟博客网站重的是内容，而不是外观。大多数主题，都具备了博客该有的功能，就不必像我如此折腾。当然做为极客的人们则另当别论。

主题配置修改

这部分相对简单，因为主题一般有相关的文档来告诉你如何修改。

以主题Nova为例，Nova主题在菜单配置上，有项导航菜单叫做捐赠墙，捐赠墙是http://www.ieclipse.cn 特有的模块，对于其它博客站点并不适用，那么，只需要将它删除或使用#将其注释即可。这样，它就不会出现在菜单栏中了。

主题风格修改

个人推荐在已有主题样式的基础上，新建一个新的CSS文件，并做为引入样式的最后一个。因为CSS按加载的顺序，如果发现有相同选择器的样式，则后面的CSS规则会合并或覆盖原有的规则。举个例子，原来主题中的链接(a标签)颜色为蓝色（#00f），可以重写链接（a标签）的CSS。

原来的css：

a {
color: #00f;
}

追加的css：

a {
color: #f96;
text-decoration: none;
}

color规则会覆盖原来的color规则，而text-decoration则会作为新规则引入。CSS查看器，基本上浏览器都自带此功能。调试相对来说比较简单。

主题模板修改

在此，还是以Nova主题为例，如果站点不考虑国际化，只做单语言站点，则没有必要保留语言选择功能。遗憾的是，想要不显示，则不能通过修改主题配置来实现，需要修改主题的模板文件。Nova主题的导航栏菜单位于layout/partial/header.swig中，使用记事本之类的编辑打开它，将

        <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{
   {__('page.language')}} <span class="caret"></span></a>
            <ul class="dropdown-menu">
              {%- for lang in get_langs() %}
              <li><a href="{
   {
   switch_lang(lang)}}">{
   { lang_name(lang) }}</a></li>
              {%- endfor %}
            </ul>
          </li>
        </ul>

这一段html删除或注释即可

辅助函数修改

以官方的辅助函数list_archives为例，虽然此函数可以设置class参数，不过它的内部在生成ul和li时，都使用了动态的class，自动给class加了后缀。如下所示：

if (style === 'list') {
    result += '<ul class="' + className + '-list">';

    for (i = 0, len = data.length; i < len; i++) {
      item = data[i];

      result += '<li class="' + className + '-list-item">';

      result += '<a class="' + className + '-list-link" href="' + link(item) + '">';

这样css中必须使用.xxx-list作为ul，.xxx-list-item为作li的样式，本着精减html的原则，修改后的代码为：

  if (style === 'list'){
    result += '<div class="' + className + '">';

    for (i = 0, len = data.length; i < len; i++){
      item = data[i];

      result += '<a class="' + className + '-item" href="' + link(item) + '">';
      result += transform ? transform(item.name) : item.name;

使用div和a来简化布局。

主题开发

有了前面的主题修改经验，相信博主们对hexo主题已经有一定的了解了。在这里，我把主题开发分为两种
1. 主题迁移，除了hexo之外，还有许多其它的优秀博客系统，比如Wordpress，它们也有自己的主题。其中不乏一些优秀的主题。hexo中有不少主题就是迁移自其它博客系统的优秀主题。此种方式，可以最大方