解决Hexo博客框架中Twikoo评论框架路径不一致的问题

引言：

在我继续修理博客的过程中，没错，你没有看错，我陆续从今年1月开始维护博客至今。主要原因是我很忙，维护工作也需要时间，而且在修复之后还需要处理一些细节问题，这是我之前没有注意到的。由于当时静态资源几乎全部丢失，现在我已经基本上优化了访问速度，这使得我的Hexo博客框架名副其实。随着我对网站的打理以及撰写一些有用的内容，网站的访问量逐渐提升。然而，我注意到了一些之前未曾注意到的问题。在Hexo博客生成过程中存在一个问题，你可以访问这篇文章的链接https://blog.ning.moe/post/fix-hexo-twikoocomment-path-inconsistency/，也可以在该链接后面添加index.html，但对于Twikoo评论框架而言，这两个链接并不相同。

阅读须知：

本文的操作是在使用”butterfly”主题的情况下进行的，其他主题也可以模仿这个操作，但需要注意先查找自己的主题是否可以直接在配置文件中进行更改。更多细节请参考这个”issues”链接：https://github.com/imaegoo/twikoo/issues/138。

正文：

下面我将直接进入正文。

Butterfly的问题

我的博客主题是butterfly，本身已经对Twikoo进行了适配。但我不好意思提出”issues”来更改它，因为我通过搜索找到了Twikoo官方的一个”issues”：里面作者已经回复了。

twikoo.init({
  // ......,
  path: 'window.location.pathname.replace(\'index.html\',\'\')'
})

但问题是，Butterfly主题本身没有额外的选项来配置Twikoo，所以我决定直接修改主题的源码。

更改主题模板

首先，确保你找到了Butterfly主题的文件夹，它的目录结构应该是这样的：

├─.github
├─languages
├─layout
├─scripts
└─source

然后，找到/layout/includes/third-party/comments/twikoo.pug这个文件。

在大约第11行的位置添加以下代码：path: window.location.pathname.replace('index.html','')，下面是我已经添加好的代码：

script.
  (()=>{
    const init = () => {
      twikoo.init(Object.assign({
        el: '#twikoo-wrap',
        envId: '!{envId}',
        region: '!{region}',
        path: window.location.pathname.replace('index.html',''),
        onCommentLoaded: function () {
          btf.loadLightbox(document.querySelectorAll('#twikoo .tk-content img:not(.tk-owo-emotion)'))
        }
      }, !{JSON.stringify(option)}))
    }