【Gmeek进阶】插件功能的使用

[Meekdai]

为了使得Gmeek的功能更加的丰富，我添加了插件的功能，目前已经有几个插件可以使用。大家可以直接复制文章中的配置代码使用，也可以把对应的插件文件拷贝到自己的static文件夹下使用。

不蒜子

Tip

不蒜子是一个极简网页计数器，很多同学都希望有这个功能，所以这个插件就来了。
目前更推荐使用下面的Vercount插件

1. 全站添加不蒜子，只需要在config.json文件内添加配置

"allHead":"<script src='https://blog.meekdai.com/Gmeek/plugins/GmeekBSZ.js'></script>",

2. 单个文章页添加不蒜子，只需要在文章最后一行添加如下

<!-- ##{"script":"<script src='https://blog.meekdai.com/Gmeek/plugins/GmeekBSZ.js'></script>"}## -->

Vercount

Tip

目前发现了不蒜子官方有一个BUG，就是Safari浏览器统计的pv数据不准确，具体可见文章解决不蒜子 (busuanzi) 文章计数出错问题。所以找了一个可以兼容不蒜子的计数工具 Vercount。不蒜子中的数据都会自动同步过来，非常方便。

1. 全站添加Vercount，只需要在config.json文件内添加配置

"allHead":"<script src='https://blog.meekdai.com/Gmeek/plugins/GmeekVercount.js'></script>",

2. 单个文章页添加不蒜子，只需要在文章最后一行添加如下

<!-- ##{"script":"<script src='https://blog.meekdai.com/Gmeek/plugins/GmeekVercount.js'></script>"}## -->

TOC目录

Tip

效果预览：markdown测试页面
如果某些文章比较长，里面有很多h1、h2、h3、h4等标题，就可以在右边显示TOC目录，方便导航到对应位置。

1. 所有文章页添加TOC目录，只需要在config.json文件内添加配置

"script":"<script src='https://blog.meekdai.com/Gmeek/plugins/GmeekTOC.js'></script>",

2. 单个文章页添加TOC目录，只需要在文章最后一行添加如下

<!-- ##{"script":"<script src='https://blog.meekdai.com/Gmeek/plugins/GmeekTOC.js'></script>"}## -->

articletoc

Tip

效果预览：Markdown语法总览 在右下角有个圆形按钮。
本插件由Tiengming编写，也是一个非常不错的TOC目录插件。配置方式和上面一样，只需要替换地址为如下地址即可。

https://blog.meekdai.com/Gmeek/plugins/articletoc.js

灯箱插件

Tip

效果预览：养鱼？我应该不行 点击图片就会出现灯箱效果。
本插件由Tiengming编写，可以放大浏览文章中的图片，适合一些图片较多的文章。

1. 所有文章页添加lightbox，只需要在config.json文件内添加配置

"script":"<script src='https://blog.meekdai.com/Gmeek/plugins/lightbox.js'></script>",

2. 单个文章页添加lightbox，只需要在文章最后一行添加如下

<!-- ##{"script":"<script src='https://blog.meekdai.com/Gmeek/plugins/lightbox.js'></script>"}## -->

多插件使用

同时在所有文章页使用TOC目录和灯箱插件，需要这样添加配置文件：

"script":"<script src='https://blog.meekdai.com/Gmeek/plugins/GmeekTOC.js'></script><script src='https://blog.meekdai.com/Gmeek/plugins/lightbox.js'></script>",

同时在一篇文章页使用TOC目录和灯箱插件，需要这样添加配置文件：

<!-- ##{"script":"<script src='https://blog.meekdai.com/Gmeek/plugins/GmeekTOC.js'></script><script src='https://blog.meekdai.com/Gmeek/plugins/lightbox.js'></script>"}## -->

Caution

需要特别注意区分script head allHead 等这些键的用途，详细请参考 Gmeek快速上手

其他

有了插件就可以在基础版的Gmeek框架上玩出很多很多定制化的功能，简单的UI修改也可以通过插件实现，只需要学习一点点前端知识，另外非常欢迎大家一起完善Gmeek，开发出更多的插件。

[liyifanniubi]

dalao牛逼，但是为什么刚开始统计就九百多万次访问了

[Meekdai]

dalao牛逼，但是为什么刚开始统计就九百多万次访问了

啊？不至于吧？贴一下链接？

[liyifanniubi]

dalao牛逼，但是为什么刚开始统计就九百多万次访问了

啊？不至于吧？贴一下链接？

https://blog.liyifan.xyz/

[Meekdai]

不是很正常啊？哪里有九百多万次？

[liyifanniubi]

我的我的，清了下缓存就正常了

[Meekdai]

另外，你这首页改的不错啊，https://blog.liyifan.xyz/assets/yifantheme_index.js 应该就是这个文件吧，你可以稍微优化一下，弄一个主题插件，这样有用户也想使用你的主题就可以一行代码配置这个插件了。

[liyifanniubi]

另外，你这首页改的不错啊，https://blog.liyifan.xyz/assets/yifantheme_index.js 应该就是这个文件吧，你可以稍微优化一下，弄一个主题插件，这样有用户也想使用你的主题就可以一行代码配置这个插件了。

谢谢，是这个文件，我回头多研究研究

[Peter267]

问一下，"allHead":"<script src='https://blog.meekdai.com/assets/GmeekBSZ.js'></script>",这段代码中的https://blog.meekdai.com/assets/GmeekBSZ.js 怎么改为自己的啊，我不知道我的是什么

[Peter267]

我还想问问，怎么给网站添加像百度统计，51.LA这样的统计工具？

[Meekdai]

@Peter267

1. 如无特殊需求，你直接使用 https://blog.meekdai.com/assets/GmeekBSZ.js 即可
2. 这种使用自定义script功能就可以实现。

[Peter267]

@Meekdai
感谢

[Sigechaishijie]

装不上插件，大佬看看怎么办？

[Sigechaishijie]

问一下，"allHead":"<script src='https://blog.meekdai.com/assets/GmeekBSZ.js'></script>",这段代码中的https://blog.meekdai.com/assets/GmeekBSZ.js 怎么改为自己的啊，我不知道我的是什么

建议你去看一下这个

[Peter267]

问一下，我ArticleToc这个插件为什么添加后没有出现
仓库地址：https://github.com/Peter267/peter267.github.io

[Meekdai]

https://blog.meekdai.com/post/Gmeek-kuai-su-shang-shou.html#5.-%E5%A4%9A%E7%A7%8D%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8F%82%E6%95%B0

多个插件一起使用方式看来要再添加一下，不是你这样加的啊。

[szm999]

把你提供的代码复制到config.json文件中，然后全局生成失败。

[Meekdai]

@szm999

{
"title":"醉舞",
"subTitle":"这世界上三角形的人都有，何必奇怪呢",
"avatarUrl":"https://github.com/szm999/szm999.github.io/raw/main/%E8%80%81%E9%82%B5.png",
"GMEEK_VERSION":"last"
"allHead":"<script src='https://blog.meekdai.com/Gmeek/plugins/GmeekBSZ.js'></script>",
}

你是这么加的吧？去了解一下json格式吧。

[szm999]

@Meekdai 好的

[Peter267]

@szm999
json格式每行代码开头空四格，每行结束后有个英文逗号（最后一行除外），开头结尾不空格添加 { 和 } 。

[szm999]

@Peter267 万分感谢！

[photohost]

你好 發現https://blog.meekdai.com/Gmeek/plugins/GmeekVercount.js'
想使用Vercount進行統計，發現查無此代碼

[Sigechaishijie]

没有出现网页计数怎么办？

[Meekdai]

@photohost @Sigechaishijie 已经添加GmeekVercount.js，目前可以正常使用了。之前因为一点小BUG忘记上传了，目前Vercount的作者已经修复，见EvanNotFound/vercount#9

[quan-ge]

感谢大佬，
就是有没有办法，评论区不用点，自动展开

[Meekdai]

@quan-ge 通过自定义script功能可以实现，config.json添加代码如下。

"script":"<script>document.getElementById('cmButton').click();</script>",

[szm999]

为什么我代码刚弄好，然后有那个目录插件，但是几天之后就没了呢？

[Meekdai]

@szm999 哪个页面呢？

[szm999]

@Meekdai 我贴的是你给的那个所有页面的代码。刚贴好的时候是有的，过几天就没了。现在登进去浏览就没有。

[Meekdai]

@szm999 老哥，我看了你的博客，里面就没有找到有子标题的文章，让你贴一个你之前有目录，现在没有了的页面链接啊。

[quan-ge]

求一个一键回到顶部的按钮，的插件

[Meekdai]

@quan-ge TOC目录的那个插件就带了Top功能的。

也可以看看下面这个老哥写的一个独立的按钮。
https://github.com/tiengming/tiengming.github.io/blob/main/static/assets/backtop.js

[EchoZap]

我改了一下上面的articletoc插件，将‘回到顶部’按钮集成到里面了，各位可以在该地址找到:
https://cdn.jsdelivr.net/gh/EchoZap/echozap.github.io/static/plugins/ArticleTOC.js

[maxchiron]

另外，你这首页改的不错啊，https://blog.liyifan.xyz/assets/yifantheme_index.js 应该就是这个文件吧，你可以稍微优化一下，弄一个主题插件，这样有用户也想使用你的主题就可以一行代码配置这个插件了。

谢谢，是这个文件，我回头多研究研究

大佬首页真好看，可以请教下live2d是如何制作的吗？谢谢~

[yinxiuqu]

首先感谢你，昨天的问题都解决了。另外：
"allHead":"<script src='https://blog.meekdai.com/Gmeek/plugins/GmeekBSZ.js'></script>",
"allHead":"<script src='https://blog.meekdai.com/Gmeek/plugins/GmeekVercount.js'></script>",
这两条能否这样写在config.json里面？还是需要合并？

[Meekdai]

@yinxiuqu 合并成一条才可以，但是不蒜子和Vercount不可以一起使用，这两个是同一个功能的。
看 https://blog.meekdai.com/post/%E3%80%90Gmeek-jin-jie-%E3%80%91-cha-jian-gong-neng-de-shi-yong.html#%E5%A4%9A%E6%8F%92%E4%BB%B6%E4%BD%BF%E7%94%A8

[dishao123]

如何在body标签下添加内容？我想引用instant.page

[DiYingisaDer]

大佬，啥时候收入 liyifanniubi 的页面主题和live2d插件啊

[Andy1314Chen]

非常轻量级的博客框架，感谢作者~

发现还可以在 subTitle 中利用 script 增加换行，拓展性很强

"subTitle":"<script>document.getElementById('content').innerHTML = `<br>雁过留痕, 人生一世, 还是应该记录点什么<br><br>一个又菜又爱玩, 喜欢瞎折腾的程序员👨🏻‍💻<br><br>`;</script>",

[DiYingisaDer]

@Andy1314Chen 厉害，如果可以居中就更厉害了

[Andy1314Chen]

@Andy1314Chen 厉害，如果可以居中就更厉害了

我也不懂前端，问了 deepseek，下面 script 似乎能做到，你可以试试。

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const contentDiv = document.getElementById('content');
        contentDiv.innerHTML = `
        <br>雁过留痕, 人生一世, 还是应该记录点什么<br><br>
        一个又菜又爱玩, 喜欢瞎折腾的程序员👨🏻‍💻<br><br>
        `;
        contentDiv.style.textAlign = 'center';
        contentDiv.style.marginBottom = '16px';
    });
    </script>

[chyinan]

大佬您好，小白想请教一下，怎么给博客添加自定义背景图片？我翻了好久文档似乎没有看到类似的教程wwww

[Meekdai]

@chyinan 需要自定义css来实现

[nesesss]

大佬，为什么我直接套你的博客模版，博客域名是这样的https://nesesss.github.io/welmalls.github.io/？

[Meekdai]

@nesesss 你的用户名是nesesss，所以你要取的仓库名是nesesss.github.io。而不是welmalls.github.io

[InternetExplorer14]

大佬，为什么我直接套你的博客模版，博客域名是这样的https://nesesss.github.io/welmalls.github.io/？

仓库名可以是welmalls，生成的是nesesss.github.io/welmalls