博客园美化（6）博客底部音乐组件

博客底部音乐组件

样式效果

博客页面底部音乐组件

使用方法

1.在自己的博客园中找到管理->设置页面
2.在页脚 HTML 代码中插入

为博客底部添加音乐组件

  <!--音乐-->
   <canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>&lt;script src="https://files.cnblogs.com/files/blogs/409706/BLOG_mouse-click.js"&gt;&lt;/script&gt;
<!-- 为博客底部添加音乐组件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
&lt;script src="https://files.cnblogs.com/files/blogs/409706/BLOG_APlayer.min.js"&gt;&lt;/script&gt;
<div id="aplayer" class="aplayer"  data-id="6828041575" data-server="netease" data-type="playlist" data-fixed="true" data-listfolded="true" data-order="random" data-theme="#F58EA8"></div>
&lt;script src="https://files.cnblogs.com/files/blogs/409706/BLOG_Meting.min.js"&gt;&lt;/script&gt;

或者

为博客底部添加音乐组件

<!-- 为博客底部添加音乐组件 -->
<!-- require APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
&lt;script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"&gt;&lt;/script&gt;
<!-- require MetingJS -->
&lt;script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"&gt;&lt;/script&gt;
<meting-js
        id="594243151"
        lrc-type="0"
        server="netease"
        order="random"
        type="playlist"
        fixed="true"
        list-olded="true">
</meting-js>

------------------ >参考链接 >[simplememory美化，博客园模板，有音乐模块，有看板娘，页底有小🐟 ](https://www.cnblogs.com/ousw/p/14942333.html)