修复fluid的tags中的词云tag跳转异常问题

前言

最近在尝试搭建自己的blog，再再三考量之下选择了hexo，不得不说这个blog框架还是很香的，配合github的托管能够快速搭建一个界面美观的博客。

但是在使用的过程中我发现了一个小问题，就是博客的tags并不能正常工作。

当我们从首页中的tag跳转时，可以跳转到正常的界面，如图：

但是当我从tags界面的词云中跳转时就会出现错误

错误界面如图:

解决方法

我们可以很明显的观测到问题——url地址错误，重复了一次’tags/‘目录

我们首先说解决方案：

找到目录<your hexo dirctory>\node_modules\hexo\lib\plugins\helper中的tagcloud.js文件，将文件第71行改为：

`<a href="${url_for.call(this, tag.path).substring(5)}" style="${style}"${attr}>${transform ? transform(tag.name) : tag.name}</a>`
//原代码为：
//`<a href="${url_for.call(this, tag.path))}" style="${style}"${attr}>${transform ? transform(tag.name) : tag.name}</a>`
//加上了一个子字符串分割

注意！这个方法只适合跟我描述的错误相同的朋友，如果问题不同请不要随意更改！

详细解释

这一部分讲述我怎么分析并解决问题的，如果不感兴趣可以直接关掉网页了

首先发现到这一点后，我企图弄清楚fluid是如何生成tags这个html文件的。但是我观察文件夹时并没有和明显的察觉到这一点。于是我找到public文件夹，这个文件夹存放的是通过hexo生成的html文件。 然后我们找到tags文件夹下的index.html 文件，随着翻阅html文件，我发现了这样的一块代码：

<div class="text-center tagcloud">
  <a href="tags/node-js/" style="font-size: 15px; color: #bbe">node.js</a> <a href="tags/前端/" style="font-size: 15px; color: #bbe">前端</a>
</div>

毫无疑问，这就是生成词云的代码，但是我已经生成为html的文件我们并不能直接改，因为如果要这样解决问题，每次生成新的html之后我们都要手动修改一次，这是很没有效率的。于是我们顺藤摸瓜继续寻找问题。

于是我在webstrom使用ctrl+shift+r全局查找tagcloud，发现在fluid的layout中有一个名为tags.ejs文件，这显然是生成tags的文件之一。其中有这样的一块代码：

<div class="text-center tagcloud">
  <%- tagcloud({
    min_font: min_font,
    max_font: max_font,
    amount: 999,
    unit: unit,
    color: true,
    start_color,
    end_color
  }) %>
</div>

很明显，这是生成上面那个html的映射文件，但是这其中依然没有修改herf的方法。于是我们继续向源头寻找。

然后我们发现tagcloud包是被引用进来的，而他的源码就在我们面提到过的文件夹中。

`<a href="${url_for.call(this, tag.path)}" style="${style}"${attr}>${transform ? transform(tag.name) : tag.name}</a>`

这一行很明显就是生成每个小tag的代码。虽然我们看不太懂${url_for.call(this, tag.path)}这行代码的意思，但是我们知道最终他都会被解析为字符串。如果你熟悉js，就会知道js拥有将所有东西转化为字符串的能力😂因此我们直接使用substring方法来更改这一行代码就可以解决问题了

发布于： Dec 19, 2024

编辑于： Dec 19, 2024