博客园样式设置+音乐播放器设置

设置博客园样式参考的是bndong大神的文章和代码,真的是十分给力,原文地址:https://www.cnblogs.com/bndong/p/9132439.html
具体步骤建议直接参考bndong大神的这份攻略,非常详细,我就不再赘述了,只要一步一步按照攻略来就行了:https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v2/#/Docs/GettingStarted/install

另外,我的主页banner图片来源是这个网站:https://wallhaven.cc。里面的壁纸极多,而且支持以图搜图,也可以用图片主题去搜索(当然是用英文)。而且搜索后可以设置分辨率、比例、图片主色调作为搜索条件缩小搜索范围,同时支持热度、收藏数、相关度、日期等等进行排序。

关于播放器设置,一开始我看的也是bndong大神的攻略,但是我没用过APlayer,对于里面的设置不太懂,所以又找了另一份攻略:https://www.cnblogs.com/relaxx/p/blog-mei.html ,其实很简单,只要在页脚HTML代码这一栏里添加下面的代码:

<!-- 为博客底部添加音乐组件 -->
<div id="player"  class="aplayer"></div>
<link href="https://files.cnblogs.com/files/shwee/APlayer.min_v1.10.1.css" rel="stylesheet">
<script src="https://files.cnblogs.com/files/shwee/APlayer.min_v1.10.1.js"></script> 

<script type="text/javascript">
const ap = new APlayer({
    container: document.getElementById('player'),
    fixed: true,
    autoplay: true, //自动播放
    audio: [{
        name: 'xx',
        artist: 'xx',
        url: 'xx',
        cover: 'xx',
        },
	{
 	name: 'xx',
        artist: 'xx',
        url: 'xx',
        cover: 'xx',
	}

	]
});
ap.init();
</script>

然后在代码内对应位置加入歌名、艺术家、音乐外链和封面图片外链后,就能在主页播放音乐了。

posted @   浮生的刹那  阅读(69)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
  1. 1 Night City r e l,Artemis Delta
  2. 2 Gold Steps(人生何处不青山) Neck Deep
  3. 3 Devil Trigger Ali Edwards
  4. 4 Hopeless Case Roam
  5. 5 On My Own Blitz Kids
  6. 6 I Really Want to Stay At Your House Rosa Walton & Hallie Coggins
  7. 7 Major Crimes Health & Window Weather
Night City - r e l,Artemis Delta
00:00 / 00:00
An audio error has occurred, player will skip forward in 2 seconds.
点击右上角即可分享
微信分享提示