自定义主题

第一次使用博客园 选择自己喜欢的主题

纠结于使用CSDN和博客园，后来仔细对比了一下，发现CSDN有点单一，看到别人博客园太好看了，果断选择了博客园。

配置主题

• 申请js权限

点击 设置,在博客皮肤下面有一行字，js权限 。

申请理由：

敬爱的管理员：
您好，我希望用js美化下我的博客页面，麻烦通过一下我的JS权限申请。感谢您的帮助！

一般申请之后不超过半天时间管理员就会同意的。

• 选择博客主题

也在设置那一页，选择SimpleMemory

• 页面定制

放个主题链接：github。在github中选择tag,我下载的v1.3.3。

将src/style/base.min.css 的内容复制到页面定制CSS代码里，勾选禁用模板默认CSS。

• 博客侧边栏公告

<script type="text/javascript">
    window.cnblogsConfig = {
        GhVersions    : 'v1.3.3', // 版本
        blogUser      : "CCL", // 用户名
        blogAvatar    : "https://chen_changlong.gitee.io/images/ayer-side.png", // 用户头像
        blogStartDate : "2021-1-23", // 入园时间，年-月-日。入园时间查看方法：鼠标停留园龄时间上，会显示入园时间
    }
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v1.3.3/src/script/simpleMemory.min.js" defer></script>

• 页首HTML代码

<!-- Loading 底层遮罩 -->
<div id='loading'></div>

• 页脚HTML代码

<!--代码复制-->
<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>
<!--主题-->
<script src="https://blog-static.cnblogs.com/files/gshang/gshang.bilibili.big.2020.02.27.4.js" ></script>
<!--scrollTo-->
<script src="https://cdn.bootcss.com/jquery-scrollTo/2.1.2/jquery.scrollTo.js"></script>
<!--owo表情-->
<script src="https://blog-static.cnblogs.com/files/gshang/gshang.owo.2020.01.05.1.js"></script>
<link rel="stylesheet" href="https://blog-static.cnblogs.com/files/gshang/gshang.OwO.3.css" />
<!-- import Vue.js -->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://blog-static.cnblogs.com/files/gshang/notiflix-2.0.0.min.css">
<!-- 引入组件库 -->
<script src="https://blog-static.cnblogs.com/files/gshang/notiflix-2.0.0.min.js"></script>
<!--点击烟花-->
 <script src="https://blog-static.cnblogs.com/files/axqa/cursor-effects.js">//点击烟花</script>
<!--动态线条-->
 <script type="text/javascript" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js">//动态线条(跟随鼠标)</script>

配置二次娘

配置二次娘的代码放在侧边栏中，链接中有一些可以选择的二次娘，修改`jsonPath`就可以了。

[(引用1) 博客园引入半透明的看板娘_weixin_30906185的博客-CSDN博客](https://blog.csdn.net/weixin_30906185/article/details/94946561)

<script type="text/javascript" charset="utf-8"  src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.min.js"></script>
<script>
    L2Dwidget.init({
        "model": {
            jsonPath: "https://unpkg.com/live2d-widget-model-koharu/assets/koharu.model.json",<!--这里改模型，前面后面都要改-->
            "scale": 1
        },
        "display": {
            "position": "left",<!--设置看板娘的上下左右位置-->
            "width": 150,
            "height": 300,
            "hOffset": 0,
            "vOffset": -20
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.7,<!--设置透明度-->
            "opacityOnHover": 0.2
        }
    });
</script>

配置鼠标图形

链接中有一些图片，可以下载到本地，然后上传ico图片文件到博客园中，上传文件的位置在文件那一栏。

上传的文件url怎么知道：点击已经上传好的文件，博客园会进行跳转，复制搜索栏的url即可。

(引用2) 博客园自定义鼠标样式_Lucas__liu的博客-CSDN博客_自定义鼠标样式

• 页面定制css代码

body {
	cursor: url('https://blog-static.cnblogs.com/files/blogs/745310/cat9.ico?t=1648780766'), auto;
}

• 博客侧边栏公告

<script>
// 鼠标点击特效
var a_idx = 0;
$("body").click(function(e) {
        var a = new Array("❤感谢观看❤","❤","❤喜欢就点个赞呗❤","❤❤","❤快去点赞❤","❤❤❤","❤不是点这里哦❤","❤❤","❤点赞在底部啦❤","❤","❤❤");
        var $i = $("<span></span>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
</script>

大功告成！

(引用3)博客园美化_Cnblogs-Theme-SimpleMemory皮肤设置 - YouLookLook - 博客园