hexo插入背景音乐

9/26/2020 hexo插入背景音乐

# hexo插入音乐

可以到我的博客参考一下样式 (opens new window)

两种方式:

  • 单个音乐
  • 歌单

# 第一种:

这种方式比较简单,直接到网易云搜索需要添加的背景音乐然后生成外链,将外链粘贴到sidebar.swig里边,可以切换粘贴位置以达到自己需要的效果。 这里随便找了首歌的外链粘了进去

vim /blog/themes/next/layout/_macro/sidebar.swig

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=3&id=2069329741&auto=1&height=66"></iframe>

# 第二种:

以歌单的形式插入背景音乐,具体操作如下:

vim /blog/themes/next/layout/_macro/sidebar.swig

<!-- require APlayer -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
    <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
    <!-- require MetingJS-->
    <script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
    <!--网易云-->
    <meting-js
      server="netease"
      id="3129764102"
          type="playlist"
          mini="false"
      fixed="false"
      list-folded="true"
      autoplay="true"
      volume="0.4"
      theme="#FADFA3"
      order="random"
          loop="all"
      preload="auto"
      mutex="true">
    </meting-js>
    </div>
  </aside>
  <div id="sidebar-dimmer"></div>
{% endmacro %}

可参考属性 (opens new window) 在这里插入图片描述 效果 (opens new window) 在这里插入图片描述