[7B2主题优化]代码高亮一键复制美化

36天前更新035190admin
[7B2主题优化]代码高亮一键复制美化
[7B2主题优化]代码高亮一键复制美化-源码资源网
[7B2主题优化]代码高亮一键复制美化
此内容为付费阅读,请付费后查看
¥9.9
限时特惠
¥38
立即购买
您当前未登录!建议登陆后购买,可保存购买订单
付费阅读
已售 71

效果如图,下面直接放修改教程

[7B2主题优化]代码高亮一键复制美化

高亮代码显示框修改样式

代码如下👇,把代码加入到主题的style.css文件里面保存即可~

[登录可见]隐藏内容 – 管理员可见
/**代码高亮--开始--**/
.code-toolbar {
	position: relative;
	margin: 1em 0;
	background: #2f3640;
	border-radius: 6px;
	padding-top: 15px
}
 
.code-toolbar:hover .toolbar {
	opacity: 1
}
 
.code-toolbar pre {
	margin: 0 !important;
	border-radius: 6px
}
 
.code-toolbar:before {
	content: \'\';
	height: 40px;
	width: 100%;
	background: #2f3640;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px
}
 
.code-toolbar:after {
	content: \'\';
	position: absolute;
	top: 12px;
	left: 20px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #ff5f56;
	box-shadow: 25px 0 0 #ffbd2e, 50px 0 0 #27c93f;
	z-index: 1
}
 
.toolbar {
	position: absolute;
	top: 6px;
	right: 10px;
	z-index: 2;
	opacity: 0;
	transition: opacity .3s ease
}
 
@media (max-width:768px) {
	.toolbar {
		position: absolute;
		top: 6px;
		right: 10px;
		opacity: 1;
		width: auto;
		display: block !important;
		pointer-events: auto !important
	}
 
	.zhizhao {
		display: none
	}
}
 
.toolbar-item button {
	padding: 5px 10px;
	color: #e4e3e3;
	cursor: pointer;
	background: #0047b2;
	border-radius: 3px;
	line-height: 1.4;
	border: 1px solid #dddddd03;
	margin-right: 5px
}
/**代码高亮-结束**/

给高亮代码框右上角加个一键复制代码按钮

打开主题目录:找到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**/
// 高亮代码复制 按钮结束

自定义精美浏览器滚动条样式

把下面的css代码添加到你主题的style.css文件保存即可~

[登录可见]隐藏内容 – 管理员可见
/*自定义浏览器滚动条样式*/
::-webkit-scrollbar {
    width: 11px;
    height: 1px;
}
::-webkit-scrollbar-corner {
    background: unset;
}
body::-webkit-scrollbar-thumb {
    border-radius: 6px;
}
body::-webkit-scrollbar-thumb {
        background-color: #0066ff;
        background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .4) 75%, transparent 75%, transparent);
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius: 2em;
    }
/*自定义浏览器滚动条样式 --结束*/

清理浏览器缓存后刷新页面即可看到效果

重要提示

如有解压密码: 看下载页、看下载页、看下载页。
源码工具资源类具有可复制性: 建议具有一定思考和动手能力的用户购买。
请谨慎考虑: 小白用户和缺乏思考动手能力者不建议赞助。
虚拟商品购买须知: 虚拟类商品,一经购买打赏赞助,不支持退款。请谅解,谢谢合作!

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容