上周在逛 Bilibili 的时候，偶然刷到了这个项目，UI 尚可，便尝试一下。 官网：https://nmp.hypcvgm.top
Git Bash 或 WSL（文章使用 Termux 的 Proot-distro Archlinux 环境），应有：
nodejs + pnpm 或 npmNeovim）TIP
NMP 仅支持网易云歌曲，若有需求可以寻找其它播放器
若想要播放 VIP 歌曲，请在 NMP文档 自行配置 api
TIP本文只介绍
浮动模式， 这是最常用的模式，会出现在博客四角处，可以缩小/放大
下载链接： Github
下载后解压，拿出 netease-mini-player-v2.css 和 netease-mini-player-v2.js，放到博客根目录下的该位置：
public/NMP/新建文件 NMP.astro：
---
---
<!-- NeteaseMiniPlayer -->
<div
class="netease-mini-player"
data-playlist-id="${yourOwnPlaylistId}"
data-embed="false"
data-position="bottom-left"
data-lyric="true"
data-theme="auto">
</div>
<link
rel="stylesheet"
href="/NMP/netease-mini-player-v2.css" />
<script is:inline
src="/NMP/netease-mini-player-v2.js">
</script>
请将 ${yourOwnPlaylistId} 替换为自己的 歌单id
NOTE如果使用 CDN，请对文件后半部分进行替换：
<link
rel="stylesheet"
href="/NMP/netease-mini-player-v2.css" />
<script is:inline
src="/NMP/netease-mini-player-v2.js">
</script>
<link
rel="stylesheet"
href="https://api.hypcvgm.top/NeteaseMiniPlayer/netease-mini-player-v2.css" />
<script is:inline
src="https://api.hypcvgm.top/NeteaseMiniPlayer/netease-mini-player-v2.js">
</script>
更改文件 Layout.astro:
---
import NMP from "@components/NMP.astro";
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";
import ConfigCarrier from "@components/ConfigCarrier.astro";
import { profileConfig, siteConfig } from "@/config";---
import NMP from "@components/NMP.astro";
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";
import ConfigCarrier from "@components/ConfigCarrier.astro";
import { profileConfig, siteConfig } from "@/config";
...
if (window.swup) {
setup()
} else {
document.addEventListener("swup:enable", setup)
}
</script>
<NMP />
已经成功配置！
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。