插件简介

支持功能

目前支持 嵌入视频，嵌入音乐。后期会扩展更多的嵌入。

多平台嵌入视频

支持平台及链接示例

• bilibili - https://www.bilibili.com/video/BV1Ec411z7j2

• bilibili直播 - https://live.bilibili.com/00000000

• 抖音视频 - https://www.douyin.com/video/7446330035725749564

• 西瓜视频 - https://www.ixigua.com/7245325256414462497

• 腾讯视频 - https://v.qq.com/x/cover/mzc002001f5d4ic/s0955xkheix.html

• 优酷视频 - https://v.youku.com/v_show/id_XNDY5MjcyNTcy.html

多平台嵌入音乐

支持平台及链接示例

• QQ音乐 | 单曲 - https://y.qq.com/n/ryqq/songDetail/001z3SOQ1SSvLQ

• 网易云音乐 | 单曲 - https://music.163.com/#/song?id=2630864179

• 网易云音乐 | 歌单 - https://music.163.com/#/playlist?id=2630864179

• 网易云音乐 | 专辑 - https://music.163.com/#/album?id=2630864179

样式注入

样式注入需在 Halo 后台 /console/settings?tab=codeInjection 设置代码注入，内容页 head 标签。

已测试主题：

Earth 主题 / Hao 主题 / vCard4 主题 / HelloPage 主题

<script>
    document.addEventListener('DOMContentLoaded', function () {
        function addLoadedClassToParents(parentSelector, childSelector, loadedClass) {
            var observer = new MutationObserver(function (mutations) {
                mutations.forEach(function (mutation) {
                    if (mutation.type === 'childList') {
                        var parentElements = document.querySelectorAll(parentSelector);
                        parentElements.forEach(function (parentElement) {
                            var childElement = parentElement.querySelector(childSelector);
                            if (childElement) {
                                childElement.addEventListener('load', function () {
                                    parentElement.classList.add(loadedClass);
                                });
                            }
                        });
                    }
                });
            });
            var config = { childList: true, subtree: true };
            observer.observe(document.body, config);
        }
        addLoadedClassToParents('thyuu-embed', 'iframe', 'loaded');
    });
</script>

<style>
    :root {
        --thyuu-font-color: 0deg 0% 15%;
        --thyuu-nav-height: 4rem;
        --thyuu-edge-tb: var(--thyuu-nav-height);
        --thyuu-bg: hsl(var(--thyuu-font-color) / 4%);
        --thyuu-radius: .75rem;
    }

    thyuu-embed {
        display: block;
        position: relative;
    }

    thyuu-embed iframe {
        width: 100%;
        transition: .5s .5s;
        border: none;
    }

    thyuu-embed:not(.loaded) iframe {
        opacity: 0;
        pointer-events: none;
        border: none;
    }

    thyuu-embed:not(.loaded):after {
        content: "";
        position: absolute;
        border-top: 2px solid;
        border-radius: 50%;
        width: 1em;
        aspect-ratio: 1;
        inset: auto 0 1.5em;
        margin: auto;
        pointer-events: none;
        animation: rotate 2s linear infinite;
    }

    @keyframes rotate {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .thyuu-music {
        width: 100%;
        height: 65px;
        outline: thin solid var(--thyuu-bg);
        background: var(--thyuu-bg);
        border-radius: var(--thyuu-radius);
        overflow: hidden;
    }

    .thyuu-music:is([data-type="nn_lists"], [data-type="nn_album"]) {
        height: 390px;
    }

    html.dark .thyuu-music iframe {
        opacity: .6;
        border: none;
    }

    .thyuu-video {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 100%;
        margin-inline: auto;
        outline: thin solid var(--thyuu-bg);
        color: white;
        background: #000;
        border-radius: var(--thyuu-radius);
        aspect-ratio: 16 / 9;
    }

    .thyuu-video iframe {
        height: 100%;
        border-radius: inherit;
        align-self: flex-start;
        z-index: 2;
        border: none;
    }

    .thyuu-video[data-type="dy"] iframe:hover {
        height: calc(100% + 35px);
    }

    @media (max-width: 641px) {
        .thyuu-video.as-tb:not([data-type="dy"]) {
            aspect-ratio: 9 / 16;
        }

        .thyuu-video[data-type="dy"] {
            width: min(324px, 100%);
            max-height: none;
            margin-inline: auto;
            aspect-ratio: .4821;
            overflow: hidden;
        }
    }
</style>

演示