谈谈 Hexo 的主题现状以及我对 NexT 的细节改造

发表于 分类于 ，

上次发文还是三月初，中间停更了这么久，主要原因在于，之前我对主题源码进行了侵入式的改造，难以升级享受最新的版本特性，于是我就想要重建这个博客站点，兼顾可升级和可改造。

那我就想，既然要重建，何不换个主题试一下？果然，试试就逝世。

1 Hexo 主题

在静态博客框架中，Hexo 向来是最受青睐的选择，没有之一。

Jekyll 作为 GitHub 官方支持的框架，可以直接托管源码而无需手动生成静态网页，Hugo 借助 Go 语言的性能优势，号称全世界最快的框架，然而这两者都有一点远落后于 Hexo，那就是最为关键的主题生态。

作为一个想搭博客的人来说，审美能对自己胃口才是头等大事，所以主题生态只有枝繁叶茂才能留住众口难调的用户。

Hexo 使用 Node.js 开发，从语言层面上就吸引了大批优秀的前端工程师，精美主题可以说是层出不穷。

当然再好的主题也必然有令人不甚满意的地方，这里就把 Butterfly 单拎出来说说问题。

1.1 Butterfly

简洁好看，尤其是首屏的视觉效果，足够吸引眼球。这也是我刚开始重建的第一选择。

但是这个主题，说得严重一点，「金玉其外，败絮其中。」

我相信，任何用过 Butterfly 的人，一定会被 _config.butterfly.yml 中混乱的配置给搞得心烦意乱，举个栗子：

配置中有一段是关于网站默认的展示模式，可以选择明亮/暗黑：

code_config.yml
# Default display mode (網站默認的顯示模式)
# light (default) / dark
display_mode: light

然而在后面又出现了一段是关于暗黑模式，可以选择是否开启：

code_config.yml
# dark mode
darkmode:
    enable: true
    # Toggle Button to switch dark/light mode
    button: true
    # Switch dark/light mode automatically (自動切換 dark mode和 light mode)
    # autoChangeMode: 1  Following System Settings, if the system doesn't support dark mode, it will switch dark mode between 6 pm to 6 am
    # autoChangeMode: 2  Switch dark mode between 6 pm to 6 am
    # autoChangeMode: false
    autoChangeMode: false

这让我不禁想问：如果我在前面选了默认明亮模式，后面又选了开启暗黑模式，那主题到底是展现哪一种？只有试过之后才能知道，无疑增加了理解成本。

类似的问题还有很多，就不赘述了。总之这个配置文件折磨了我很久，最终不得不放弃。

不管怎样，我还是很尊重主题作者的，提供免费开源的主题给大家用，本身就非常值得敬佩。但还是那句话，「若批评不自由，则赞美无意义。」

而且感觉主题作者是个暴躁老哥，惹不太起。

2 NexT 改造

当然，我换过不止 Butterfly 一个主题，然而其他主题即便没有混乱的配置文件，也存在大量优化不到位的细节，所以兜兜转转又回到了 NexT 的怀抱。

2.1 基本配置

_config.yml 和 _config.next.yml 中的配置基本都体现在 commit f3cdd68 中，不再赘述。

2.2 特殊改造

特殊改造基本都体现在 commit 3d56b38 中，没有污染博客源码，只是通过自定义的 js 和 css 来实现。

  1. 替换站点标题中不规范的部分

    如果足够细心的话，你就会发现，在每个分类页面中，标题中的冒号都是英文冒号，不符合中文排版规范：

    替换后：

  2. 替换归档页面中不规范的部分

    归档页面中，表达冗余，且英文叹号也不符合中文排版规范：

    替换后：

  3. 替换文章信息中不规范的部分

    这个单纯是我看中文逗号不顺眼，不能表达分类之间的层级关系：

    替换后：

  4. 替换页脚中不规范的部分

    这个也单纯是我看 copyright 字符不顺眼，有点矮：

    替换后：

  5. 动画速度调整至 0.3s

    .animated {
        animation-duration: 0.3s !important;
    }

  6. 侧边栏字体从 font-size-smaller 调大至 font-size-small

    .menu-item {
        a {
            font-size: $font-size-small;
        }
    }
    .links-of-author {
        a {
            font-size: $font-size-small;
        }
    }
    .site-state-item-name {
        font-size: $font-size-small;
    }

3 后记

折腾告一段落，静下心来好好写些文章吧。