Hexo博客问题解决记录

首先我使用的是阳神的博客模板，部署完成后，各种效果都比较满意。但是实际使用中也发现一些问题，今天就记录一下这些问题的修复方法，供大家借鉴。
要记录的优化点主要是两个：

• 手机访问页面时标题显示异常；
• 点击博客生成的tag图无法打开页面。

问题一：手机访问页面时标题显示异常

首先看第一个问题，博客部署好后，回家的路上使用手机打开页面查看效果。在打开文章后，嚯，标题显示的特别大，标题“卓技卓品”的“品”字换行显示了。并且下发的文字字体过大，显示内容较少。效果如下：

显示错乱

但是这个字体在电脑上显示是刚好的，所以就需要区别手机与电脑的效果。
通过尝试，发现需要在my.css文件里自定义配置效果。可以针对小屏幕显示时设置文章的标题字体大小。
在\themes\matery\source\css\my.css文件中添加如下代码：

/* Here is your custom css styles. */
/* 修改首页轮播的标题大小 */
@media only screen and (max-width: 601px) {
    .bg-cover .title {
        font-size: 2.5rem;
    }
}
/* 修改博客标题的字体大小 */
@media only screen and (max-width: 601px) {
    header .brand-logo .logo-span {
        font-size: 1.5rem;
    }
}

设置后再次打开页面（清除浏览器缓存），显示效果如下：

显示正常

问题二：wordcloud生成的词云标签404

博客中使用了wordcloud生成了词云标签图片。wordcloud可根据标签的数量生成不同大小的标签图效，显示效果好看。但发现当标签是中文时，点击图片上的中文标签会跳转到404页面，无法筛选出对应标签的文章。
效果如下：

地址错乱

我发现地址栏显示的是：devdroid.cn/tags/%25E6%2597%25A5%25E5%25B8%25B8/
当点击标签按钮时，能够正常筛选出对应标签的文章并打开页面。
正常时地址栏显示的是：devdroid.cn/tags/日常/
如此看来肯定是使用wordcloud处理地址时出现了问题，导致对数据编码异常。
我找到\themes\matery\layout_widget\tag-wordcloud.ejs文件，发现处理地址如下：

<script type="text/javascript">
    <%
    let tagWordArr = [];
    site.tags.map(function(tag) {
        tagWordArr.push({'text': tag.name, 'weight': tag.length, 'link': url_for(tag.path)});
    });

    let tagWords = JSON.stringify(tagWordArr);
    %>

    $('#tag-wordcloud').jQCloud(<%- tagWords %>, {
        autoResize: true
    });
</script>

发现tag.path使用hexo内置的url_for方法进行格式化。通过日志输出发现传入正常的地址，经过该方法处理后就会出现异常（可能是编码问题）。因为我不是专业前端，无法深入底层优化，所以我就找了个取巧的方式，采用地址拼接的方案解决该问题。优化后代码如下：

<script type="text/javascript">
    <%
    let tagWordArr = [];
    site.tags.map(function(tag) {
        tagWordArr.push({'text': tag.name, 'weight': tag.length, 'link': "/"+tag.path});
    });

    let tagWords = JSON.stringify(tagWordArr);
    %>

    $('#tag-wordcloud').jQCloud(<%- tagWords %>, {
        autoResize: true
    });
</script>

此时再点击wordcloud生成的词云图片上的中文标签，显示就正常了。

注：本文来源于卓技卓品，任何转发请注明来源。