添加网抑云音乐播放 | Nobilta's Blog
0%

添加网抑云音乐播放

为博客添加一个网抑云播放的小插件。

我使用的方法是网抑云自带的外链,使用起来非常的简单,但是效果也比较单一(也可以播放歌单,但是我觉得效果不是很好)

具体方法如下:

  • 首先选择一首你喜欢的歌
  • 然后选择生成外链(注意这歌必须得是非会员且有版权的,要不生成不了)
  • 在生成的外链中设置你的播放器尺寸,以及是否自动播放
    例如:
    1
    2
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=433681730&auto=1&height=66"></iframe>
    //其中width和height分别为宽度和高度,auto = 1为自动播放,0为非自动播放
  • 然后找到你主题的配置部分,选择你想加入插件的位置,我的是next主题,想要把播放插件加到侧边栏上,所以我就需要下面的文件中填加这些内容:
    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
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    //themes/next/layout/_macro/siderbar.swig
    {% macro render(display_toc) %}
    <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
    </div>

    <aside class="sidebar">
    <div class="sidebar-inner">

    {%- set display_toc = page.toc.enable and display_toc %}
    {%- if display_toc %}
    {%- set toc = toc(page.content, { class: "nav", list_number: page.toc.number, max_depth: page.toc.max_depth }) %}
    {%- set display_toc = toc.length > 1 and display_toc %}
    {%- endif %}

    <ul class="sidebar-nav motion-element">
    <li class="sidebar-nav-toc">
    {{ __('sidebar.toc') }}
    </li>
    <li class="sidebar-nav-overview">
    {{ __('sidebar.overview') }}
    </li>
    </ul>

    <!--noindex-->
    <div class="post-toc-wrap sidebar-panel">
    {%- if display_toc %}
    <div class="post-toc motion-element">{{ toc }}</div>
    {%- endif %}
    </div>
    <!--/noindex-->

    <div class="site-overview-wrap sidebar-panel">
    {{ partial('_partials/sidebar/site-overview.swig', {}, {cache: theme.cache.enable}) }}

    {{- next_inject('sidebar') }}
    </div>

    {%- if theme.back2top.enable and theme.back2top.sidebar %}
    <div class="back-to-top motion-element">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
    </div>
    {%- endif %}
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=280 height=86 src="//music.163.com/outchain/player?type=2&id=433681730&auto=1&height=66"></iframe>//这是你自己的内容
    </div>
    </aside>
    <div id="sidebar-dimmer"></div>
    {% endmacro %}
    enjoy it~
您的支持将鼓励我继续创作!