MediaWiki:Common.js:修订间差异
MediaWiki界面页面
更多操作
创建页面,内容为“→这里的任何JavaScript将为所有用户在每次页面加载时加载。: // 代码块复制按钮 mw.hook('wikipage.content').add(function ($content) { // 遍历所有高亮代码块 $content.find('.mw-highlight').each(function () { const $block = $(this); // 防止重复添加按钮 if ($block.find('.copy-code-btn').length) return; // 容器设为相对定位,让按钮悬浮在右上角 $block.css('p…” |
无编辑摘要 |
||
| (未显示同一用户的1个中间版本) | |||
| 第48行: | 第48行: | ||
$block.append($btn); | $block.append($btn); | ||
}); | |||
}); | |||
// 返回顶部按钮(右下角) | |||
mw.hook('wikipage.content').add(function () { | |||
// 创建按钮DOM | |||
const $backTop = $(` | |||
<div id="back-to-top" title="返回顶部"> | |||
<svg width="24" height="24" viewBox="0 0 24 24" fill="#666" style="margin:auto;"> | |||
<path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/> | |||
</svg> | |||
</div> | |||
`).appendTo('body'); | |||
// 样式固定在右下角 + 弹性居中 | |||
$backTop.css({ | |||
position: 'fixed', | |||
bottom: '25px', | |||
right: '25px', // 改为右下角 | |||
width: '40px', | |||
height: '40px', | |||
background: '#f0f0f0', | |||
borderRadius: '50%', | |||
display: 'none', | |||
alignItems: 'center', | |||
justifyContent: 'center', | |||
boxShadow: '0 2px 6px #999', | |||
cursor: 'pointer', | |||
zIndex: '9999', | |||
transition: 'opacity 0.3s' | |||
}); | |||
// 深色模式自动变色 | |||
$(document).on('themechange', function(e, theme) { | |||
if (theme === 'night') { | |||
$backTop.css({ background: '#333' }); | |||
} else { | |||
$backTop.css({ background: '#f0f0f0' }); | |||
} | |||
}); | |||
// 滚动超过300px显示按钮 | |||
$(window).on('scroll', function () { | |||
if ($(window).scrollTop() > 300) { | |||
$backTop.fadeIn(); | |||
} else { | |||
$backTop.fadeOut(); | |||
} | |||
}); | |||
// 平滑滚动回顶部 | |||
$backTop.on('click', function () { | |||
$('html,body').animate({ scrollTop: 0 }, 400); | |||
}); | }); | ||
}); | }); | ||
2026年6月26日 (五) 11:24的最新版本
/* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */
// 代码块复制按钮
mw.hook('wikipage.content').add(function ($content) {
// 遍历所有高亮代码块
$content.find('.mw-highlight').each(function () {
const $block = $(this);
// 防止重复添加按钮
if ($block.find('.copy-code-btn').length) return;
// 容器设为相对定位,让按钮悬浮在右上角
$block.css('position', 'relative');
// 创建复制按钮
const $btn = $('<button class="copy-code-btn">复制代码</button>')
.css({
position: 'absolute',
top: '6px',
right: '6px',
padding: '2px 8px',
border: 'none',
borderRadius: '4px',
background: '#555',
color: '#fff',
cursor: 'pointer',
zIndex: '10',
fontSize: '12px'
});
// 点击复制文本
$btn.on('click', async function () {
const text = $block.find('pre').text();
try {
await navigator.clipboard.writeText(text);
$btn.text('已复制');
setTimeout(() => $btn.text('复制代码'), 1500);
} catch (e) {
// 兼容不安全环境
const ta = document.createElement('textarea');
ta.value = text;
document.body.appendChild(ta);
ta.select();
document.execCommand('copy');
ta.remove();
$btn.text('已复制');
setTimeout(() => $btn.text('复制代码'), 1500);
}
});
$block.append($btn);
});
});
// 返回顶部按钮(右下角)
mw.hook('wikipage.content').add(function () {
// 创建按钮DOM
const $backTop = $(`
<div id="back-to-top" title="返回顶部">
<svg width="24" height="24" viewBox="0 0 24 24" fill="#666" style="margin:auto;">
<path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/>
</svg>
</div>
`).appendTo('body');
// 样式固定在右下角 + 弹性居中
$backTop.css({
position: 'fixed',
bottom: '25px',
right: '25px', // 改为右下角
width: '40px',
height: '40px',
background: '#f0f0f0',
borderRadius: '50%',
display: 'none',
alignItems: 'center',
justifyContent: 'center',
boxShadow: '0 2px 6px #999',
cursor: 'pointer',
zIndex: '9999',
transition: 'opacity 0.3s'
});
// 深色模式自动变色
$(document).on('themechange', function(e, theme) {
if (theme === 'night') {
$backTop.css({ background: '#333' });
} else {
$backTop.css({ background: '#f0f0f0' });
}
});
// 滚动超过300px显示按钮
$(window).on('scroll', function () {
if ($(window).scrollTop() > 300) {
$backTop.fadeIn();
} else {
$backTop.fadeOut();
}
});
// 平滑滚动回顶部
$backTop.on('click', function () {
$('html,body').animate({ scrollTop: 0 }, 400);
});
});