Ksable' 小屋

首页留言板
友链关于

# Posts: Hexo Volantis主题音乐播放器Aplayer适应暗黑模式并能跟随变化

发表于 2024-07-17 13:41
更新于 2024-07-17 13:41
271 字
2 min read

kissablecho

kissablecho 的个人博客 / 记录生活，分享技术 / 喜欢二次元和白丝。

128 文章

4 分类

7 标签
首页
留言板
分类
标签
归档
友链
关于
一些实用的网站
astro-koharu 使用指南
歌单
Posts: N 只小猪 by 网友 Posts: 用 Python 设置 Windows 文件默认打开程序 Posts: 开发了个“笔记管理平台”Posts: H 漫画网站爬虫实战 Posts: Python爬虫 通用的小说下载器 Posts: 一个爬取菜鸟教程网站教程，并保存为本地 MarkDown 文件（Python）Posts: Hexo 主题开发笔记 Posts: 将 Umami Cloud 数据导出迁入到自搭建的 Umami Posts: 使用 Decap CMS 作为 Hexo 后端以实现在线编辑（保姆级教程）Posts: ArtPlayer 播放器的简单使用 Posts: 好看的二次元图片分享 Posts: 转载，为什么我们总是在等别人主动？Posts: Hexo Volantis主题副标题以打字效果输出 Hitokoto Posts: 打字机效果的 Hitokoto（html+css+js）Posts: 网易云音乐歌单批量下载歌曲（python）Posts: Hexo Volantis主题音乐播放器Aplayer适应暗黑模式并能跟随变化 Posts: 本站的壁纸
注意！！！ 如果你在 开启了 那么你完全可以关掉这个页面了 该文章仅适用于 **** 昨晚被自己网站的 aplayer 闪瞎了眼 一气之下整出了这个 主要是对 aplayer 的 css 进行修改 在网站的任何地方加入下列 javascript

> 注意！！！

如果你在 `_config.volantis.yml` 开启了 `aplayer`

那么你完全可以关掉这个页面了

该文章仅适用于 `单独页面`

    plugins:
      aplayer:
        enable: true

## 前言

昨晚被自己网站的 aplayer 闪瞎了眼

一气之下整出了这个

## 开始

主要是对 aplayer 的 css 进行修改

在网站的任何地方加入下列 javascript

    function aplayerdark(){
        // 检查 volantis 的暗黑模式设置
        if (volantis.dark.mode === "dark") {
            loadAPlayerCSS('https://assets.buasis.eu.org/css/APlayer.dark.min.css');
        } else if (volantis.dark.mode === "light") {
            loadAPlayerCSS('https://assets.buasis.eu.org/css/APlayer.light.min.css');
        } else {
            loadAPlayerCSS('https://assets.buasis.eu.org/css/APlayer.dark.min.css');
        }
    }
    // 动态加载 APlayer 主题 CSS 文件的函数
    function loadAPlayerCSS(url) {
        // 创建一个link元素
        var link = document.createElement('link');

        // 设置link元素的属性
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = url;

        // 将link元素添加到head元素中
        document.getElementsByTagName('body')[0].appendChild(link);
    }
    // 执行
    aplayerdark()
    // 网页加载完成后又执行
    window.onload = function() {
        aplayerdark()
    }

    // 注册回调函数到暗黑模式触发器
    volantis.dark.push(aplayerdark, "aplayerDarkModeCallback");

其中 APlayer.dark.min.css 为暗黑模式 APlayer.light.min.css 为白天模式

## 参考资料

1. Hexo 博客音乐播放器 Aplayer 深色模式 css 文件(https://blog.zhheo.com/p/46d7a5f0.html)
2. volantis 开发文档(https://volantis.js.org/v5/development-api/)

喜欢的话，留下你的评论吧～

中文
中文 English 日本語

kissablecho

kissablecho 的个人博客 / 记录生活，分享技术 / 喜欢二次元和白丝。

128 文章

4 分类

7 标签
首页
留言板
分类
标签
归档
友链
关于
一些实用的网站
astro-koharu 使用指南
歌单
Posts: N 只小猪 by 网友 Posts: 用 Python 设置 Windows 文件默认打开程序 Posts: 开发了个“笔记管理平台”Posts: H 漫画网站爬虫实战 Posts: Python爬虫 通用的小说下载器 Posts: 一个爬取菜鸟教程网站教程，并保存为本地 MarkDown 文件（Python）Posts: Hexo 主题开发笔记 Posts: 将 Umami Cloud 数据导出迁入到自搭建的 Umami Posts: 使用 Decap CMS 作为 Hexo 后端以实现在线编辑（保姆级教程）Posts: ArtPlayer 播放器的简单使用 Posts: 好看的二次元图片分享 Posts: 转载，为什么我们总是在等别人主动？Posts: Hexo Volantis主题副标题以打字效果输出 Hitokoto Posts: 打字机效果的 Hitokoto（html+css+js）Posts: 网易云音乐歌单批量下载歌曲（python）Posts: Hexo Volantis主题音乐播放器Aplayer适应暗黑模式并能跟随变化 Posts: 本站的壁纸