hexo插入音乐

可以到我的博客参考一下样式

两种方式:

  • 单个音乐
  • 歌单

    第一种:

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

    第二种:

    以歌单的形式插入背景音乐,具体操作如下:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    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 %}

    可参考属性
    在这里插入图片描述
    效果
    在这里插入图片描述