博客园SimpleMemory主题美化
SimpleMemory主题美化
先看下效果
一、开通博客园JS权限
注册账号后，进入管理>设置>勾选下面的JS权限，然后填写一下开通的理由等待管理员进行审核通过。
我这已经开通了，如下：
二、选择模板
在模板中选择初始的博客皮肤：（本博客搭建的主题，就需要使用SimpleMemory）
三、下载SimpleMemory主题资源
主题资源地址:https://github.com/BNDong/Cnblogs-Theme-SimpleMemory
四、开始美化
1. 把下载完的资源中dist文件夹中的simpleMemory.css中的内容复制到页面定制CSS代码
2. 设置主题侧边栏 ---此处展示自用的侧边栏样式
把下载完的Cnblogs-Theme-SimpleMemory中的src>博客侧边栏.html中的内容复制到博客侧边栏公告中
3. 不要勾选代码高亮中的行号
4. 点击保存
5. 最后在选项中勾选公告
到这里基本美化就完成了 ~~~///(^v^)\\\~~~
接下来就加上一个悬挂物件和看板娘
下面参考了ProsperousEnding这位博主的美化博客的文章
原文连接：
https://www.cnblogs.com/ProsperousEnding/articles/16595150.html
6.悬挂猫-在首页html添加
<!-- 悬挂的喵 -->
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/fsh001/szgotop.js"></script>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/fsh001/szgotop.css" />
<div class="back-to-top cd-top faa-float animated cd-is-visible" style="top: -999px;"></div>
7.看板娘
- 在css中添加
/* 看板娘 */
#live2dcanvas {
border: 0 !important;
}
- 在侧边栏中添加
<script type="text/javascript">
L2Dwidget.init(
{
"model": {
//模型为初音
jsonPath: "https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json",
"scale": 1
},
"display": {
"superSample": 2,
"width": 250,
"height": 400,
"position": "right",
"hOffset": 110,
"vOffset": -30
},
"mobile": {
"show": true,
},
"react": {
"opacityDefault": 1,//不透明度，可调
"opacityOnHover": 0.2
}
});
</script>
<!--
其他可选的模型：
初音未来：https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json
黑猫：https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json
萌娘：https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json
白猫：https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json
狗狗：https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json
小可爱：https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json
小可爱：https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json
-->
- 最后在页面首页html添加
<!-- 看板娘模型 -->
<script type="text/javascript" charset="utf-8" src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.min.js"></script>
这样就有了蓝板娘和悬挂猫了
