《Jekyll 给博客加个随机BGM》个性化您的博客体验

2023-11-19 07:22:22

博客是您在线分享思想、知识和经验的平台。但有时，一篇冗长的博文可能会让人觉得单调乏味。这时，背景音乐就可以发挥作用了。音乐可以帮助您营造氛围，吸引读者的注意力，让他们更愿意阅读您的文章。

如果您正在寻找一种方法来个性化您的博客并使其脱颖而出，那么Jekyll博客随机背景音乐功能将是您的不二选择。

什么是Jekyll博客随机背景音乐？

Jekyll博客随机背景音乐功能允许您将随机音乐播放器添加到您的博客中。这个播放器可以播放您选择的歌曲或播放列表，并可以根据您的喜好设置播放顺序。

Jekyll博客随机背景音乐如何运作？

要使用Jekyll博客随机背景音乐功能，您需要做的就是将以下代码添加到您的博客模板中：

{% include music-player.html %}

然后，您需要创建一个名为“music-player.html”的文件，并将以下代码添加到其中：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.6.8/plyr.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.6.8/plyr.min.css">

<div id="player"></div>

<script>
$(document).ready(function() {
  var player = new Plyr('#player', {
    controls: [
      'rewind',
      'play',
      'forward',
      'mute',
      'volume'
    ]
  });

  var songs = [
    {
      title: 'Song 1',
      artist: 'Artist 1',
      src: 'https://example.com/song1.mp3'
    },
    {
      title: 'Song 2',
      artist: 'Artist 2',
      src: 'https://example.com/song2.mp3'
    },
    {
      title: 'Song 3',
      artist: 'Artist 3',
      src: 'https://example.com/song3.mp3'
    }
  ];

  player.add(songs);
});
</script>