乐队官网最怕的一件事,是访客点开听不到歌。这套模板在这点上做的很到位:它内嵌了 Amplitude.js 音频播放器,首页的精选单曲区块就是一个能直接播的播放列表,切歌、进度条、封面联动都是现成的,不用再外挂第三方播放器或者把人导去流媒体平台。对独立音乐人来说,把初次试听留在自己的域名里,和把人送走,是两件完全不同的事。
内容结构也是按音乐人的实际需要排的:唱片集与专辑详情、艺人列表与艺人详情、演出日程与单场演出、视频集与单个视频、周边商城与商品详情、新闻与新闻详情——每一类内容都配了列表页加详情页,不存在「点进去发现是个锚点」的情况。另有八套整站风格演示,从暗黑金属到清爽流行都有,选定一套即可整体替换。技术上它只引了 Bootstrap 的栅格部分而非整套框架,主力交给 GSAP、SplitText 与 Lenis 做平滑滚动与文字拆分动效。这套结构同样适用于音乐厂牌、演唱会、演出场馆、音乐节主办、录音棚、DJ 与制作人、舞台剧团……凡是「内容以作品和档期为核心、观众要先听到或看到才会买票」的生意都合用。
核心功能
内置音频播放器,首页精选单曲即可直接试听,切歌与进度条联动封面
唱片集与专辑详情配套,曲目表、发行信息、收听入口各占一栏
巡演日程按城市列出,每场演出可展开为独立的售票落地页
艺人列表与艺人详情分层,乐队成员或厂牌旗下艺人都能单独建档
视频集与单个视频页,MV 与现场录像不必混在图片相册里
周边商城含商品详情页,唱片、T 恤、海报可直接挂单
新闻区承接发行预告与媒体报道,与演出日程互为补充
八套整站风格演示,选定后可整体替换视觉基调
页面与技术规格
23 个 HTML 页面,含 8 套风格演示,实测 133 个文件、6.5 MB
只引入 Bootstrap 的栅格部分,不加载整套框架样式,冗余 CSS 更少
音频播放由
Amplitude.js实现,实测首页有 20 处播放器相关调用平滑滚动走 Lenis,文字拆字动效走 SplitText,配合 GSAP 时间轴
主样式为 8,917 行,含 197 个 CSS 自定义属性,换配色只需改变量层
图标采用 Remix Icon 字体,附带独立排版演示页,便于统一正文样式