Fog主题使用帮助

本文档为帮助文档，用于记录Fog主题常见问题及解决办法，欢迎大家进行填补。

写在开头

Fog主题目前处于功能不再更新的状态，许多当时增加的奇淫技巧已被我删除，留下来了核心的基础功能。大家可根据个人需求进行二次开发修改。

​ – 2024/02/13

特别注明！

在fog-version0.8之后，在主题-基础配置-文章URL路径，必须选择默认！！否则会导致很多功能无法加载。

主题下载

方式一：在github或者gitee页面，下载zip压缩包。

方式二（推荐）：

已安装好git。

1.选择一个文件夹。利用cd命令进入。

2.在命令行输入以下随意一行命令（选择其一即可

1
2
3
4

git clone https://github.com/850552586/gridea-theme-fog.git

#推荐下行命令，速度较快
git clone https://gitee.com/ericam/gridea-theme-fog.git

如此便可下载fog主题，建议使用时将其中子文件夹fog复制到其他文件夹。

日后更新主题时只需要在该文件夹（gridea-theme-fog）下输入命令

1

git pull origin

如何使用该主题？

将gridea-theme-fog下的fog子文件夹复制到gridea源文件的theme文件夹下即可。

初次使用

很多朋友将主题下载后放到文件夹便直接预览了，这时候会出现一片空白的问题。这是因为主题里的很多内容还没有被写入settings中。

解决办法：初次使用，也要先进入主题-自定义配置，然后直接保存一下，再预览即可。

预览正常，同步后页面很乱，样式（css）不加载

强制刷新页面（ctrl+f5）

如果依然出现问题，请打开f12查看报错原因

看板娘预览地址

1

https://blog.csdn.net/weixin_34321753/article/details/93895440

看板娘下载地址

1

https://gitee.com/ericam/live2d-widget-models

不局限于这些模型，如果你可以自己搜寻同样可以替换。

如何更换看板娘

如果你懂得简单代码，可自行进主题coding。

其他方式：

1.下载完后挑选一个自己喜欢的模型，复制assets文件夹替换到fog\assets\media\live2d路径下的assets文件夹

2.同时将该assets文件夹下的两个json文件重命名为

1
2

1.tororo.model.json
2.tororo.pose.json

如何配置valine？

你可以百度搜索 valine评论如何配置。

或者直接自行搜索 leancloud 注册个账号，就明白了。

如何加速自己的站点？

Coding速度远大于Github。

建议背景图图片进行压缩。推荐网址：https://tinypng.com/

文章图片推荐使用外链。（可自行了解图床。

如果你有自己的服务器，可以将博客部署到自己的服务器上。

如果文章热度一直是Loading

目前阅读量统计基于Leancloud或者腾讯云cloudbase。（只需要其一即可） 同时由于valine评论是基于Leancloud，所以只需要在配置里选择valine，同时填写下方id和key即可。 如若在使用valine情况下，文章热度一直是Loading: 进入leancloud项目下，查看 部署-结构化数据 是否有Counter 如果没有，创建一个新的Class，名称为Counter。

如果在使用twikoo情况下，基本不会出现该问题。

网易云、bilibili外链使用帮助

** 网易云：**

1
2

<iframe  class="music" frameborder="no" src="//music.163.com/outchain/player?type=1&id=89680147&auto=0&height=90"></iframe>

直接复制放进文章内就行，通过修改src的值来更换音乐

其中auto=0代表不会自动播放,auto=1代表自动播放。

其他值请不要修改。

** bilibili：**

1
2
3

<div class="tvcontainer">
<iframe class="tv"  src="https://player.bilibili.com/player.html?cid=145147963&aid=84267566&page=1&as_wide=1&high_quality=1&danmaku=0"frameborder="no" scrolling="no"></iframe>
</div>

在b站视频下分享按钮，有个将视频嵌入博客的链接，拿过来替换上述代码块里的iframe标签，最后记得添加class=“tv”，会布局的好看一点~

关于添加QQ联系方式

如果在主题配置中填写QQ以后发现不能使用的,请到QQ推广开通QQ在线状态服务

关于背景图设置问题

由于Fog主题默认所有文章必须显示封面图，如果你想拥有简洁博客，可以在文章封面默认背景图设置一张纯色图片代替即可。

由于Gridea软件自身的bug，当你在主题配置里重复上传本地图片时，可能会出现无法保存的情况（保存后不显示保存成功的提示），此时可以重置下主题，重新配置。当然，还有一种手动替代的方法： 打开你博客位置下-fog主题-assets/media/images文件夹：

这5张图分别代表：全局背景虚化图、移动端背景图、移动端欢迎页图、文章默认封面图、标签图。 你可以直接将你的图片放在该位置，替代原来的图，记得命名一样。

最后，推荐大家背景图使用外链加载方式！

关于字体

如何为博客设置一些新型字体文件呢？你可以在一些字体下载站点下载好.ttf类型的字体文件，然后上传到自己的图床或者oss仓库。 在主题-asserts/styles/main.less文件下：

1
2
3
4
5

@font-face {
   font-family: 'FXAiQingQiXiangSuo';
   src: url('');
}

然后该font-family便是你的字体名（随意设置），之后在主题自定义配置里填写即可。

关于icon

主题内置了一些基础icon，设置方法如下 切勿多打入空格等字符。

关于优雅模式武侠风

当主题勾选了武侠风后，文章列表便会显示两个武侠人物。 其实大家可以替换成任意自己喜欢的角色，方法如下： 打开你博客位置下-fog主题-assets/media/images文件夹，修改以下两张图片即可，记得命名一致，记得图片分辨率一致，记得使用背景透明的图片（可以自己ps制作）

最后，希望大家给予主题一定支持

主题一直持续收集大家的反馈不断更新，希望得到您的一定支持~ 希望可以在github中为fog主题点个star了！感谢大家了。

其他参考

欢迎大家编写fog主题个人使用心得，在下方留言（可以是博文地址，亦可以是小tips~🙂）。