自定义博客功能拓展，HEXO 注入器

昨天我把主题从 Cards 切换到 Fluid，发现 Fluid 默认没有提供接口以便在 <head> 后面插入 Google Sitemap 相关的信息，通过阅读 Fluid 提供的文档，我发现了 HEXO 5.0+ 提供的一个功能：HEXO Injector。

HEXO INJECTOR

What is HEXO Injector ?

注入器被用于将静态代码片段注入生成的 HTML 的 <head> 和/或 <body> 中。Hexo 将在 after_render:html 过滤器之前完成注入。

hexo.extend.injector.register(entry, value, to)

几个应用场景

Instant.Page

Instant.Page 是一个提高用户浏览网页的好工具，很多比较大的公司都使用了该工具：

例如：Adidas\Spotify and etc

Instant.Page 可以让用户在站内移动鼠标到站内链接时用自己的方式预加载当前鼠标指向的链接。当你再次点击该链接，可以实现更迅速的打开。例如我的博客搭建托管在 Cloudflare，加载了 Instant.Page 可以比没有提升了肉眼可见的提升。

Instant.Page Github

<script src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>

在 HEXO 各个不同的主题中,一般会提供不同的方法让你在</body>前插入自定义代码段。下面是一些我用过的主题实现加载 instant.page 的方法。

Butterfly
直接在 _config.butterfly.yml 中设置 instantpage: true 即可。
fluid
按照以下文段中替换 value 中的值即可。

对于部分安装了 Ublock Origin 的浏览器，由于Amazon等大型网站也是采用该脚本加速广告，该脚本会被插件所屏蔽，你可以保存 instant.page 的 js 脚本保存到私有路径上，再用CDN加速即可，这样可以避免被拦截。更为简单的方法是我已经保存到了我的 Github 上，你也可以直接调用我的资源。

<script src="https://cdn.jsdelivr.net/gh/DioPong/CDN@main/Javascript/instant_page_v5.1.0.js" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>

SEO

更多看官方文档，我在这里简单记录一下。

在 Fluid 中，我建立了/scripts/injector.js，内容为

hexo.extend.injector.register('head_end', `
    <meta name="google-site-verification" content="You Own Sitemap Content" />
    <link rel="alternate" hreflang="zh-cn" href="https://blog.2to.fun"/>
    `, 'default');

需要把 meta > content 改为个人网站的 content。
其中<link rel="alternate"..."/>的作用是方便谷歌识别语言进行爬取，非必须。

相关链接基于Vercle和Github Pages快速搭建博客

网站 Favicon

推荐观看：在2021应该怎样配置 Favicon：用六个文件来适配大多数需求

在大部分的 HEXO 框架下的博客都为我们提供了一个 favicon 的选项，但是如果我们想要更复杂的 favicon 的实现，例如针对不同平台给出不同的 favicon，又或者为你的博客 favicin 增加暗色主题支持，博客预留的配置是捉襟见肘的。

如果你不想 Fork 主题然后自己手动修改的话，这时候宽容的 HEXO Injector 是解决这个问题最棒的方法：

hexo.extend.injector.register('head_begin', `
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
    <link rel="manifest" href="/site.webmanifest">
    `, 'default');

添加谷歌统计（Google Analysis）

代码段样式应该如下

hexo.extend.injector.register('head_end', `
    <script>
    window.ga_tid = "UA-xxxxxxx-x";
    window.ga_api = "https://blog/example.com/";</script>
    <script src="https://cdn.jsdelivr.net/npm/cfga@1.0.3" async></script>
    `, 'default');

我也将心得放在我自己的 CNblog 上，虽然这很拉跨，但是我不想反复搬运了。你可以看一下我是怎么实现的。

其他

我们也有可能会有一些网站是不想让谷歌进行站点部署的，这时候我们需要在根目录建立我们的robots.txt阻止不必要的爬取。

参考为Hexo博客进行SEO (@Hankeng)

Author: DioPong

Permalink: https://blog.2to.fun/post/Artitalk/hexo-injector/

文章默认使用 CC BY-NC-SA 4.0 协议进行许可，使用时请注意遵守协议。

updated at 2021-12-09