首页 > 其他分享> 文章详细

博客园美化皮肤

2021-08-15 20:02:25 阅读：398 来源： 互联网

标签：cnblogs 博客园皮肤 base https SimpleMemory com 代码美化

主模版

模版教程地址

https://www.dbnuo.com/Cnblogs-Theme-SimpleMemory/docs/v2/#/

默认大家都已申请JS权限了

主要步骤

选择版本

现已更新到v2阶段，但比较喜欢v1，其中保留了我最喜欢的功能的最新版本是v1.2.9

获取需要使用的版本

GitHub仓库：https://github.com/BNDong/Cnblogs-Theme-SimpleMemory

具体步骤看模版教程地址的获取需要使用的版本

获取需要使用的代码

CSS代码位置：/src/style/base.min.css 拷贝此文件代码至页面定制CSS代码文本框处

博客设置请使用压缩版本，直接使用 /src/style/base.css 会字符超限！用base.min.css不要用base.css

修改版本（仅针对于v1）

页面定制CSS代码

/src/style/base.min.css 拷贝此文件代码至页面定制CSS代码文本框处

博客侧边栏公告

将两个涉及类似'v1.2.9'的改成最新版本即可（不懂去看具体教程）

页脚HTML代码

音乐

<!--音乐，只在PC端宽度>1000px时显示-->
<link rel="stylesheet" href="https://blog-static.cnblogs.com/files/miluluyo/APlayer.min.css">
<div id="player" class="aplayer aplayer-withlist aplayer-fixed" data-id="720102620" data-server="netease" data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-theme="#2D8CF0"></div>
<script src="https://blog-static.cnblogs.com/files/miluluyo/APlayer.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/miluluyo/Meting.min.js"></script>

页脚代码里有个音乐区域，有个data-id，你把这个id换成你网易云歌单的id，id获取参考这个链接： https://jingyan.baidu.com/article/ce09321bb8f0db2bff858f8b.html

音乐自动播放

<script> 
let ref = setInterval(function(){
    isaplay();
},2000);
function isaplay(){
    if($(".aplayer-play").length == 1){
        $(".aplayer-play").click()
        clearInterval(ref);
    }
}
</script>

背景动画


<!-- 背景动画 -->
    <canvas id="c_n9" width="1920" height="990"
        style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;"></canvas>
    <script src="https://blog-static.cnblogs.com/files/cyuanwu/canvas-nest.min.js"></script>

<script type="text/javascript" language="javascript">
　　//Setting ico for cnblogs
　　var linkObject = document.createElement('link');
　　linkObject.rel = "shortcut icon";
　　linkObject.href = "https://gitee.com/dbnuo/Cnblogs-Theme-SimpleMemory/raw/master/img/blog_logo.gif";
　　document.getElementsByTagName("head")[0].appendChild(linkObject);
</script>

壁纸

网址

https://wallhaven.cc/

参考

【1】可爱的博客园样式美化、自定义博客园主题样式：https://www.cnblogs.com/miluluyo/p/cute-cnblogs.html
【2】cute-cnblogs 自定义博客园样式美化二期来啦~：https://www.cnblogs.com/miluluyo/p/cute-cnblogs2.html
【3】SimpleMemory模板：https://www.dbnuo.com/Cnblogs-Theme-SimpleMemory/docs/v2/#/

标签：cnblogs,博客园,皮肤,base,https,SimpleMemory,com,代码,美化
来源： https://www.cnblogs.com/HLBBLOG/p/15144583.html

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

ICode9