博客园美化的一些心得和走过的坑
申请权限
申请js权限是一切的开始,不用多说了吧。
套用模板
对于前端小白来说,最省时间的美化方法就是套用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
只要按照自己的需求,根据大纲添加就可以了。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?