编辑b2/Assets/fontend/single.js,在最上方插入以下代码。
function copyToClipboard(content) {
if (window.clipboardData) {
window.clipboardData.setData('text', content);
} else {
(function (content) {
document.oncopy = function (e) {
e.clipboardData.setData('text', content);
e.preventDefault();
document.oncopy = null;
}
})(content);
document.execCommand('Copy');
}
}
编辑b2/Assets/fontend/single.js,搜索prettyPrint(),在下方插入以下代码。
[...document.getElementsByTagName('pre')].forEach(item => {
item.style.position = "relative";
if (!item.querySelector('.sticky-button')) {
let copyButton = document.createElement("button")
copyButton.className = 'sticky-button'; // 使用 sticky-button 類別
copyButton.innerHTML = "一键复制";
copyButton.onclick = function () {
let copyData = item.lastChild.innerText;
navigator.clipboard.writeText(copyData).then(() => {
copyButton.innerHTML = "复制成功";
setTimeout(function () {
copyButton.innerHTML = "一键复制";
}, 1000);
});
}
// 將按鈕添加到 pre 內部,並且在 ol 上面
item.insertBefore(copyButton, item.firstChild);
}
});
CSS加入代码(限定最大高数、带滚动条、代码超出自动换行)
/*代码高亮美化开始*/
.entry-content pre:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 15px;
height: 15px;
border-radius: 50%;
background: #fc625d;
margin: 15px 25px;
}
.sticky-button {
position: -webkit-sticky;
position: sticky;
top: 0;
left:100%;
font-size:16px;
background: var(--b2color);
color: #fff;
border: none;
padding: 5px 10px;
border-radius: var(--b2radius);
cursor: pointer;
}
.entry-content pre {
position: relative;
border-radius: 6px;
padding-top: 50px;
box-shadow: 0px 8px 20px -10px #000;
}
.entry-content pre code, .content-show-roles pre code{
white-space: pre-wrap!important;
}
.entry-content pre {
min-height:100px;
max-height:300px;
overflow-y: auto; /* 当内容高度超出元素高度时显示滚动条 */
overflow-x: auto; /* 隐藏水平滚动条 */
}
.entry-content pre:before {
content: '';
position: absolute;
top: 0;
left: 25px;
width: 15px;
height: 15px;
border-radius: 50%;
margin: 15px 25px;
background: #fdbc40;
}
ol.linenums:after {
content: '';
position: absolute;
top: 0;
left: 50px;
width: 15px;
height: 15px;
border-radius: 50%;
margin: 15px 25px;
background: #35cd4b;
}
/*代码高亮美化结束*/





