526互联

博客园美化的一些心得和走过的坑

发布时间 2023-08-27 13:44:41作者: luxiayuai

套用模板

对于前端小白来说，最省时间的美化方法就是套用BNDong大神的模板

github链接：https://github.com/BNDong/Cnblogs-Theme-SimpleMemory

教程官网：https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v2.1/dist/

只要跟着快速入门一步步来就行了

这里注意有三个坑：

1.一定要注意 插件文件引入地址中的 {VERSION}要匹配引用的css文件版本。

<script type="text/javascript">
    window.cnblogsConfig = {
      info: {
        name: 'userName', // 您的用户名
        startDate: '2021-01-01', // 您的入园时间，年-月-日。入园时间查看方法：鼠标停留园龄时间上，会显示入园时间
        avatar: 'http://xxxx.png', // 您的头像 URL 地址
      },
    }
</script>
<!-- 插件文件引入 -->
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@{VERSION}/dist/simpleMemory.js" defer></script>

2.一定不要忘记勾选禁用模板默认CSS！！

否则文字无法在页面中居中，如下图所示：

 3.看板娘

大多数网站给出的看板娘的代码是不靠谱的，而且有一部分由于版本较老，只加载了看板娘但整个页面变成白板。

建议直接跟着官方教程来，非常省事。

这里给出几个看板娘的jsonpath：网址

自定义配置

除此之外，如果想自定义配置，千万不要在网上找例程，因为网上大多数都是版本不匹配（目前最新版已经更新到v2.1.3了，但是网上大多还是v1版本的）

 只要在教程官网上找！！！有点不好找，我当时没找到在网上瞎找浪费了很多时间！！

打开教程官网->快速入门->参考->配置项

这里给出网址：https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v2.1/dist/reference/configs.html

只要按照自己的需求，根据大纲添加就可以了。