ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

博客园美化_Cnblogs-Theme-SimpleMemory皮肤设置

2021-05-13 12:01:25  阅读:327  来源: 互联网

标签:入园 Cnblogs 代码 Theme https model SimpleMemory 博客园 CSS


效果图

配置

博客皮肤

SimpleMemory

页面定制CSS代码

去 https://github.com/BNDong/Cnblogs-Theme-SimpleMemory/tree/v1.3.3 下载
把 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>

添加点击特效

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

标签:入园,Cnblogs,代码,Theme,https,model,SimpleMemory,博客园,CSS
来源: https://www.cnblogs.com/CCL776/p/14763958.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有