MediaWiki:Common.js:修订间差异

HW
HW留言 | 贡献
HW
HW留言 | 贡献
第1行: 第1行:
/* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */
// 立即执行闭包,避免污染全局变量
// 等待页面内容加载完成
(function() {
mw.hook('wikipage.content').add(function() {
     // 1. 提前检查皮肤,不是 Minerva 直接退出
     // 仅在 Minerva 皮肤下生效
     if (mw.config.get('skin') !== 'minerva') return;
     if (mw.config.get('skin') !== 'minerva') return;


     // 1. 获取当前页面信息
     // 2. 预获取页面信息(mw.config 在页面头部就已加载,无需等待)
     const pageTitle = mw.config.get('wgPageName');
     const pageTitle = mw.config.get('wgPageName');
     const isTalkPage = mw.config.get('wgNamespaceNumber') % 2 === 1; // 判断是否为讨论页
     const isTalkPage = mw.config.get('wgNamespaceNumber') % 2 === 1;
     const isExistingPage = mw.config.get('wgArticleId') > 0; // 判断页面是否存在
     const isExistingPage = mw.config.get('wgArticleId') > 0;


     // 2. 构造核心链接
     // 3. 预构造按钮 HTML(比动态创建元素更快)
     const editUrl = mw.util.getUrl(pageTitle, { action: 'edit' });
     const editUrl = mw.util.getUrl(pageTitle, { action: 'edit' });
     const historyUrl = mw.util.getUrl(pageTitle, { action: 'history' });
     const historyUrl = mw.util.getUrl(pageTitle, { action: 'history' });
第16行: 第15行:
     const talkUrl = mw.util.getUrl(talkTitle);
     const talkUrl = mw.util.getUrl(talkTitle);


     // 3. 创建底部按钮容器(样式模仿 Wikidot 的简洁风格)
     const buttonsHtml = `
    const bottomBar = document.createElement('div');
        <div id="custom-wiki-bottom-bar" style="
    bottomBar.id = 'custom-wiki-bottom-bar';
            margin: 2.5rem auto 1rem;
    bottomBar.style.cssText = `
            padding: 1rem 0;
            border-top: 1px solid #e0e0e0;
            text-align: center;
            max-width: 800px;
        ">
            <a href="${editUrl}" style="
                display: inline-block;
                margin: 0 0.75rem;
                padding: 0.5rem 1.25rem;
                background-color: #3366cc;
                color: white;
                text-decoration: none;
                border-radius: 4px;
                font-size: 0.95rem;
                font-weight: 500;
                transition: opacity 0.2s;
            " onmouseover="this.style.opacity='0.85'" onmouseout="this.style.opacity='1'">
                ${isExistingPage ? '编辑页面' : '创建页面'}
            </a>
            <a href="${historyUrl}" style="
                display: inline-block;
                margin: 0 0.75rem;
                padding: 0.5rem 1.25rem;
                background-color: #72777d;
                color: white;
                text-decoration: none;
                border-radius: 4px;
                font-size: 0.95rem;
                font-weight: 500;
                transition: opacity 0.2s;
            " onmouseover="this.style.opacity='0.85'" onmouseout="this.style.opacity='1'">
                查看历史
            </a>
            <a href="${talkUrl}" style="
                display: inline-block;
                margin: 0 0.75rem;
                padding: 0.5rem 1.25rem;
                background-color: #202122;
                color: white;
                text-decoration: none;
                border-radius: 4px;
                font-size: 0.95rem;
                font-weight: 500;
                transition: opacity 0.2s;
            " onmouseover="this.style.opacity='0.85'" onmouseout="this.style.opacity='1'">
                ${isTalkPage ? '返回条目' : '讨论页'}
            </a>
        </div>
     `;
     `;


     // 4. 定义按钮组
     // 4. 【关键】DOM 一就绪就插入,不等图片/样式/钩子
     const buttons = [
     function insertBar() {
        {
        const content = document.querySelector('main#content, #content');
            url: editUrl,
         if (content && !document.getElementById('custom-wiki-bottom-bar')) {
            text: isExistingPage ? '编辑页面' : '创建页面',  
             content.insertAdjacentHTML('beforeend', buttonsHtml);
            color: '#3366cc' // 经典 MediaWiki 蓝
        },
         {
            url: historyUrl,
            text: '查看历史',
            color: '#72777d' // 中性灰
        },
        {  
             url: talkUrl,
            text: isTalkPage ? '返回条目' : '讨论页',  
            color: '#202122' // 深灰
         }
         }
     ];
     }
 
    // 5. 生成按钮并插入容器
    buttons.forEach(btn => {
        const link = document.createElement('a');
        link.href = btn.url;
        link.textContent = btn.text;
        link.style.cssText = `
            display: inline-block;
            margin: 0 0.75rem;
            padding: 0.5rem 1.25rem;
            background-color: ${btn.color};
            color: white;
            text-decoration: none;
            border-radius: 4px;
            font-size: 0.95rem;
            font-weight: 500;
            transition: opacity 0.2s;
        `;
        link.onmouseover = () => link.style.opacity = '0.85';
        link.onmouseout = () => link.style.opacity = '1';
        bottomBar.appendChild(link);
    });


        // 6. 将按钮栏插入到 main#content 内部的最底部
    // 优先用 DOMContentLoaded,比 MediaWiki 的钩子快得多
     const content = document.querySelector('main#content, #content');
     if (document.readyState === 'loading') {
   
         document.addEventListener('DOMContentLoaded', insertBar);
    if (content) {
    } else {
         bottomBar.style.marginTop = '2.5rem';
         insertBar(); // 如果 DOM 已经就绪,直接执行
         content.appendChild(bottomBar);
     }
     }
});
})();