打开/关闭菜单
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

模块:SongPlayer:修订间差异

来自Rizline中文维基
卡介菌
卡介菌留言 | 贡献 (修复安全标签问题)
卡介菌
卡介菌留言 | 贡献 (直接把配置改写到全局)
第17行: 第17行:
     local encodedTitle = mw.uri.encode(sanitizedTitle, 'PATH')
     local encodedTitle = mw.uri.encode(sanitizedTitle, 'PATH')
     local imagePath = frame:preprocess('{{filepath:' .. imageName .. '}}')
     local imagePath = frame:preprocess('{{filepath:' .. imageName .. '}}')
    local songUrl = 'http://pan.rizwiki.cn/d/song/' .. encodedTitle .. '.mp3'


     local jsTitle = mw.text.jsonEncode(title)
    -- 构建一个带有 data-* 属性的 div 来存储信息
    local jsArtist = mw.text.jsonEncode(artist or 'Unknown Artist')
     local data_div = mw.html.create('div')
    local jsUrl = mw.text.jsonEncode('http://pan.rizwiki.cn/d/song/' .. encodedTitle .. '.mp3')
        :attr('id', 'song-player-data')
    local jsCover = mw.text.jsonEncode(imagePath)
        :attr('style', 'display:none;')
        :attr('data-name', title)
        :attr('data-artist', artist or 'Unknown Artist')
        :attr('data-url', songUrl)
        :attr('data-cover', imagePath)
        :done()


    -- 将 CSS 和 JS 内容存储在变量中
    local css_content = [[
    #song-player-fixed .aplayer {
        background: var(--color-surface-3, #e6e6e6);
        color: var(--color-base, #000);
        border: 1px solid var(--border-color-base, #a2a9b1);
        box-shadow: 0 0 10px rgba(0,0,0,0.2);
    }
    #song-player-fixed .aplayer .aplayer-body,
    #song-player-fixed .aplayer .aplayer-list ol {
        background: var(--color-surface-1, #fff);
    }
    #song-player-fixed .aplayer .aplayer-info .aplayer-music *,
    #song-player-fixed .aplayer .aplayer-list ol li {
        color: var(--color-base, #000);
    }
    #song-player-fixed .aplayer .aplayer-list ol li.aplayer-list-light {
        background: var(--color-surface-2, #efefef);
    }
    #song-player-fixed .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
        background: var(--color-progressive, #4285f4) !important;
    }
    #song-player-fixed .aplayer .aplayer-info .aplayer-controller .aplayer-volume-bar-wrap .aplayer-volume-bar .aplayer-volume {
        background: var(--color-progressive, #4285f4) !important;
    }
    ]]
    local js_content = string.format([[
    mw.loader.using("mediawiki.util").then(function() {
      const ap = new APlayer({
        container: document.getElementById("song-player-fixed"),
        mini: true,
        fixed: true,
        audio: [{
          name: %s,
          artist: %s,
          url: %s,
          cover: %s
        }]
      });
    });
    ]], jsTitle, jsArtist, jsUrl, jsCover)
    -- 使用 #tag 解析器函数安全地生成标签
    local style_tag = frame:callParserFunction('tag', 'style', css_content)
    local script_tag = frame:callParserFunction('tag', 'script', js_content)
    -- 组合最终的HTML输出
     local html = {
     local html = {
        style_tag,
         '<link rel="stylesheet" href="/aplayer/dist/APlayer.min.css">',
         '<link rel="stylesheet" href="/aplayer/dist/APlayer.min.css">',
         '<div id="song-player-fixed"></div>',
         '<div id="song-player-fixed"></div>',
         '<script src="/aplayer/dist/APlayer.min.js"></script>',
        tostring(data_div),
        script_tag
         '<script src="/aplayer/dist/APlayer.min.js"></script>'
     }
     }



2025年11月29日 (六) 18:58的版本

此模块的文档可以在模块:SongPlayer/doc创建

local p = {}

function p.player(frame)
    local args = frame:getParent().args
    local title = args.title
    local artist = args.artist
    local imageName = args.image

    if not title or title == '' or not imageName or imageName == '' then
        return ''
    end

    local sanitizedTitle = title
    sanitizedTitle = sanitizedTitle:gsub(' ', '_')
    sanitizedTitle = sanitizedTitle:gsub('[\\/:*?"<>|]', '-')

    local encodedTitle = mw.uri.encode(sanitizedTitle, 'PATH')
    local imagePath = frame:preprocess('{{filepath:' .. imageName .. '}}')
    local songUrl = 'http://pan.rizwiki.cn/d/song/' .. encodedTitle .. '.mp3'

    -- 构建一个带有 data-* 属性的 div 来存储信息
    local data_div = mw.html.create('div')
        :attr('id', 'song-player-data')
        :attr('style', 'display:none;')
        :attr('data-name', title)
        :attr('data-artist', artist or 'Unknown Artist')
        :attr('data-url', songUrl)
        :attr('data-cover', imagePath)
        :done()

    local html = {
        '<link rel="stylesheet" href="/aplayer/dist/APlayer.min.css">',
        '<div id="song-player-fixed"></div>',
        tostring(data_div),
        '<script src="/aplayer/dist/APlayer.min.js"></script>'
    }

    return table.concat(html, '\n')
end

return p