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

学习笔记 774 字 118 阅

本站(2019年11月—2020年3月)基于Typecho驱动,并采用了熊猫小AVOID主题。
在关于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根目录(作者字体:方正粗金陵繁体)
/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>
//上面的标题及标签填入相应的输入框即可!
- THE END -
0 分享
评论 ( 0 )
OωO
    • 二十四小令 - 啊啦啦 / 温润 / 白青 / 钰潇Jannifer / 蔓笙YUM / 小白鸽 / 雨霖仙
    • 空も飞べるはず - 栗コーダーカルテット
    • ひとつのハートで - 诺莺Nox