posts - 126,comments - 1,trackbacks - 0

 

 

1、添加音乐播放器(例如 网易云音乐)

【html5 音乐播放器】

源码

GitHub - MoePlayer/APlayer: Wow, such a beautiful HTML5 music player

中文使用指南

https://aplayer.js.org/#/zh-Hans/?id=cdn

cdn链接

https://cdnjs.com/libraries/aplayer

(1)添加html代码 (事先需要申请并通过 博客园的JS 权限 )

【博客园后台管理】——【设置】——【页脚Html代码】——粘贴以下代码(下面的播放器 是 迷你版的,更多样式 可以参考 播放器源码文件)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
<script src="https://blog-static.cnblogs.com/files/yjlaugus/APlayer.min.js"></script>
<div id="aplayer" class="aplayer"  data-id="3220493480" data-server="netease" data-type="playlist" data-fixed="true" data-listfolded="true" data-order="random" data-theme="#F58EA8"></div>
<script src="https://unpkg.com/meting@1.2/dist/Meting.min.js"></script>

 

(2)获取歌单链接,修改上面代码的  data-id="3220493480" 

如何获取歌单 id 呢?

(现在网页版和PC版的网易云音乐 歌单界面 没有生成“外链播放器‘的功能了。。)

使用 移动端(手机)分享一个歌单,分享方式选为”复制链接“;

例如 我用手机 网易云APP 分享自己的一个歌单:

分享锦蝶生创建的歌单「老树花开锦蝶生」: http://music.163.com/playlist/3220493480/438654155/?userid=438654155 (来自@网易云音乐)

歌单 id 就是 playlist 后面的 3220493480,修改代码 data-id="3220493480"。保存后,重新进入博客园个人主页就可以听心爱的歌啦~

(3)最后效果

 

2、添加“返回顶部”图标

(1)准备一个你喜欢的图片(可以自行P图,把图片里的主角 抠出来~),在自己的博客园管理后台——【相册】/【文件】,上传图片(注意格式 ——【相册】是支持多种图片格式;【文件】支持 gif 格式,就算不是 动图,也可以改为 gif格式,再上传~)

上传成功后,找到相应的图片,鼠标右击,复制链接地址:

https://files.cnblogs.com/files/bigorangecc/longmao.gif

 

 

(2)添加代码

【博客后台管理】——【设置】——【页首Html代码】,将以下代码复制粘贴进去。(注意修改 图片的路径,在代码最后面的<p>标签里,替换 src 以及 alt 属性值)。保存后,重新打开博客的某篇文章,就可以看到添加的小图标啦~

<style>
  #back-top {
       position: fixed;
       bottom: 10px;
       right: 5px;
       z-index: 99;
  }
  
  #back-top a{outline:none}
  </style>
  <script type="text/javascript">
  $(function() {
      // hide #back-top first
      $("#back-top").hide();
      // fade in #back-top
      $(window).scroll(function() {
          if ($(this).scrollTop() > 500) {
              $('#back-top').fadeIn();
          } else {
              $('#back-top').fadeOut();
          }
      });
      // scroll body to 0px on click
      $('#back-top a').click(function() {
          $('body,html').animate({
              scrollTop: 0
          }, 800);
          return false;
      });
  });
  </script>
  <p id="back-top" style="display:none">
   <a href="#top"><img style="width:100px;"
src="https://files.cnblogs.com/files/bigorangecc/longmao.gif" alt="龙猫" /></a>
 </p> # 这里修改 图片的链接地址和属性噢~

(3)效果展示——超Q的龙猫

 

 

 

 【未完待续】

 

 

 

 

【参考阅读】

https://www.cnblogs.com/guanxiying/category/1652463.html

https://www.zhihu.com/question/37316681

 

posted on 2020-05-21 22:17  bigorangecc  阅读(...)  评论(...编辑  收藏