查看“︁Widget:SongCats”︁的源代码

<includeonly><!--{if !isset($wgSongCats) || !$wgSongCats}--><!--{assign var="wgSongCats" value=true scope="global"}--><script>
(window.RLQ ||= []).push(['jquery', async function () {
    await $.ready;
    if ($('#mw-daily-catlinks').length) return;

    const $container = $('#catlinks');
    const $normalSection = $container.find('#mw-normal-catlinks');
    const $ul = $normalSection.find('ul');
    const createCategoryItem = (dataItem) => {
        const $li = $('<li>');

        // 平台图标
        let src = "";
        switch (dataItem.name) {
            case 'niconico': src = '/images/2/24/Niconico_Television.svg'; break;
            case 'YouTube': src = '/images/9/98/YouTube_Logo.svg'; break;
            case 'bilibili': src = '/images/thumb/b/b6/Bilibilitv-logo.png/30px-Bilibilitv-logo.png'; break;
        }
        const $img = $('<img>', {
            src: src,
            decoding: 'async',
            width: 15,
            height: 15,
            class: 'mw-file-element',
            'data-file-width': 512,
            'data-file-height': 512
        }).css({
            'width': '15px',
            'height': '15px'
        });

        // 年份部分
        const yearText = `${dataItem.year}年`;
        const $yearLink = $('<a>', {
            href: `/Category:${encodeURIComponent(`${yearText}投稿至${dataItem.name}的歌曲`)}`,
            title: `Category:${yearText}投稿至${dataItem.name}的歌曲`,
            text: yearText
        });

        const monthDayText = `${dataItem.month}月${dataItem.day}日`;
        const $monthDayLink = $('<a>', {
            href: `/Category:${encodeURIComponent(`${dataItem.month}月${dataItem.day}日投稿至${dataItem.name}的歌曲`)}`,
            title: `Category:${monthDayText}投稿至${dataItem.name}的歌曲`,
            text: monthDayText
        });

        $li.append($img, $yearLink, $monthDayLink);
        return $li;
    }

    // 去除日期分类
    const dateRegex = /^(20\d{2}年|1?\d月[123]?\d日)投稿至\w+的歌曲$/;
    $ul.children('li').filter(function () {
        return dateRegex.test($(this).text());
    }).remove();

    // 重建日期分类
    const $div = $('<div>', {
        id: 'mw-daily-catlinks',
        class: 'mw-daily-catlinks'
    });
    const $list = $('<ul>');
    const data = $('.songbox_submission').toArray().map(ele => JSON.parse(ele.dataset.json));
    data.forEach(item => {
        const dataItem = {
            year: item.date.year,
            month: item.date.month,
            day: item.date.day,
            name: item.platform.name,
        }
        const $li = createCategoryItem(dataItem);
        if ($list.children().filter((_, el) => $(el).html() === $li.html()).length > 0) return;
        $list.append($li);
    })

    $normalSection.after($div.append(`日期${wgULS('分类', '分類')}：&ZeroWidthSpace;`, $list));
}]);</script><style>
.mw-daily-catlinks li > img {
    margin: 0 6px 3px 0;
}

body.skin-citizen .mw-daily-catlinks li {
    display: block;
    padding: var(--space-xs) var(--space-md);
    color: var(--color-base);
    border: var(--border-width-base) solid var(--border-color-interactive);
    border-radius: var(--border-radius-pill);
}

body.skin-citizen .mw-daily-catlinks li > a {
    display: inline;
    border: none;
    padding: 0;
}

body.skin-citizen .mw-daily-catlinks:first-line {
    color: var(--color-subtle);
    font-family: var(--font-family-overline);
    font-weight: var(--font-weight-overline);
    line-height: var(--line-height-overline);
    text-transform: var(--text-transform-overline);
    letter-spacing: var(--letter-spacing-overline);
}</style><!--{/if}--></includeonly>