HTML – 第 6 页 – 万雪飞扬

【网站】为WordPress添加APlayer播放器

引入方式类似prism，由于使用概率较大，因此在主题模板函数中进行全局引入：

// Function to add APlayer.mini.css and APlayer.mini.js to the site
function add_APlayer() {
    
    wp_register_style(
        'APlayerCSS', // handle name for the style 
        get_stylesheet_directory_uri() . '/APlayer.css' // location of the file
    );

    wp_register_script(
        'APlayerJS', // handle name for the script 
        get_stylesheet_directory_uri() . '/APlayer.js' // location of the file
    );

    // Enqueue the registered style and script files
    wp_enqueue_style('APlayerCSS');
    wp_enqueue_script('APlayerJS');
}
add_action('wp_enqueue_scripts', 'add_APlayer');

然后采用 APlayer官方文档 中描述的方式引入：

<div id="aplayer">
</div>
<script>
const ap = new APlayer({
    container: document.getElementById('aplayer'),
    audio: [{
        name: '',
        artist: '',
        url: '',
        cover: ''
    }]
});
</script>

2024年11月28日

【HTML】iframe小工具——提取嵌入链接并重设参数

一般类似YouTube、Bilibili的分享链接，都设置了各自网站的相应参数，为了快速提取其src内容并自定义部分参数，可以使用该小工具进行快速设置。

跳转到小工具页面

操作区

标题:

宽:

单位:

高:

单位:

允许全屏:

Referrer Policy:

加载方式:

自动播放:

加密媒体:

画中画:

Web分享:

预览展示区

查看代码

<style>
        textarea, input, select {
            width: 100%;
            margin-bottom: 10px;
            padding: 5px;
            font-size: 14px;
        }
        button {
            font-size: 16px;
            margin-bottom: 10px;
            padding: 5px 10px;
        }
        .link-container {
            margin-top: 10px;
        }
        .link-item {
            margin-bottom: 5px;
        }
        .iframe-preview {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ddd;
            background: #f9f9f9;
        }
        .iframe-preview pre {
            font-size: 14px;
            background: #e9e9e9;
            padding: 10px;
            border-radius: 5px;
        }
        .row {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .col {
            flex: 1 1 20%;
        }
        .col input, .col select {
            width: 100%;
        }
        .unit-select {
            width: 10px; /*缩小单位选择框宽度*/
        }
        .empty-option {
            font-size: 14px;
        }
        #iframePreviewContainer {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <!-- 输入框 -->
    <textarea id="iframeInput" placeholder="在此输入多个 iframe 代码"></textarea>
    <button id="extractButton">提取链接</button>

    <!-- 链接展示区 -->
    <div id="result" class="link-container"></div>

    <!-- 单个链接操作区 -->
    <h2>操作区</h2>
    <input id="selectedLink" type="text" placeholder="点击复制按钮后，链接将填入此处" readonly>
    
    <!-- iframe 属性设置 -->
    <div class="row">
        <div class="col">
            <label for="iframeTitle">标题:</label>
            <input id="iframeTitle" type="text" placeholder="请输入 iframe 标题">
        </div>
        <div class="col">
            <label for="iframeWidth">宽度:</label>
            <input id="iframeWidth" type="text" placeholder="例如 560">
        </div>
        <div class="col">
            <label for="iframeWidthUnit">宽度单位:</label>
            <select id="iframeWidthUnit" class="unit-select">
                <option value="px">px</option>
                <option value="%">%</option>
                <option value="vw">vw</option>
            </select>
        </div>
        <div class="col">
            <label for="iframeHeight">高度:</label>
            <input id="iframeHeight" type="text" placeholder="例如 315">
        </div>
        <div class="col">
            <label for="iframeHeightUnit">高度单位:</label>
            <select id="iframeHeightUnit" class="unit-select">
                <option value="px">px</option>
                <option value="%">%</option>
                <option value="vh">vh</option>
            </select>
        </div>
    </div>

    <div class="row">
        <div class="col">
            <label for="iframeFullscreen">允许全屏:</label>
            <select id="iframeFullscreen">
                <option value="allowfullscreen">是</option>
                <option value="">否</option>
            </select>
        </div>
        <div class="col">
            <label for="iframeReferrer">Referrer Policy:</label>
            <select id="iframeReferrer">
                <option value="no-referrer">不发送</option>
                <option value="no-referrer-when-downgrade">仅同源</option>
                <option value="origin">仅发送源</option>
                <option value="origin-when-cross-origin">跨源时发送源</option>
                <option value="same-origin">同源发送完整路径</option>
                <option value="strict-origin">严格同源发送源</option>
                <option value="strict-origin-when-cross-origin">默认（严格同源）</option>
                <option value="unsafe-url">发送完整 URL</option>
                <option value="">保持空值</option>
            </select>
        </div>
        <div class="col">
            <label for="iframeLoading">加载方式:</label>
            <select id="iframeLoading">
                <option value="eager">立即加载</option>
                <option value="lazy">懒加载</option>
                <option value="">保持空值</option>
            </select>
        </div>
        <div class="col">
            <label for="iframeAutoplay">自动播放:</label>
            <select id="iframeAutoplay">
                <option value="autoplay">是</option>
                <option value="">否</option>
            </select>
        </div>
    </div>

    <div class="row">
        <div class="col">
            <label for="iframeEncrypted">加密媒体:</label>
            <select id="iframeEncrypted">
                <option value="encrypted-media">是</option>
                <option value="">否</option>
            </select>
        </div>
        <div class="col">
            <label for="iframePictureInPicture">画中画:</label>
            <select id="iframePictureInPicture">
                <option value="picture-in-picture">是</option>
                <option value="">否</option>
            </select>
        </div>
        <div class="col">
            <label for="iframeWebShare">Web分享:</label>
            <select id="iframeWebShare">
                <option value="web-share">是</option>
                <option value="">否</option>
            </select>
        </div>
    </div>

    <!-- 生成 iframe 和复制按钮 -->
    <div>
        <button id="generateIframeButton">生成 iframe 嵌入代码</button>
        <button id="copyIframeButton">复制生成代码</button>
    </div>

    <!-- iframe 代码展示 -->
    <div id="generatedIframe" class="iframe-preview">
        <textarea id="iframeCodeText" readonly rows="10"></textarea>
    </div>

    <!-- iframe 预览展示区 -->
    <div id="iframePreviewContainer" class="iframe-preview">
        <h2>预览展示区</h2>
        <iframe id="iframePreview" src="" width="560" height="315" style="border: none;"></iframe>
    </div>

    <script>
        // 缓存常用的 DOM 元素
        const iframeWidthInput = document.getElementById('iframeWidth');
        const iframeHeightInput = document.getElementById('iframeHeight');
        const iframeWidthUnit = document.getElementById('iframeWidthUnit');
        const iframeHeightUnit = document.getElementById('iframeHeightUnit');
        const selectedLinkInput = document.getElementById('selectedLink');
        const iframeFullscreenSelect = document.getElementById('iframeFullscreen');
        const iframeReferrerSelect = document.getElementById('iframeReferrer');
        const iframeLoadingSelect = document.getElementById('iframeLoading');
        const iframeAutoplaySelect = document.getElementById('iframeAutoplay');
        const iframeEncryptedSelect = document.getElementById('iframeEncrypted');
        const iframePictureInPictureSelect = document.getElementById('iframePictureInPicture');
        const iframeWebShareSelect = document.getElementById('iframeWebShare');
        const iframeTitleInput = document.getElementById('iframeTitle');
        const generateIframeButton = document.getElementById('generateIframeButton');
        const copyIframeButton = document.getElementById('copyIframeButton');
        const iframeCodeText = document.getElementById('iframeCodeText');
        const iframePreview = document.getElementById('iframePreview');
        const resultDiv = document.getElementById('result');

        // 提取 iframe src 链接
        function extractSrc() {
            const input = document.getElementById('iframeInput').value;
            resultDiv.innerHTML = ''; // 清空之前的结果

            const srcMatches = [...input.matchAll(/src="([^"]+)"/g)];
            if (srcMatches.length > 0) {
                const srcLinks = srcMatches.map(match => match[1]);

                srcLinks.forEach(link => {
                    const linkItem = createLinkItem(link);
                    resultDiv.appendChild(linkItem);
                });
            } else {
                resultDiv.textContent = '没有找到有效的 iframe 链接';
            }
        }

        // 创建链接项
        function createLinkItem(link) {
            const div = document.createElement('div');
            div.classList.add('link-item');

            const textNode = document.createTextNode(link);
            const copyButton = document.createElement('button');
            copyButton.textContent = '复制';
            copyButton.onclick = function() {
                selectedLinkInput.value = link;
            };

            div.appendChild(textNode);
            div.appendChild(copyButton);
            return div;
        }

        // 生成 iframe 代码
        function generateIframeCode() {
            const width = iframeWidthInput.value;
            const height = iframeHeightInput.value;
            const widthUnit = iframeWidthUnit.value;
            const heightUnit = iframeHeightUnit.value;
            const title = iframeTitleInput.value;
            const src = selectedLinkInput.value;
            const fullscreen = iframeFullscreenSelect.value;
            const referrer = iframeReferrerSelect.value;
            const loading = iframeLoadingSelect.value;
            const autoplay = iframeAutoplaySelect.value;
            const encrypted = iframeEncryptedSelect.value;
            const pictureInPicture = iframePictureInPictureSelect.value;
            const webShare = iframeWebShareSelect.value;

            let iframeCode = `<iframe src="${src}"`;

            if (title) {
                iframeCode += ` title="${title}"`;
            }
            iframeCode += ` width="${width}${widthUnit}" height="${height}${heightUnit}"`;

            if (fullscreen) {
                iframeCode += ` ${fullscreen}`;
            }

            if (referrer) {
                iframeCode += ` referrerpolicy="${referrer}"`;
            }

            if (loading) {
                iframeCode += ` loading="${loading}"`;
            }

            if (autoplay) {
                iframeCode += ` ${autoplay}`;
            }

            if (encrypted) {
                iframeCode += ` ${encrypted}`;
            }

            if (pictureInPicture) {
                iframeCode += ` ${pictureInPicture}`;
            }

            if (webShare) {
                iframeCode += ` ${webShare}`;
            }

            iframeCode += '></iframe>';

            iframeCodeText.value = iframeCode;
            iframePreview.src = src;
        }

        // 复制代码到剪贴板
        function copyIframeCode() {
            iframeCodeText.select();
            document.execCommand('copy');
        }

        // 事件监听
        document.getElementById('extractButton').addEventListener('click', extractSrc);
        generateIframeButton.addEventListener('click', generateIframeCode);
        copyIframeButton.addEventListener('click', copyIframeCode);
    </script>
</body>

2024年11月27日

【HTML】输入Pixiv ID跳转对应画师主页

Pixiv的应用内部居然没这个功能，不科学，非常基础的功能。

收录进了小工具页面。👉点击使用小工具

<body>
    <h1>Pixiv用户跳转</h1>
    <input id="input-id" type="text" placeholder="请输入数字ID" oninput="validateInput()" />
    <div>
        <button onclick="generateLink()">生成链接</button>
        <button onclick="openLink()">跳转</button>
    </div>
    <div id="output"></div>

    <script>
        function validateInput() {
            const input = document.getElementById('input-id');
            input.value = input.value.replace(/\D/g, ''); // 只保留数字
        }

        function generateLink() {
            const input = document.getElementById('input-id').value.trim();
            const output = document.getElementById('output');
            if (input === '') {
                output.innerHTML = '<p style="color: red;">请输入有效的数字ID！</p>';
                return;
            }
            const link = `https://www.pixiv.net/member.php?id=${input}`;
            output.innerHTML = `<a href="${link}" target="_blank">点击跳转到 Pixiv 用户页面</a>`;
        }

        function openLink() {
            const input = document.getElementById('input-id').value.trim();
            if (input === '') {
                alert('您还没有输入ID~');
                return;
            }
            const link = `https://www.pixiv.net/member.php?id=${input}`;
            window.open(link, '_blank');
        }
    </script>
</body>

2024年11月24日

标签： HTML

【网站】为WordPress添加APlayer播放器

【HTML】iframe小工具——提取嵌入链接并重设参数

【HTML】输入Pixiv ID跳转对应画师主页