Ayer 主题优化

根据个人喜好 对Ayer 主题做了一些优化

Ayer 主题默认隐藏侧边栏

在 theme/ayer/layout下的layout.ejs做如下更改：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
-<main class="content on">
+<main class="content">
      <%- body %>
      <%- partial('_partial/footer', null, {cache: !config.relative_link}) %>
      <div class="float_btns">
        <%- partial('_partial/totop') %>
      </div>
    </main>
-    <aside class="sidebar on">
+    <aside class="sidebar">
      <%- partial('_partial/sidebar') %>
    </aside>
-    <script>
-      if (window.matchMedia("(max-width: 768px)").matches) {
-        document.querySelector('.content').classList.remove('on');
-        document.querySelector('.sidebar').classList.remove('on');
-      }
-    </script>

这样的话侧边栏菜单在打开网页的时候就是默认关闭的了。

使用 Highlight.js 优化代码块高亮效果

本部分参考 使用 Highlight.js 优化代码块高亮效果.

为什么是Highlight.js

Hexo 本身就自带高亮功能，只不过不完美，比如 Scheme 这个我常用的语言它就没有高亮效果。话虽如此，这个自带的高亮功能在我所用的主题里也比市场上的其他插件（例如 Hexo-Prism-Plugin ，hexo-filter-highlight 和 Prettify 这三个坑货）要好用得多。这里说的好用，主要体现在最终渲染出来的排版效果上的美观、设置上的便捷，且不会引入过多 Markdown 和 Latex 之间语法的冲突。

经过一番调研，最终我放弃安装 Plugin（插件）版本的 Highlight.js（ hexo-filter-highlight 就是一个基于 Highlight.js 开发的 Plugin 。这些 Plugin 虽然安装设置方便，其模块化属性也方便管理，但如果效果不好，不如不用），直接选择使用原版的 Highlight.js 。你可以在官方 Demo 页面查看它各个语言在各个风格（Style）下的显示效果。

实现

由于 cps.ninja 使用的是 pln 主题，所以下面的步骤将以该主题为例来设置 Highlight.js 。

步骤一：

前往 Highlight.js 的官方下载页面，在 Custom package 的部分勾选你希望获得高亮支持的语言（想一步到位就全选），勾选完毕后点击 Download 按钮下载，得到 highlight.zip 压缩包；

步骤二：

解压刚刚的 highlight.zip 压缩包，得到 highlight.min.js 文件和 styles文件夹（该文件夹中包含了各种显示风格的 CSS 文件）。接着，将 highlight.min.js 文件移动到 source/js/ 目录下，而 styles 文件夹（包括里面的所有 CSS 文件）则移动到 source/css/highlight 目录下；

步骤三：

修改根目录下 _config.yml 文件中 highlight 部分的设置（主要目的是关闭它，其他设置只是顺便说明一下）：

1
2
3
4
5
highlight:
  enable: false          ## 关闭 hexo 自带的 highlight 
  line_number: false
  # auto_detect: false   ## 这里要注释掉是因为 hexo 自带的 highlight 的 auto_detect 这个属性有 bug ，且之后要被官方抛弃  
  tab_replace: 2

步骤四：

修改 layout/_partial/after_footer.ejs ，增加了以下两行（目的是调用第二步里我们下载的 highlight.min.js 文件）：

1
2
3
4
5
<!-- 第一个为本地客制化的文档 第二个为 Prebuild 的 CDN 缓存文档 若选用第二个需要检查版本号 此处为11.1.0 -->
<script src="/js/highlight.min.js"></script>
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.1.0/build/highlight.min.js"></script>

<script>hljs.initHighlightingOnLoad();</script>

修改 layout/_partial/head.ejs ，增加了以下一行（通过调用指定的 CSS 文件选择相应的高亮风格，引入的位置在<head></head>之间，下面的例子里选择的风格是 Srcery）：

1
2
<link href="/css/highlight/styles/srcery.min.css" rel="stylesheet">
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.1.0/build/styles/default.min.css">