给hexo-next主题加上背景音乐和播放视频

发表于 | 更新于: | 分类于 | 阅读次数: |

Before
网易云音乐的外链播放器会有版权问题导致不能播放等问题

实现

直接参考链接hexo-tag-aplayer#upstream-issue，如何使用项目有详细介绍,项目地址

添加到那个位置

位置根据具体需要添加，如果是想放在侧边栏的话直接cd themes/next/layout/_macro ，vim sidebar.swig,然后查找字符串 links的位置，定位到要修改的地方

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

    {# Blogroll #}
    {% if theme.links %}
      <div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.links_layout | default('inline') }}">
        <div class="links-of-blogroll-title">
          <i class="fa  fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
          {{ theme.links_title }}
        </div>
        <ul class="links-of-blogroll-list">
          {% for name, link in theme.links %}
            <li class="links-of-blogroll-item">
              <a href="{{ link }}" title="{{ name }}" target="_blank">{{ name }}</a>
            </li>
          {% endfor %}
        </ul>
      </div>
    {% endif %}
    {% include '../_custom/sidebar.swig' %}
  </div>
</section>

<!-- add media player here -->	

{% if display_toc and toc(page.content).length > 1 %}

当然这种方式肯定会影响加载速度，影响到用户体验，所以个人喜欢放在博客里面

附上mp3下载

1
pip3 install pymusic-dl

详细信息可以在github上面搜索music-dl

音乐播放效果


        

        

至于视频播放
贴上起了一身鸡皮疙瘩的视频作为演示


安装插件
Github地址,使用方法有示例


下载油管视频
油猴插件里面搜索YouTube，安装，如果想要清晰度更高的会让你下载一个软件


      
    

    
    
    

    

    

    

    
  

  
  
  
  




    

      
    

  



          

          


          

  

   

  
  
  
  
  
     




        

        
          
  
  

    

      
      
      
    

  


  


        
      

    


    

    
      

        
        
          0%