alyenc/hugo-theme-next
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🐛 Fxied #139, make render code block & clipboard remove last enter line.

Browse Source
This commit is contained in:
elkan1788
2025-01-20 09:28:56 +08:00
parent e9297ac28b
commit 23e220b5f3
10 changed files with 118 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/_common/scaffolding/highlight/copy-code.scss
View File

@@ -3,7 +3,7 @@
background: var(--highlight-background);
margin-bottom: 26px;
line-height: 1.185;
line-height: 1.25;
//TODO Need fixed the copy button show position.
div:first-child {

37
assets/js/3rd/others/clipboard.js Normal file
View File

@@ -0,0 +1,37 @@
/* clipboard plugin */
NexT.plugins.others.clipboard = function() {
const clipboard_js = NexT.utils.getCDNResource(NexT.CONFIG.page.clipboard.js);
NexT.utils.getScript(clipboard_js, function(){
let figure = document.querySelectorAll('.highlight pre');
if (figure.length === 0 || !NexT.CONFIG.copybtn) return;
figure.forEach(element => {
let cn = element.querySelector('code').className;
if (cn === '') return;
element.children[0].insertAdjacentHTML('beforebegin', '<div class="copy-btn" data-clipboard-snippe><i class="fa fa-copy fa-fw"></i></div>');
var clipboard = new ClipboardJS(element.children[0],
{
text: function(trigger) {
return trigger.nextElementSibling.textContent.trim();
}
});
clipboard.on('success', function (e) {
e.clearSelection();
button.querySelector('i').className = 'fa fa-check-circle fa-fw';
});
clipboard.on('error', function (e) {
console.error('Copy failed:', e);
button.querySelector('i').className = 'fa fa-times-circle fa-fw';
});
const button = element.querySelector('.copy-btn');
element.addEventListener('mouseleave', () => {
setTimeout(() => {
button.querySelector('i').className = 'fa fa-copy fa-fw';
}, 300);
});
});
});
}

1
assets/js/next-boot.js
View File

@@ -67,7 +67,6 @@ NexT.boot.refresh = function() {
if (NexT.CONFIG.page.expired) NexT.utils.calPostExpiredDate();
if (NexT.CONFIG.page.music) NexT.utils.registerAPlayer();
NexT.utils.registerCopyCode();
NexT.utils.registerImageViewer();
NexT.utils.registerPostReward();

64
assets/js/utils.js
View File

@@ -306,27 +306,57 @@ NexT.utils = {
registerCopyCode: function () {
if (!NexT.CONFIG.copybtn) return;
let figure = document.querySelectorAll('.highlight pre');
/** let figure = document.querySelectorAll('.highlight pre');
if (figure.length === 0 || !NexT.CONFIG.copybtn) return;
figure.forEach(element => {
let cn = element.querySelector('code').className;
// TODO seems hard code need find other ways fixed it.
if (cn == '') return;
element.insertAdjacentHTML('beforeend', '<div class="copy-btn"><i class="fa fa-copy fa-fw"></i></div>');
let cn = element.querySelector('code').className;
if (cn === '') return;
element.children[0].insertAdjacentHTML('beforebegin', '<div class="copy-btn" data-clipboard-snippe><i class="fa fa-copy fa-fw"></i></div>');
var clipboard = new ClipboardJS(element.children[0],
{
text: function(trigger) {
return trigger.nextElementSibling.textContent.trim();
}
});
clipboard.on('success', function (e) {
e.clearSelection();
console.info('Action:', e.action);
console.info('Text:', e.text);
button.querySelector('i').className = 'fa fa-check-circle fa-fw';
});
clipboard.on('error', function (e) {
console.error('复制失败:', e);
button.querySelector('i').className = 'fa fa-times-circle fa-fw';
});
const button = element.querySelector('.copy-btn');
button.addEventListener('click', () => {
element.addEventListener('mouseleave', () => {
setTimeout(() => {
button.querySelector('i').className = 'fa fa-copy fa-fw';
}, 300);
});
});**/
/** figure.forEach(element => {
let cn = element.querySelector('code').className;
if (cn === '') return;
element.insertAdjacentHTML('beforeend', '<div class="copy-btn"><i class="fa fa-copy fa-fw"></i></div>');
// element.insertAdjacentHTML('beforeend', '<div class="copy-btn"><i class="fa fa-copy fa-fw"></i></div>');
const button = element.querySelector('.copy-btn');
button.addEventListener('click', async () => {
const lines = element.querySelector('.code') || element.querySelector('code');
const code = lines.innerText.replace(/(\n{2,})/g, '\n');
let code = lines.textContent.trim();
console.log('尝试复制代码:', code);
if (navigator.clipboard) {
// https://caniuse.com/mdn-api_clipboard_writetext
navigator.clipboard.writeText(code).then(() => {
console.log('复制成功');
button.querySelector('i').className = 'fa fa-check-circle fa-fw';
}, () => {
}).catch((err) => {
console.error('复制失败:', err);
button.querySelector('i').className = 'fa fa-times-circle fa-fw';
});
} else {
const ta = document.createElement('textarea');
ta.style.top = window.scrollY + 'px'; // Prevent page scrolling
ta.style.top = window.scrollY + 'px';
ta.style.position = 'absolute';
ta.style.opacity = '0';
ta.readOnly = true;
@@ -334,20 +364,22 @@ NexT.utils = {
document.body.append(ta);
ta.select();
ta.setSelectionRange(0, code.length);
ta.readOnly = false;
const result = document.execCommand('copy');
button.querySelector('i').className = result ? 'fa fa-check-circle fa-fw' : 'fa fa-times-circle fa-fw';
ta.blur(); // For iOS
button.blur();
try {
const successful = document.execCommand('copy');
if (!successful) throw new Error('复制命令执行失败');
} catch (err) {
console.error('复制失败:', err);
}
document.body.removeChild(ta);
}
});
element.addEventListener('mouseleave', () => {
setTimeout(() => {
button.querySelector('i').className = 'fa fa-copy fa-fw';
}, 300);
});
});
});**/
},
wrapTableWithBox: function () {