Hexo + Próximo tema para alcançar a reprodução global de música de fundo

Bem-vindo ao visitar o meu blog , clique na fonte azul para entrar!

A primeira maneira: use o plug-in de música em nuvem NetEase

Características:

• Simples e rápido
• Não é possível reproduzir músicas protegidas por direitos autorais (é fácil invalidar a lista de reprodução)

Podemos adicionar este plug-in à interface do blog ou postagens do blog (basta colar o código do plug-in de nuvem do NetEase).

Como obter músicas do Netease Cloud Plug-in e precauções para músicas com link externo

Aqui nós damos um exemplo para adicionar um plugin de música à barra lateral.

Abra nosso arquivo de tema: themes\next\layout\_macro\sidebar.swigencontre sidebar-inner, cole o código do código do plug-in de nuvem NetEase neste <div>rótulo.

Demo:

<aside class="sidebar">
 <div class="sidebar-inner"> //从下面开始复制，粘贴到这里
  <!--网易云插件-->
  <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 
      src="//music.163.com/outchain/player?type=2&id=463352828&auto=0&height=66"></iframe>

Na pasta do blog abre GitBashexecutada hexo clean, hexo g, hexo s, você pode ver o efeito.

Imagem de efeito:

A segunda maneira: use o plugin Aplayer + MetingJS

Características:

• Pode tocar a maioria das músicas .
• Você também pode adicionar listas de reprodução de outras plataformas de música, como:QQ音乐...

Aqui nós damos um exemplo para adicionar um plugin de música à barra lateral.

Clique no quadro verde para abrir a lista de reprodução

Existem duas maneiras de conseguir

Abra o nosso arquivo de tema: themes\next\layout\_macro\sidebar.swigencontre sidebar-inner, copie e cole o código abaixo neste <div>rótulo.

Maneira simples

Após o teste: Às vezes, esse método falha e é reservado para pesquisa. [Não recomendado] [ MetingJSVersão necessária : @ 2.0.1]

<aside class="sidebar">
    <div class="sidebar-inner">   //从下面开始复制，粘贴到这里
    <!-- require APlayer -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.js"></script>
    <!-- require MetingJS-->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Meting.min.js"></script> 
    <!--网易云-->   
    <meting-js
      server="netease"
      id="4916164702"
	  type="playlist" 
	  mini="false"
      fixed="false"
      list-folded="true"
      autoplay="false"
      volume="0.4"
      theme="#FADFA3"
      order="random"
	  loop="all"
      preload="auto"
      mutex="true">
    </meting-js>

Atributos

• sever: vincule ao servidor, preencha o Netease Cloud
• tipo: tipo, lista de reprodução
• mini: ativar o modo de sucção inferior
• fixo: ativa o modo fixo
• lista dobrada: se a lista de reprodução está dobrada
• reprodução automática: ativar reprodução automática
• volume: Volume
• tema: cor do tema
• ordem: ordem de jogo random: aleatória list: ordem
• loop: reciclagem all, one,none
• preload: preload
• mutex: evite vários plugins tocando ao mesmo tempo
• id: ID da lista de reprodução na nuvem do NetEase, abra nossa lista de reprodução, a última sequência de URLs é.
  Por exemplo:https://music.163.com/#/my/m/music/playlist?id=4916164702
• Para outros atributos, consulte o link no final do artigo: `MetingJS

Adicionar lista de reprodução de música QQ

Substitua-o pelo meting-jsseguinte. autoApós o URL da lista de músicas.

<meting-js
   auto="https://y.qq.com/n/yqq/playlist/1790504159.html#stat=y_new.playlist.pic_click">
</meting-js>

Maneira complexa

Em data-adição atributos e valores de atributo para atingir a mesma funcionalidade

[ MetingJSVersão necessária : @ 1.2]

<aside class="sidebar">
    <div class="sidebar-inner">   //从下面开始复制，粘贴到这里
<!-- require APlayer -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.js"></script>
    <!-- require MetingJS-->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Meting.min.js"></script> 
	<!--网易云-->   
    <div class="aplayer" 
      data-id="4916164702" 
      data-server="netease" 
      data-type="playlist" 
      data-fixed="false" 
      data-autoplay="false" 
      data-list-folded="true"
      data-mutex="true"
      data-order="random" 
      data-loop="all"
      data-volume="0.4" 
      data-theme="#FADFA3" 
      date-preload="auto" > 
    </div>

Para outros atributos, consulte o link no final do artigo:APlayer

Use Pajxpara alcançar fundo global de música tocando

Ou seja, a música pode ser reproduzida continuamente após o salto e a atualização da página

Após o teste, o plug-in de nuvem NetEase na postagem do blog não pode alcançar a reprodução global. (Reservado para pesquisa)

• Abra a themes\next\layoutpasta para encontrar_layout.swig

• <\head>Adicione o seguinte código antes do rótulo e salve-o.

<head>   //粘贴到这里
    
  <!--pjax：防止跳转页面音乐暂停-->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/pjax.js"></script> 
</head> 

• Encontre pajx-o no arquivo de configuração do tema , defina-o truee salve-o.

# Easily enable fast Ajax navigation on your website.
# Dependencies: https://github.com/theme-next/theme-next-pjax
pjax: true

Na pasta do blog abre GitBashexecutada hexo clean,, hexo g, hexo svocê pode ver o efeito quando a página de salto.

---

Artigo de referência (agradecimento)

• Aplay Operation Manual (versão chinesa): https://aplayer.js.org/#/zh-Hans/
• Pjax: https: //github.com/theme-next/theme-next-pjax
• MetingJS: https: //github.com/metowolf/MetingJS
• Sourc0d: https: //blog.csdn.net/yjwan521/article/details/80899992