给 Hexo 博客每篇博文增加镜像跳转提示

本文最后更新于：几秒前

最新更新：镜像站 blog1.kukmoon.com 已停用，本文内容已失效。

由于中国移动用户（包括移动宽带和移动手机流量）用户访问谷月姐的博客（https://blog.kukmoon.com，以下简称本博）过慢，谷月姐专门为移动用户建立了一个镜像站 https://blog1.kukmoon.com ，并且在博客首页的文字说明中展示镜像站的链接，可以点击跳转^[1]。

首页的两条文字说明

1 问题的提出

但是即使在首页展示镜像站的链接，仍然不方便。

模拟一下使用场景：读者在阅读博文时，发现本博加载太慢，才会点击链接跳转到镜像站的首页，再寻找对应的文章。

能不能从本博的某篇博文直接跳转到镜像站的同一篇文章呢？

2 问题的分析

要从本博的某篇博文直接跳转到镜像站的同一篇文章，只需要在每篇博文中放置一条镜像跳转提示，里面带一个链接，让读者点击链接去跳转就可以了，如图所示。

博文中的提示

2.1 这个链接如何生成？

本博使用了 hexo-abbrlink 插件，它会给每篇博文生成一个唯一的短链接。短链接储存在每篇博文的 MarkDown 源文件的文件头（front matter）的 abbrlink 字段。

abbrlink 字段

以本文为例，本文的 abbrlink 是 c4d07859，而镜像站的域名是 https://blog1.kukmoon.com 。那么本文的 URL 就是 域名/abbrlink.html，即 https://blog1.kukmoon.com/c4d07859.html。

可以借助 Hexo 的变量，读取 abbrlink 字段的内容，生成动态的链接。

2.2 如何在每篇博文中展示这个链接？

本博使用了 Fluid 主题，themes/fluid/layout/post.ejs 文件负责渲染每篇博文的内容。只需要修改这个文件就可以了。

认真分析这个文件的结构，可以发现，第 15 行对应页面的副标题，第16行对应页面的更新时间提示。需要在这两行之间插入镜像跳转提示。

post.ejs 文件的结构

副标题与更新时间提示

3 问题的解决

打开博客源文件所在目录下 themes/fluid/layout/post.ejs 文件，在原来的第 15 行与第 16 行之间增加一行代码：

<p class="note note-primary" style="font-size: 15px;"><a href="https://blog1.kukmoon.com/<%- page.abbrlink %>.html">请中国移动用户点击此链接访问本文的镜像 <span style="text-decoration:underline">https://blog1.kukmoon.com/<%- page.abbrlink %>.html</span> ，以免图文加载过慢。</a></p>

其中 <%- page.abbrlink %> 是直接读取本文的 abbrlink 字段的值，配合上下文准确地生成本文在镜像站的链接。

效果如图所示。

最终效果

4 Todos

4.1 如果不需要在镜像站显示这个提示呢？

这个提示本身是引导读者从本博的主站跳转到镜像站。在镜像站再显示这个提示，纯粹是画蛇添足。

此时，需要在 themes/fluid/layout/post.ejs 文件中引入 if 判断当前页面是不是在镜像站。

我发现 EJS 似乎不能胜任这个任务，需要用 JS。

把上文《3 问题的解决》中的那行代码改成下面这段代码就可以解决：

<p id="tip_for_jumping" class="note note-primary" style="font-size: 15px;"><a href="https://blog1.kukmoon.com/<%- page.abbrlink %>.html">请中国移动用户点击此链接访问本文的镜像 <span style="text-decoration:underline">https://blog1.kukmoon.com/<%- page.abbrlink %>.html</span> ，以免图文加载过慢。</a></p>      
<script>
  var current_host = window.location.host;
    if (current_host == "blog1.kukmoon.com") {
    document.getElementById("tip_for_jumping").style.display="none";
  }
</script>