示例效果

注：以上超链接并没有任何指向，只作示例用！

前言

事实上这个想法在很早以前就有了，但那时候我还不知道具体的实行方案（只知道最笨的方法是直接在每篇文章开头自己写传送门，不过每次更新一篇新的文章以后就要全部都补充一遍，非常麻烦）。在经过博客一系列的魔改以后，也算是储备了一小些基本的 css js 知识，所以就有了这篇文章。

js 实现

首先 hexo-theme-butterfly\source\js（请替换成自己的 js 文件存放路径）中新建一个 portallinks.js 文件，在里面填写以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

function generatePortalLinks(currentArticleId) {
    var links = [
        //填写 id 及对应的标题和链接
        { id: 1, title: "这里填写标题 1", url: "这里填写链接 1" },
        { id: 2, title: "这里填写标题 2", url: "这里填写链接 2" },
        { id: 3, title: "这里填写标题 3", url: "这里填写链接 3" },
        { id: 4, title: "这里填写标题 4", url: "这里填写链接 4" },
        //如果还有更多就继续依次填写
    ];

    var html = '<div class="portal">';
    //看自己需要可以修改部分
    html += '<h3>系列文章传送门</h3>';
    html += '<ul>';
    for (var i = 0; i < links.length; i++) {
        html += '<li>';
        if (links[i].id === currentArticleId) {
            html += '<strong>';
        }
        html += '<a href="' + links[i].url + '">' + links[i].title + '</a>';
        if (links[i].id === currentArticleId) {
            html += '</strong>  👈 您当前所处位置';
        }
        html += '</li>';
    }
    html += '</ul></div>';

    document.getElementById('portalContainer').innerHTML = html;
}

填写完以后，在文章开头写入以下内容以引用该 js 文件（如果使用的是 Typora 等编辑器则需切换成源代码输入）并且通过指定 ID 确定当前所处位置：

1
2
3
> <div id="portalContainer"></div>
> <script src="/js/portallinks.js"></script>
> <script> generatePortalLinks(3);</script>

以上示例代码的效果可见文章开头，实际应用中 generatePortalLinks(3) 中的数字请换成文章对应的 id。

这样做的好处在于，以后更新了新的系列文章后，只需要修改对应的 js 文件并部署就能让所有文章中的传送门发生相同的变化。

后记

部署传送门一方面让读者寻找对应内容变得更加便利，另一方面也能让阅读量高排名前的文章给其他文章引流。

不过需要注意的是，所有需要部署传送门的文章都要引入上述代码（并更换 generatePortalLinks() 中的数字），这对于已经更新了很多文章的人来说会比较累，此外 js 文件中的各项信息也需要进行相应的修正。

实际应用效果可见本博客的 比较转录组分析 和 JuseKit 系列文章。