有关使用VOID主题遇到的问题及解决措施

2023-04-14 更新 214 阅读

本站（2019年11月—2020年3月）基于Typecho驱动，并采用了熊猫小A的VOID主题。在关于VOID的设置上踩了不少坑。很幸运的是通过摸索解决了大部分问题，然后还在秦有时的一篇VOID主题相关的踩坑记录上找到了最后一个问题的解决方案。之后把博客搬家又碰到了一些小问题。小问题虽然无伤大雅，但是真的让人挺难受的。在此，我记录一下所有我碰到的问题及其解决措施。

VOID V3.4版本相关设置

主题作者已经总结了一些常见问题的解决措施。常见问题（请务必仔细阅读）

jQuery引用问题

VOID主题文章首页有双栏和单栏两种模式。若使用双栏模式的话，需要注意关闭插件引入的jQuery。否则会导致文章首页空白。

主题超高级设置

需参考主题文件内的advanceSetting.sample.json，严格按照json的格式来写。注意需要用"{}"大括号包裹整个设置内容。

自定义Service Worker

主题作者是这么说的。

如果你知道这是什么，请把你的 SW 文件（例如主题 assets 文件夹下的VOIDCacheRule.js）复制一份到站点根目录，并在这里填写文件名（例如VOIDCacheRule.js）。若不知道该选项含义，请留空此项。

的确，我也不了解Service Worker是啥。简单了解了一下，需按照操作把主题assets文件夹下的VOIDCacheRule.js复制一份到站点根目录，然后还需要添加manifest.json。这个文件放的位置要和配置中的路径一致, 我是放在根目录的。具体写法如下：

manifest.json

  {
  "name": "咕咕三原.博客",
  "short_name": "ccsy‘blog",
  "theme_color": "#252525",
  "background_color": "#adb1b4",
  "display": "standalone",
  "Scope": "/",
  "start_url": "https://xn--ehqz9kbvaa.wang/",
  "icons": [
    {
      "src": "images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

其中manifest.json可以使用相关网站直接生成，地址： https://app-manifest.firebaseapp.com/ 值得注意的是需要自己准备512x512 ico图标。

评论表情显示错误

之前改了后台路径，于是想着顺便把插件和主题的路径也改一下。结果发现评论表情显示不出来，后来才发现原来主题作者设置了表情地址相对路径。如果改了主题的路径的话，就必须把主题assets/libs/owo/目录下的OwO_01.json这文件里的表情路径一起改了。

网站标题自定义字体

这个问题的解决得感谢秦有时的文章，致主题作者，谢谢！ 设置过程 提取你要使用的文字，因为最小的字体文件都要1-2M，所以提取到几kb吧，需要使用到字体提取工具导入相关字体目录到typecho根目录(作者字体：方正粗金陵繁体) /typecho/font / FZCuJinLFW.woff 登录后台 -> 外观 -> 设置外观 ->head 标签输出内容

<style>
//主题头部CSS文件采用此字段
.brand{font-family:FZCuJinLFW,serif;font-weight:normal!important;}
@font-face {
    font-family: "FZCuJinLFW";
//大坑，下面的路径一定要这么写，不然二级文章页可能不会生效，然而主页却成功
    src: url("./../../font/FZCuJinLFW.woff");
}
</style>

登录后台->外观->设置外观->首页顶部大小标题

//我的大标题
<span class="brand"  >咕咕三原小窝</span>
//我的小标题
<span class="brand"  >记录美好，赠与未来。</span>
//上面的标题及标签填入相应的输入框即可！