博客園美化_Cnblogs-Theme-SimpleMemory皮膚設置

效果展示

這是別人基於博皮“SimpleMemory”進行的修改

GitHub

頁面效果

配置

博客皮膚

SimpleMemory

頁面定制CSS代碼

去 https://github.com/BNDong/Cnblogs-Theme-SimpleMemory/tree/v1.3.3 下載zip 把 src/style/base.min.css 的內容復制到CSS代碼里

勾選禁用模板默認CSS

博客側邊欄公告（需要開啟JS代碼支持）

<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 type="text/javascript" charset="utf-8"  src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.min.js"></script>
<script>
    L2Dwidget.init({
        "model": {
         //  模板文章  https://blog.csdn.net/weixin_30906185/article/details/94946561
            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>

如何改模型，看這里別人總結的：https://blog.csdn.net/weixin_30906185/article/details/94946561

添加點擊特效

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

再次美化

這些還不夠？

有2個網站自己去找：

https://www.jq22.com/

http://www.htmleaf.com/