博客园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.看板娘

1. 在css中添加

/* 看板娘 */
#live2dcanvas {
    border: 0 !important;
}

2. 在侧边栏中添加

<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
-->

3. 最后在页面首页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>

这样就有了蓝板娘和悬挂猫了

最后，这些都可以自己设置，本质还是html和js