MediaWiki의 이동을 Skin "Minerva Neue"의 옆 메뉴로 편집하는 방법

위키백과에서도 실행 중인 Mediawiki에서는 모바일 디스플레이를 Skin'MinervaNeue'로 사용할 때 옆쪽 메뉴를 편집하는 방법을 정리했다.
인터넷 검색을 하면 Skin/MinervaNeue 디렉터리의 아무리 CSS를 편집해도 정보가 나오지만 2020년이 끝날 무렵 이미 그 파일의 구성이 바뀌어 참고할 수 없다.
MediaWiki 매뉴얼Manual:Interface/Sidebar도 안 썼고Skin:Minerva Neue도 안 썼고 간신히 포럼에 갔던Topic on Extension talk:MobileFrontend 마침내 예를 찾아 공유했다.
구체적으로 관리자 사용자는 MediaWiki:Mobile.js 페이지를 편집할 수 있다.
작업 환경

MediaWiki 1.35.0

Mobile.js 편집

/* Add to MediaWiki:Mobile.js for custom Mobile Menu links 
for MW-1.34.2 with MobileFrontend and MinervaNeue 
Just replace span text and href to add links */

var timer = setInterval(function() {
     if ($('.menu ul:first').length) {
         console.log("mobile menu exists");
         clearInterval(timer);
         $('.menu ul:first').after(
               '<ul class="level1"> \
                    <li> \
                    <a href="#" \
                          class="mw-ui-icon mw-ui-icon-before mw-ui-icon-minerva-watchlist"> \
                    <span>Dropdown Links</span> \
                    </a> \
                    </li> \
                    <ul class ="level2"> \
                         <li> \
                         <a href="/wiki/Link_1" \
                               class="mw-ui-icon mw-ui-icon-before"> \
                         <span>Link 1</span> \
                         </a> \
                         </li> \
                         <li> \
                         <a href="/wiki/Link_2" \
                               class="mw-ui-icon mw-ui-icon-before"> \
                         <span>Link 2</span> \
                         </a> \
                         </li> \
                         <li> \
                         <a href="/wiki/Link_3" \
                               class="mw-ui-icon mw-ui-icon-before"> \
                         <span>Link 3</span> \
                         </a> \
                         </li> \
                    </ul> \
               </ul> \
               <ul> \
                    <li> \
                    <a href="/wiki/Second_Link" \
                          class="mw-ui-icon mw-ui-icon-before mw-ui-icon-minerva-watchlist"> \
                    <span>Second Link</span> \
                    </a> \
                    </li> \
               </ul>'
          );
          $(".menu").find(".level2").hide(); // hide level2 until level1 is clicked
          $(".level1").click(function(event){ 
               $(this).find(".level2").slideToggle(500);
          }); // if level1 is clicked, dropdown level2
     }
}, 100); // check every 100ms

샘플 보기

(Produced by Knomanii, 2020, CC BY-SA 4.0 )
조금 설명해 주세요.$('.menu ul:first').after(<ul> 및<li> 요소를 둘러친 내용에 넣고 메뉴를 만드는 요소.지정<ul class="level1">, <ul class="level2"> 등class으로 드롭다운 메뉴를 훈련할 수 있다.
아이콘 목록

Bell: mw-ui-icon-wikimedia-bellOutline-base20

Download: mw-ui-icon-minerva-download

Expand: mw-ui-icon-mf-expand

Edit: mw-ui-icon-wikimedia-edit-base20

Edit lock: mw-ui-icon-wikimedia-editLock-base20

History: mw-ui-icon-wikimedia-history-base20

Language: mw-ui-icon-wikimedia-language-base20

Map pin: mw-ui-icon-minerva-mapPin

Search: mw-ui-icon-wikimedia-search-base20

Star: mw-ui-icon-wikimedia-star-base20

Star (solid blue): mw-ui-icon-wikimedia-unStar-progressive

참고 자료

Topic on Extension talk:MobileFrontend

라이선스
이 글은 CCBY4.0 라이선스에서 사용할 수 있다.