도움말:사용자 자바스크립트: 두 판 사이의 차이

2020년 10월 24일 (토) 21:32 판

리브레 위키를 비롯한 미디어위키 기반의 위키에서는 사용자 환경설정에서 특정한 기능을 제공하는 사용자 고유의 자바스크립트를 삽입하는 기능을 지원하고 있습니다. 이 문서는 이러한 자바스크립트를 사용하는 방법과 그 예제에 대해 올리는 곳입니다.

사용 방법

특:내사용자문서/common.js에 자신이 원하는 기능을 제공하는 자바스크립트 코드를 넣으면 사용할 수 있습니다.

특정 스킨에만 적용되게 사용자 자바스크립트를 적용할 수도 있습니다. "사용자:(계정 필요)/(스킨 식별자, 기본 스킨의 경우 liberty).js" 문서에 코드를 작성하면 됩니다.

이미 있는 스크립트 파일을 사용하실 때에는 mw.loader.load('//(자바스크립트의 주소)');를 입력해주시면 됩니다. 단, 미디어위키 문서를 불러오실 때는 ?action=raw&ctype=text/javascript를 주소 뒤에 붙여주셔야 작동합니다.

미디어위키 내부 인터페이스

이와 관련한 내용은 mw:Manual:Interface/JavasSript에서 볼 수 있습니다.

이와 관련한 내용은 도움말:미디어위키 API에서 볼 수 있습니다.

미디어위키는 기본적인 DOM 자바스크립트와 JQuery 문법을 기본적으로 제공합니다. 그 외에도 미디어위키에서는 문서 자체의 정보를 긁어올 수 있는 mw 오브젝트를 포함해서 여러 오브젝트를 지원하고 있습니다.

예시 - mw.config.get('(속성)')을 통해 지금 읽고 있는 문서의 정보를 긁어오실 수 있습니다. 아니면 그냥 아래 속성명을 직접 입력해도 확인할 수 있지만 추천문법은 아닙니다. 속성 관련 표

미디어위키 전역 내부 속성
속성	설명
skin	현재 사용하고 있는 스킨 이름을 확인할 수 있습니다.
wgArticlePath	현재 위키의 문서 경로명을 확인할 수 있습니다. 리브레 위키에서는 "wiki/$1"형식으로 출력됩니다.
wgNamespaceIds	현재 위키가 사용하고 있는 이름공간의 명칭과 번호를 오브젝트 형식으로 확인할 수 있습니다.

미디어위키 각 문서별 속성
속성	설명
wgAction	현재 미디어위키 문서에서 사용하는 동작을 확인합니다. 문서를 볼 때는 'view', 문서를 편집할 때는 'edit'이 출력됩니다.
wgArticleId	현재 페이지의 id값을 출력합니다.
wgCategories	현재 문서의 분류 목록을 출력합니다.
wgNamespaceNumber	현재 문서의 이름공간 번호를 출력합니다.
wgPageName	이름공간 포함한 전체 문서명을 출력합니다.
wgRestrictionEdit	편집이 제한된 문서의 경우 편집 가능한 권한을 출력합니다.
wgRestrictionMove	이동이 제한된 문서의 경우 이동 가능한 권한을 출력합니다.
wgRevisionId	현재 문서의 최신판 ID를 출력합니다.
wgTitle	이름공간을 제외한 문서명을 출력합니다.

사용자 관련 속성
속성	설명
wgUserEditCount	편집횟수를 기록합니다.
wgUserGroups	사용자가 소속된 그룹을 보여줍니다.
wgUserName	사용자 계정명을 출력합니다.

유용한 외부 자바스크립트

외부 스크립트를 가져다 쓸 수 있습니다. 다만, 외부에서 자바스크립트를 불러오는 것은 해당 내용이 변경되었을 때 부정적인 영향^[1]을 받으실 수 있기 때문에 주의하실 필요가 있습니다.

주석^[2]을 이용하면 향후 유지보수가 편해질 수 있습니다.

더 많은 정보는 Wikipedia:Wikipedia:User scripts를 참조하시면 됩니다.

/* 토론 문서에서 편집 시에 서명하지 않을 경우 경고 메시지를 출력하는 스크립트입니다. 한위백 IRTC1015님이 작성 */
mw.loader.load('//ko.wikipedia.org/w/index.php?title=User:IRTC1015/qSig.js&action=raw&ctype=text/javascript');

예제

코드가 상당히 길기에 {{숨김 시작}} 틀을 이용해서 내용을 숨겨주시기 바랍니다. 사용하실 때에는 상자 안에 있는 코드 전체를 복사한 뒤에 사용자 자바스크립트에 붙여넣기 하시면 적용이 됩니다.

문서 위/아래 버튼

화면 왼쪽 아래에 맨 위로 올리거나 맨 아래로 내리는 버튼을 삽입할 수 있습니다.

{{숨김 시작}}이나 {{숨기기}} 등의 기능을 사용할 경우 숨긴 내용을 풀 경우 맨 아래로 내리는 기능이 올바르게 작동하지 않을 수 있습니다.

맨 위로 가기/맨 아래로 가기 버튼 만들기

/* 
이 스크립트는 Minecraft Wiki의 Majr의 goToTop.js를 
(http://minecraftwiki.net/wiki/User:Majr/goToTop.js/)
리브레 위키의 사용자 Utolee90이 재가공해서 만들었습니다.
*/
/* 위로 올라가는 버튼을 만듭니다. */
$( function() {
'use strict';

$( 'body' ).append( '<span id="to-top">▲ 위</span>' );
var $topButton = $( '#to-top' );

$topButton.css( {
        'font-size' : '14pt',
        'background-color' : '#0077ff',
	'color': '#FFF',
	'position': 'fixed',
	'bottom': '-30px',
	'left': '4px',
	'cursor': 'pointer',
	'transition': 'bottom 0.5s',
	'-webkit-transition': 'bottom 0.5s',
	'user-select': 'none',
	'-webkit-user-select': 'none',
	'-moz-user-select': 'none',
	'-ms-user-select': 'none'
} ).click( function() {
	$( 'html, body' ).animate( { scrollTop: 0 }, 'slow' );
} );
/* 위에서 100픽셀 이내에 있으면 위 버튼을 숨깁니다. */
$( window ).scroll( function() {
	if ( $( window ).scrollTop() > 100 ) {
		$topButton.css( 'bottom', '4px' );
	} else {
		$topButton.css( 'bottom', '-30px' );
	}
} );
} );
/* 아래 버튼을 만듭니다. */
$( function() {
'use strict';

$( 'body' ).append( '<span id="to-bottom">▼아래</span>' );
var $bottomButton = $( '#to-bottom' );
var height=document.body.scrollHeight;
var hminus=height-window.innerHeight-"100";
$bottomButton.css( {
        'font-size':'14pt',
        'background-color':'#0077ff',
	'color': '#FFF',
	'position': 'fixed',
	'bottom': '-30px',
	'left': '42pt',
	'cursor': 'pointer',
	'transition': 'bottom 0.5s',
	'-webkit-transition': 'bottom 0.5s',
	'user-select': 'none',
	'-webkit-user-select': 'none',
	'-moz-user-select': 'none',
	'-ms-user-select': 'none'
} ).click( function() {
	$( 'html, body' ).animate( { scrollTop:height}, 'slow' );
} );
/*아래에서 100픽셀 이내이면 아래 버튼을 숨깁니다. */
$( window ).scroll( function() {
	if ( $( window ).scrollTop () <hminus ) {
		$bottomButton.css( 'bottom', '4px' );
	} else {
		$bottomButton.css( 'bottom', '-30px' );
	}
} );
} );

Vector 스킨에서 우측 최근 바뀐 문서 보여주는 상자 만들기

특수:내사용자문서/vector.js에 아래 코드를 삽입할 경우 Vector(벡터) 스킨을 사용할 때 Liberty 스킨의 최근 바뀐 문서를 한눈에 보여주는 상자를 삽입하실 수 있습니다. 현재 디자인이나 코딩 최적화가 부족한 점 양해해주시기 바랍니다. 참조. Liberty 스킨의 최근 바뀜 상자를 만들어주는 live-recent.js 코드를 이용해서 재구성했습니다.

원인 미상의 오류로 인해 특수:내사용자문서/vector.js에 직접 아래 소스를 붙여놓으면 자바스크립트가 제대로 작동하지 않습니다. 하위 문서에 아래 소스를 붙여넣은 뒤 mw.loader.load 명령어를 붙여넣거나 아니면 아래 코드를 특수:내사용자문서/vector.js에 붙여넣으시면 됩니다. 그러면 벡터 스킨을 기본 스킨으로 지정할 경우 최근에 편집한 문서를 보여주는 상자를 띄울 수 있습니다.

mw.loader.load('https://librewiki.net/index.php?title=사용자:Utolee90/recentchange.js&action=raw&ctype=text/javascript');

Vector 스킨에서 최근 바뀐 문서 한눈에 확인하는 상자 만들기

$("span#pageuseskin").text("Vector");
var $need_margin = Math.min(Math.max(0, 1510-parseInt(window.innerWidth)),190) //1510픽셀 이상일 때는 여백 0, 최대 190픽셀만 여백 지정

if(parseInt(window.innerWidth)>800){ //본문 내용이 800픽셀 이상일 때에만 최근바뀜 상자가 나타나게... 아래는 HTML 구성
//최근 바뀜 목록 보이기 - 출처 : https://github.com/librewiki/liberty-skin/blob/master/js/live-recent.js
$('#content').css("margin-right", String($need_margin)+'px'); // 800px 이상일 때만 여백 나타나게 지정
$( function () {
$( 'body' ).append('<div class="libre_recent"><div id="libre_recent-tabs"><div id="recenttext" class="selected">최근 문서</div><div id="recenttalk">최근 토론</div></div><div id = "recent-list-div"><div class="live-recent-content"><ul class="live-recent-list docupage" id="live-recent-list"><li class="recent-item-background"><span class="recent-item">1</span></li><li class="recent-item-background"><span class="recent-item">2</span></li><li class="recent-item-background"><span class="recent-item">3</span></li><li class="recent-item-background"><span class="recent-item">4</span></li><li class="recent-item-background"><span class="recent-item">5</span></li><li class="recent-item-background"><span class="recent-item">6</span></li><li class="recent-item-background"><span class="recent-item">7</span></li><li class="recent-item-background"><span class="recent-item">8</span></li><li class="recent-item-background"><span class="recent-item">9</span></li><li class="recent-item-background"><span class="recent-item">10</span></li></ul></div><div class="recent-more"><span class="mw-editsection-bracket">[</span><a href="//librewiki.net/wiki/특수:최근바뀜" title="최근바뀜문서">more</a><span class="mw-editsection-bracket">]</div></span></div>' ); //HTML 삽입. <li>개수에 따라 아이템 갯수 조절 가능
//기초 css 지정
$('.libre_recent').css({"position":"fixed","top":"15%","right":"10px"});
$('#libre_recent-tabs').css({"display":"flex", "padding":"3px", "border":"1px solid grey", "width":"180px", "background":"#ddf"});
$('#recenttext').css({"padding":"3px", "flex":"1", "background":"#417ff3", "color":"white", "font-weight":"bold"});
$('#recenttalk').css({"padding":"3px", "flex":"1", "background":"white", "font-weight":"bold"});
$('#recent-list-div').css({"width":"180px", "position":"fixed", "top":"auto", "right":"10px"});
$('.live-recent-list.docupage').css({"display":"block", "list-style-type": "none", "padding": "0", "margin": "0"});
$('.live-recent-content').css({"border":"1px solid grey", 'background':'#eee'});
$('.live-recent-list.docupage>li').css({"border-collapse":"collapse"});
$('.live-recent-list.docupage>li:nth-of-type(odd)').css({"background":"#ddd"});
$('.live-recent-list.docupage>li:nth-of-type(even)').css({"background":"#eee"});
$('.recent-more').css({"border":"1px solid grey", "width":"180px", "background":"#eee"});

//가로폭이 좁으면 content 내용 좁히기.
	'use strict';
	var articleNamespaces, talkNamespaces, isArticleTab, limit; //변수 지정
	articleNamespaces = '0|4|10|12|14|1600|1602'; // 문서 페이지 네임스페이스 번호 지정 가능
	talkNamespaces = '1|5|7|9|11|13|15|829|1601|1603|2600'; //토론 페이지 네임스페이스 번호 지정가능
	isArticleTab = true;  //문서 탭이 초기일 때 
	limit = $( '#live-recent-list' )[ 0 ].childElementCount; // id가 live-recent-list인 ul의 자식 원소인 li 갯수만큼 추출

	function timeFormat( time ) { //시간 출력형태 결정
		var aDayAgo, hour, minute, second;
		aDayAgo = new Date(); 
		aDayAgo.setDate( aDayAgo.getDate() - 1 ); //하루 전의 같은 시간 표시
		if ( time < aDayAgo ) { //만일 하루전보다 시간이 지날 경우
			return ( time.getFullYear() ) + '/' + ( time.getMonth() + 1 ) + '/' + time.getDate();
		} //시간 대신 날짜로 표시
		hour = time.getHours(); 
		minute = time.getMinutes();
		second = time.getSeconds();
		if ( hour < 10 ) { //10보다 작으면 강제로 십의 자리에 0을 끼운다.
			hour = '0' + hour;
		}
		if ( minute < 10 ) {
			minute = '0' + minute;
		}
		if ( second < 10 ) {
			second = '0' + second;
		}
		return hour + ':' + minute + ':' + second;
	}

	function refreshLiveRecent() {
		var getParameter;
		if ( !$( '#live-recent-list' ).length || $( '#live-recent-list' ).is( ':hidden' ) ) {
			return; //길이가 정의 불가능이거나 내용이 숨겨져 있을 경우 내용을 출력 안 함. 
		}
		getParameter = { //쿼리 지정할 수 있습니다.
			action: 'query',
			list: 'recentchanges', 
			rcprop: 'title|timestamp', //긁어오는 정보 - 제목, 편집시간
			rcshow: '!bot|!redirect', //봇 편집, 넘겨주기는 제외
			rctype: 'edit|new', //편집, 새문서 
			rclimit: limit, //긁어오는 문서 숫자 - limit으로 지정
			format: 'json', //json으로 api 긁어오기
			rcnamespace: isArticleTab ? articleNamespaces : talkNamespaces, //보여줄 이름공간 지정
			rctoponly: true
		};
		var api = new mw.Api();
		api.get( getParameter )
			.then( function ( data ) {
				var recentChanges, html, time, line, text;
				recentChanges = data.query.recentchanges;
				html = recentChanges.map( function ( item ) {
					time = new Date( item.timestamp );
					line = '<li><a class="recent-item" href="' + mw.util.getUrl( item.title ) + '" title="' + item.title + '">[' + timeFormat( time ) + '] ';
					text = '';
					if ( item.type === 'new' ) {
						text += '[新]'; //새문서 지정
					}
					text += item.title;
					if ( text.length > 13 ) {
						text = text.substr( 0, 13 );
						text += '...';
					}
					//text = text.replace( '[New]', '<span class="new">' + mw.msg( 'liberty-feed-new' ) + ' </span>' ); //미작동하므로 코드 비활성화
					line += text;
					line += '</a></li>';
					return line;
				} ).join( '\n' );
				$( '#live-recent-list' ).html( html );
			})
			.catch( function () {} );
	}
//isArticleTab 바꿔주기

//클릭 시 표시되는 내용 지정
var rtext=$('#recenttext');
var rtalk=$('#recenttalk');
rtext.click(function(){rtext.css({"background":"#417ff3", "color":"white"}); rtalk.css({"background":"white", "color":"black"}); isArticleTab = true; refreshLiveRecent(); }); //최근문서 배경색 파랗게, 최근문서  내용 보이고 최근토론 내용 숨김
rtalk.click(function(){rtext.css({"background":"white", "color":"black"}); rtalk.css({"background":"#417ff3", "color":"white"}); isArticleTab = false; refreshLiveRecent(); } ); //최근토론 배경색 파랗게, 최근문서  내용 숨기고 최근토론 내용 보임
           

	setInterval( refreshLiveRecent, 5 * 60 * 1000 );
	refreshLiveRecent(); 
} );

}

편집 요약창 아래 편집요약 상용구 입력 버튼 추가

편집창 아래 편집요약 상용구 입력 버튼 추가

/* 한국어 위키백과 미디어위키:Gadget-editsummary.js 호출. 사용자:Utolee90/Addbutton.js 참조 */

function esEditSummary() {
	if (typeof esEditSummaries === 'undefined') return;
	var wgAction = mw.config.get('wgAction');
	if (wgAction == 'edit' || wgAction == 'submit') {
		var wpSummary = document.getElementById('wpSummary');
		if (!wpSummary || (wpSummary.form.wpSection && wpSummary.form.wpSection.value == 'new')) return;
		wpSummaryButtons = document.createElement('span');
		wpSummaryButtons.id = 'esSummaryButtons';
		wpSummary.parentNode.insertBefore(wpSummaryButtons, wpSummary.nextSibling);
		for (var i = 0; i < esEditSummaries.length; i++) esAppendButton(i);
	}
}

function esAppendButton(id) { // 버튼 추가하는 함수
	var btn = document.createElement('esSummaryButton');
	btn.appendChild(document.createTextNode(esEditSummaries[id][0]));
	btn.title = esEditSummaries[id][2];
	btn.onclick = function() {esInsertSummary(esEditSummaries[id][1], esEditSummaries[id][3], esEditSummaries[id][4])};
	wpSummaryButtons.appendChild(btn);
}

function esInsertSummary(text, isMinor, clear) {
	var wpSummary = document.getElementById('wpSummary');
	if (isMinor !== undefined) { $('#wpMinoredit').prop('checked', isMinor, clear); }
	if (clear == 1) {
		wpSummary.value = text;
		return;
	}
	if (wpSummary.value.indexOf(text) != -1) return ;
	if (wpSummary.value.match(/[^,; \/]$/)) wpSummary.value += ',';
	if (wpSummary.value.match(/[^ ]$/)) wpSummary.value += ' ';
	wpSummary.value += text;
}

jQuery( document ).ready(esEditSummary);

esEditSummaries = new Array(

/*
new Array('버튼 이름', '입력될 편집 요약', '툴팁으로 뜨는 설명(생략 가능)', '사소한 편집 여부(0/1 혹은 true/false, 생략 가능)', '상용구 넣기 전에 요약 지우기(0/1 혹은 true/false, 생략 가능)')
위와 같은 형식으로 새로운 버튼을 추가할 수 있습니다.
마지막 줄을 제외한 줄 끝에 쉼표가 들어가 있는지 확인해 주세요.
*/
// 예시 - 
    new Array('오타','오타 수정','문서에서 오타를 정정함', 0, 1)

);

사용자 활동 상태를 알려주는 스크립트

아래의 코드 혹은

mw.loader.load('//librewiki.net/index.php?title=사용자:Utolee90/status.js&action=raw&ctype=text/javascript');

를 특수:내사용자문서/common.js에 입력하시면 div 태그 안에 사용자 문서의 주인의 편집상태를 확인할 수 있습니다.

사용자 활동 상태 알려주기

// 소스 원본 : 사용자:Utolee90/status.js
// 사용 방법 : 다음 소스코드를 "특수:내사용자문서/common.js" 에 복사하시면 사용자 문서의 주인의 현재 편집 상태 또는 차단 여부를 확인하실 수 있습니다. 
// mw.loader.load('//librewiki.net/index.php?title=사용자:Utolee90/status.js&action=raw&ctype=text/javascript');

let username = mw.config.get('wgTitle').split("/")[0];
var params = {
		action: 'query',
		list: ['blocks','recentchanges'] ,
                utf8 : 1,
                bkusers : username,
                bklimit: '1',
		rclimit: '1',
                rcuser: username,
		format: 'json'
	},
	api = new mw.Api(); // api 얻기

api.get( params ).done( function ( data ) {
        var bk = data.query.blocks; // 차단 목록 확인
        var rc = data.query.recentchanges; //최근 바뀜 목록 확인
        if (mw.config.get('wgNamespaceNumber') == 2) {
        if (bk.length != 0) { // 차단 목록이 존재할 때...
        var bkt = (bk[0].expiry == 'infinity')? 'infinity' :new Date(bk[0].expiry);
        var bktstring = (bkt == 'infinity')? '무기한': (bkt.getFullYear()+'년 '+(bkt.getMonth()+1)+'월 '+(bkt.getDate())+'일')
        $('#mw-content-text').prepend('<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Stop_x_nuvola.svg/40px-Stop_x_nuvola.svg.png" width=40 /> <span class="status-text">차단된 사용자&nbsp;&nbsp;</span> <small>차단기한 : '+bktstring);
        }
        else if (rc.length == 0){ // 최근 바뀜 폭록이 없을 때
        $('#mw-content-text').prepend('<img src="https://image.librewiki.net/f/f9/Ledibug2.png" width=40 /> <span class="status-text">3개월간 활동하지 않는 사용자.</span>');
}
        else {
        var x = rc[0].timestamp; // 마지막 편집 시간 확인
        var at = new Date(x); //시간 데이터 추출
        var now = new Date().getTime(); //현재시간 getTime
        if (now-at.getTime() <=3600*1000){ // 마지막 편집이 최근 1시간 이후.
          $('#mw-content-text').prepend('<img src="https://image.librewiki.net/4/47/Ledibug-Louis-Fact.png" width=40 /> <span class="status-text">편집중&nbsp;&nbsp;</span> <small>마지막 편집 시간 :'+' '+at.getHours()+'시 '+at.getMinutes()+'분</small>');
         }
        else if(now-at.getTime()<=24*3600*1000) { // 마지막 편집이 최근 24시간 이전 
        $('#mw-content-text').prepend('<img src="https://image.librewiki.net/8/8b/Ledibug-Lucy-False.png" width=40 /> <span class="status-text">휴식중&nbsp;&nbsp;</span><small>마지막 편집 시간 :'+at.getHours()+'시 '+at.getMinutes()+'분</small>');
         }
        else { 
       $('#mw-content-text').prepend('<img src="https://image.librewiki.net/8/8b/Ledibug-Lucy-False.png" width=40 /> <span class="status-text">휴식중&nbsp;&nbsp;</span> <small>마지막 편집 날짜 :&nbsp;'+(at.getMonth()+1)+'월 '+(at.getDate())+'일</small>');
      }
} 
}
}
);

각주

↑ 계정이 탈취되거나 위키를 정상적으로 이용할 수 없게 되는 등
↑ /*와 */ 사이에 내용을 쓰면 사이의 내용이 주석 처리 되고, //를 사용하면 해당 줄에서 이후 모든 텍스트가 주석처리 됩니다.

[1] 계정이 탈취되거나 위키를 정상적으로 이용할 수 없게 되는 등

[2] /*와 */ 사이에 내용을 쓰면 사이의 내용이 주석 처리 되고, //를 사용하면 해당 줄에서 이후 모든 텍스트가 주석처리 됩니다.

[1]

[2]

보기 • 편집 리브레 위키 도움말
기초 사용법	기초 도움말 리브레 위키 사용법 화면 살펴보기 편집 시작하기 좋은 글 쓰기 서명 파일 올리기
위키 문법	문법 표 틀 TeX TeX 글꼴형 문자 TeX 특수문자 특수 명령문 입력 상자 모듈
특수 기능	사용자 JS 사용자 CSS 미디어위키 API 미디어위키 쿼리 분류 트리 키보드 단축키 상세 검색