MediaWiki:Minerva.js
Appearance
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* All JavaScript here will be loaded for users of the MinervaNeue skin */ $(document).ready(function () { // 目标是包含 Home, Random 的那个 <ul> var $navUl = $('#p-navigation'); // 确保目标列表存在 if ($navUl.length) { // --- 辅助函数:创建一个带图标和文字的菜单项 LI --- // id: 用于 li 的 id 后缀 (e.g., 'cat-loc' -> id='menu-item-cat-loc') // text: 显示的链接文字 // pageName: 链接指向的维基页面名称 (或完整 URL) // iconClass: (可选) 用于图标的 mw-ui-icon- 类名 (e.g., 'mw-ui-icon-minerva-listBullet') function createMenuItem(id, text, pageName, iconClass) { var $li = $('<li>').attr('id', 'menu-item-' + id); var $a = $('<a>') .addClass('menu__item') // 应用基础菜单项样式 .attr('href', mw.util.getUrl(pageName)) // 使用 MediaWiki 函数生成 URL .attr('data-mw', 'interface'); // 标准属性 // 添加图标 Span (如果提供了 iconClass) var iconSpanClass = 'mw-ui-icon'; // 基础图标类 if (iconClass) { iconSpanClass += ' ' + iconClass; // 添加具体图标类 } $('<span>').addClass(iconSpanClass).appendTo($a); // 添加文字 Span $('<span>').text(text).appendTo($a); $li.append($a); return $li; } // --- 插入点:尝试插入到 "Random" (#menu-item-random) 后面 --- var $insertAfterElement = $navUl.find('#menu-item-random'); // 如果找不到 "Random",则退回到在列表末尾追加 var appendMode = !$insertAfterElement.length; if (appendMode) { $insertAfterElement = $navUl; // 直接追加到 UL } // --- 创建并添加 Categories 链接 --- // 注意:Minerva 菜单通常是扁平列表,不直接支持段落标题。 // 如果需要视觉分隔,后续可以通过 CSS 为特定 li 添加边框或边距。 // 这里我们直接添加链接。 var $catLoc = createMenuItem('cat-loc', 'By Location/地点', 'Animal cruelty cases by location', 'mw-ui-icon-minerva-listBullet'); // 使用列表符号图标 var $catSp = createMenuItem('cat-sp', 'By Species/物种', 'Animal cruelty cases by species', 'mw-ui-icon-minerva-listBullet'); var $catYr = createMenuItem('cat-yr', 'By Year/年份', 'Animal cruelty cases by year', 'mw-ui-icon-minerva-listBullet'); // --- 创建并添加 Resources 链接 --- var $resUl = createMenuItem('res-ul', 'Useful links/实用链接', 'useful links', 'mw-ui-icon-minerva-link'); // 使用链接图标 var $resDoc = createMenuItem('res-doc', 'Documentaries/纪录片', 'documentaries', 'mw-ui-icon-minerva-articles'); // 使用文章图标 var $resPsy = createMenuItem('res-psy', 'Psychological study/心理研究', 'psychological study', 'mw-ui-icon-minerva-userContributions'); // 使用用户贡献图标 (仅示例) // --- 执行插入 --- if (appendMode) { // 追加到末尾 $insertAfterElement.append($catLoc); $insertAfterElement.append($catSp); $insertAfterElement.append($catYr); $insertAfterElement.append($resUl); $insertAfterElement.append($resDoc); $insertAfterElement.append($resPsy); } else { // 依次插入到 "Random" 之后 $insertAfterElement.after($resPsy); // 先插入最后一个,方便链式调用 $insertAfterElement.after($resDoc); $insertAfterElement.after($resUl); $insertAfterElement.after($catYr); $insertAfterElement.after($catSp); $insertAfterElement.after($catLoc); // 注意:jQuery .after() 插入后元素仍在原位置,所以是反序插入或者用变量跟踪上一个插入的元素 // 一个更清晰的方式可能是: // var $lastItem = $insertAfterElement; // $lastItem = $lastItem.after($catLoc).next(); // after 返回原始集合, next() 移到新插入的元素 // $lastItem = $lastItem.after($catSp).next(); // ... etc. (但上面的反序插入代码也能工作) } } else { // 如果找不到 #p-navigation,在控制台警告 console.warn('Could not find #p-navigation element to append mobile menu items.'); } });