有关使用VOID主题遇到的问题及解决措施
本文最后更新于 160 天前,其中的信息可能已经有所发展或是发生改变。

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

VOID V3.4版本相关设置

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

jQuery引用问题

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

主题超高级设置

作为一个外行,我觉得这个问题也就我会出问题吧。主题作者说要参考主题文件内的advanceSetting.sample.json,然后严格按照json的格式来写。不过因为写好保存之后并没有生效!所以我还特意去查了json格式具体是啥样的。最后才发现原来是还需要用”{}“大括号包裹整个设置内容。

不小心遗漏了熊猫姐姐示例文件里的打头和结尾包裹用的大括号,这就是不生效的关键呀!

最后添加上就好啦。

自定义Service Worker

主题作者是这么说的。

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

的确,我不知道Service Worker是啥,还是查了一些资料才有了一点点概念。
当时参照熊猫姐姐的网站,发现用Chrome打开还会有生成桌面端的提示。于是生成了一个试了下,感觉真不错呀!也是查了资料发现这是PWA
最后才算明白Service Worker的设置就算为了把网站PWA化吧。
于是按照操作把主题assets文件夹下的VOIDCacheRule.js复制一份到站点根目录。不过发现并没有出现生成PWA的提示。
原来还需要添加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根目录(作者字体:方正粗金陵繁体)
/type­cho/​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>
//上面的标题及标签填入相应的输入框即可!
暂无评论

发送评论 编辑评论


				
上一篇
下一篇