投稿: Hexo Volantisテーマの音楽プレイヤーAplayerはダークモードに適応し、変化に追随できます

注意！！！

あなたが _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 ファイル
2. volantis 開発ドキュメント