JS代码添加
编辑b2/Assets/fontend/single.js,在最下方插入以下代码。:
window.addEventListener('load', () => { // 初始化 ClipboardJS 的基础设置 function setupCodeToolbarAndClipboard() { const preElements = document.querySelectorAll('pre'); preElements.forEach((pre, index) => { // 检查是否已经被包装 if (!pre.parentElement.classList.contains('code-toolbar')) { // 创建外层容器 const wrapper = document.createElement('div'); wrapper.className = 'code-toolbar'; // 创建工具栏 const toolbar = document.createElement('div'); toolbar.className = 'toolbar'; // 创建工具栏项目 const toolbarItem = document.createElement('div'); toolbarItem.className = 'toolbar-item'; // 创建全选按钮 const selectAllButton = document.createElement('button'); selectAllButton.textContent = '全选'; // 创建复制按钮 const copyButton = document.createElement('button'); copyButton.textContent = '一键复制'; copyButton.setAttribute('data-clipboard-target', '#copy' + index); // 设置 pre 的 ID pre.id = 'copy' + index; // 将 pre 元素包装在新容器中 pre.parentNode.insertBefore(wrapper, pre); wrapper.appendChild(pre); // 添加按钮到工具栏项目 toolbarItem.appendChild(selectAllButton); toolbarItem.appendChild(document.createElement('span')); // 分隔符 toolbarItem.appendChild(copyButton); // 添加工具栏到包装器 toolbar.appendChild(toolbarItem); wrapper.appendChild(toolbar); // 为全选按钮添加事件监听器 selectAllButton.addEventListener('click', () => { const range = document.createRange(); range.selectNodeContents(pre); const selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); }); // 初始化 ClipboardJS const clipboardCopy = new ClipboardJS(copyButton); clipboardCopy.on('success', function(e) { e.clearSelection(); const trigger = e.trigger; const toolbarItem = trigger.parentElement; const selectAllButton = toolbarItem.querySelector('button:first-of-type'); // 禁用所有按钮并显示复制成功消息 trigger.textContent = '复制成功'; trigger.disabled = true; selectAllButton.disabled = true; setTimeout(() => { trigger.textContent = '一键复制'; trigger.disabled = false; selectAllButton.disabled = false; }, 2000); }); } }); } // 使用 MutationObserver 监控 DOM 变化 const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { if (mutation.type === 'childList' && mutation.addedNodes.length > 0) { Array.from(mutation.addedNodes).forEach(node => { if (node.nodeName === 'PRE' && !node.parentElement.classList.contains('code-toolbar')) { // 创建一个临时的 preElements 集合,仅包含这个新添加的 pre const newPreElements = document.querySelectorAll('pre:not(.processed)'); newPreElements.forEach((pre, index) => { // 标记为已处理,避免重复处理 pre.classList.add('processed'); // 在这里重新调用 setupCodeToolbarAndClipboard 的逻辑,但只针对这个新的 pre // 注意:这里我们其实可以优化,只处理新的这个 pre,而不是重新遍历所有 pre // 但为了简单起见,这里还是重新调用整个函数,并依赖 .processed 类来避免重复处理 setupCodeToolbarAndClipboard(); }); } }); } }); }); // 配置观察选项: const config = { childList: true, subtree: true }; // 选择需要观察变动的节点 const targetNode = document.body; // 启动观察 observer.observe(targetNode, config); // 首次加载时立即处理所有已存在的 pre 元素 setTimeout(setupCodeToolbarAndClipboard, 600); }); /**add**/
请注意如果使用了优化JS等插件可能会报错。
CSS代码添加
将以下代码添加进主题的CSS文件中,如果你使用的是B2子主题,那么请将以下CSS添加进子主题目录中的style.css中: