首先我使用的是陽神的博客模板丧没，部署完成后，各種效果都比較滿意冠摄。但是實際使用中也發(fā)現(xiàn)一些問題桐经，今天就記錄一下這些問題的修復(fù)方法，供大家借鑒主到。
要記錄的優(yōu)化點主要是兩個：
- 手機訪問頁面時標(biāo)題顯示異常茶行；
- 點擊博客生成的tag圖無法打開頁面。
問題一：手機訪問頁面時標(biāo)題顯示異常
首先看第一個問題登钥，博客部署好后拢军，回家的路上使用手機打開頁面查看效果。在打開文章后怔鳖，嚯茉唉，標(biāo)題顯示的特別大，標(biāo)題“卓技卓品”的“品”字換行顯示了结执。并且下發(fā)的文字字體過大度陆，顯示內(nèi)容較少。效果如下：
但是這個字體在電腦上顯示是剛好的献幔，所以就需要區(qū)別手機與電腦的效果懂傀。
通過嘗試，發(fā)現(xiàn)需要在my.css文件里自定義配置效果蜡感〉乓希可以針對小屏幕顯示時設(shè)置文章的標(biāo)題字體大小。
在\themes\matery\source\css\my.css文件中添加如下代碼：
/* Here is your custom css styles. */
/* 修改首頁輪播的標(biāo)題大小 */
@media only screen and (max-width: 601px) {
.bg-cover .title {
font-size: 2.5rem;
}
}
/* 修改博客標(biāo)題的字體大小 */
@media only screen and (max-width: 601px) {
header .brand-logo .logo-span {
font-size: 1.5rem;
}
}
設(shè)置后再次打開頁面（清除瀏覽器緩存）郑兴，顯示效果如下：
問題二：wordcloud生成的詞云標(biāo)簽404
博客中使用了wordcloud生成了詞云標(biāo)簽圖片犀斋。wordcloud可根據(jù)標(biāo)簽的數(shù)量生成不同大小的標(biāo)簽圖效，顯示效果好看情连。但發(fā)現(xiàn)當(dāng)標(biāo)簽是中文時叽粹，點擊圖片上的中文標(biāo)簽會跳轉(zhuǎn)到404頁面，無法篩選出對應(yīng)標(biāo)簽的文章。
效果如下：
我發(fā)現(xiàn)地址欄顯示的是：devdroid.cn/tags/%25E6%2597%25A5%25E5%25B8%25B8/
當(dāng)點擊標(biāo)簽按鈕時虫几，能夠正常篩選出對應(yīng)標(biāo)簽的文章并打開頁面锤灿。
正常時地址欄顯示的是：devdroid.cn/tags/日常/
如此看來肯定是使用wordcloud處理地址時出現(xiàn)了問題，導(dǎo)致對數(shù)據(jù)編碼異常辆脸。
我找到\themes\matery\layout_widget\tag-wordcloud.ejs文件但校，發(fā)現(xiàn)處理地址如下：
<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>
發(fā)現(xiàn)tag.path使用hexo內(nèi)置的url_for方法進(jìn)行格式化。通過日志輸出發(fā)現(xiàn)傳入正常的地址啡氢，經(jīng)過該方法處理后就會出現(xiàn)異常（可能是編碼問題）始腾。因為我不是專業(yè)前端，無法深入底層優(yōu)化空执，所以我就找了個取巧的方式浪箭，采用地址拼接的方案解決該問題。優(yōu)化后代碼如下：
<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生成的詞云圖片上的中文標(biāo)簽辨绊，顯示就正常了奶栖。
注：本文來源于卓技卓品，任何轉(zhuǎn)發(fā)請注明來源门坷。
