가온 위키:기능 구현 불가-누가 해결책을 알려주세요!/리버티 스킨

< 가온 위키:기능 구현 불가-누가 해결책을 알려주세요!
Admin (토론 / 기여)님의 2022년 12월 19일 (월) 18:20 판 (로고 짤림 추가)

이 문서는

다양한 오류/버그/개선사항들 중에서 리버티 스킨에서 일어나는 문제 중 해결한 경우를 해결책과 함께 보실 수 있습니다.

각 문단에는 문제점과 해결방안에 대해 적혀져 있으므로, 해당하는 파일을 수정하시길 바랍니다.

이 문서에서 사용하는 변경사항은 가온 위키/가온 위키 베타 모두 작용되어 있습니다.

버전에 따라 줄수가 다르거나 없을 수도 있다는 점 참고바랍니다.

최근바뀜에서 문서명에 / 가 포함되어 있으면, 오류 뜨는 경우

  1. 같은 스킨을 쓰는 리브레 위키에서는 잘 되던데... 서버 설정 오류인가?
  2. 퀴플위키에서 해결책을 찾았다. 감사합니다. 퀴플위키![1]

수정 전

  • 리버티 스킨/js 폴더에 있는 live-recent.js를 수정한다.
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.config.get( 'wgArticlePath' ) ).replace( '$1', encodeURIComponent( item.title ) ) + '" title="' + item.title + '">[' + timeFormat( time ) + '] ';
				text = '';
				if ( item.type === 'new' ) {
					text += '[New]';
				}
				text += item.title;
				if ( text.length > 13 ) {
					text = text.substr( 0, 13 );
					text += '...';
				}


수정 후

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.config.get( 'wgArticlePath' ) ).replace( '$1', encodeURI( item.title ) ) + '" title="' + item.title + '">[' + timeFormat( time ) + '] ';
				text = '';
				if ( item.type === 'new' ) {
					text += '[New]';
				}
				text += item.title;
				if ( text.length > 13 ) {
					8 = text.substr( 0, 13 );
					text += '...';
				}


  1. 59번째 줄의 encodeURIComponent( item.title ) )에서 encodeURIComponent를 encodeURI로 변경

로그인시 '이러한 명령이 없습니다' 라는 오류 뜸

  1. 로그인시, 특히 가온 위키:대문 문서가 아닌 다른 문서를 보다가 상단의 로그인 아이콘을 눌러 로그인 시도시 심심치 않게 '이러한 명령이 없습니다'라는 오류가 발생한다.
  2. 오류 내용을 자세히 보면, 'URL에 지정한 명령이 올바르지 않습니다. URL을 잘못 입력했거나, 올바르지 않은 링크를 따라갔을 수 있습니다. 가온 위키에 사용하는 소프트웨어의 버그일 수도 있습니다.' 라고 나타나 있다.
  3. 오류 해결은 리브레 위키 이슈 트래커에서 찾았다.

수정 전

  • 리버티 스킨에 있는 LibertyTemplate.php 파일을 수정한다.
<div class="modal-body">
						<div id="modal-login-alert" class="alert alert-hidden alert-danger" role="alert">
						</div>
						<form id="modal-loginform" name="userlogin" class="modal-loginform"
							  method="post">
							<input class="loginText form-control" id="wpName1" tabindex="1"
								   placeholder="<?php echo $skin->msg( 'userlogin-yourname-ph' )->plain() ?>" value="" name="lgname">


수정 후

<div class="modal-body">
						<div id="modal-login-alert" class="alert alert-hidden alert-danger" role="alert">
						</div>
						<form id="modal-loginform" name="userlogin" class="modal-loginform"
							  method="post" onsubmit="return LoginManage();">
							<input class="loginText form-control" id="wpName1" tabindex="1"
								   placeholder="<?php echo $skin->msg( 'userlogin-yourname-ph' )->plain() ?>" value="" name="lgname">


어두운 모드 사용시 표가 있는 부분의 배경색이 검정색이 되지 않는 버그

hunhee님이 알려주셨어요!

리버티 스킨 루트 폴더에 있는 "SkinLiberty.php" 파일을 열어서 수정합니다.

수정 전

$LibertyDarkCss = "body, .Liberty, .dropdown-menu, .dropdown-item, .Liberty .nav-wrapper .navbar .form-inline .btn, .Liberty .content-wrapper .liberty-sidebar .liberty-right-fixed .live-recent .live-recent-header .nav .nav-item .nav-link.active, .Liberty .content-wrapper .liberty-content .liberty-content-main table.wikitable tr > th, .Liberty .content-wrapper .liberty-content .liberty-content-main table.wikitable tr > td, table.mw_metadata th, .Liberty .content-wrapper .liberty-content .liberty-content-main table.infobox th, #preferences fieldset:not(.prefsection), #preferences div.mw-prefs-buttons, .navbox, .navbox-subgroup, .navbox > tbody > tr:nth-child(even) > .navbox-list{
			background-color:#000;
			color: #DDD;
		}

수정 후

$LibertyDarkCss = "body, .Liberty, .dropdown-menu, .dropdown-item, .Liberty .nav-wrapper .navbar .form-inline .btn, .Liberty .content-wrapper .liberty-sidebar .liberty-right-fixed .live-recent .live-recent-header .nav .nav-item .nav-link.active, .Liberty .content-wrapper .liberty-content .liberty-content-main table.wikitable tr > th, .Liberty .content-wrapper .liberty-content .liberty-content-main table.wikitable tr > td, table.mw_metadata th, .Liberty .content-wrapper .liberty-content .liberty-content-main table.infobox th, #preferences fieldset:not(.prefsection), #preferences div.mw-prefs-buttons, .navbox, .navbox-subgroup, .navbox > tbody > tr:nth-child(even) > .navbox-list, table.wikitable{
			background-color:#000!important;
			color: #DDD;
		}
  • 138번째 줄의 "{" 바로 앞에 ", table.wikitable"을 붙히고, 139번째 줄에서 "#000" 다음에 "!important"을 붙힌다.

모바일에서 가로로 긴 표가 화면을 넘어갈때 좌우 스크롤 되도록

모바일에서 위키를 볼때 거의 대다수가 세로로 보는데, 가끔 보면 표가 가로로 긴 경우들이 있어요. 스킨 기본값은 짤린 상태로 표시되는데요. 좌우 스크롤을 할 수 있도록 개선해 보아요.

수정할 파일은 스킨 폴더 → css 폴더 안에 있는 wiki-table.css 파일이에요.

수정 전

.Liberty .content-wrapper .liberty-content .liberty-content-main table.wikitable {
	width: auto;
}

수정 후

.Liberty .content-wrapper .liberty-content .liberty-content-main table.wikitable {
	width: auto;
	display: block;
	overflow-x: auto;
}

"width: auto;" 밑에 "display: block;""overflow-x: auto;"을 추가합니다.

광고 추가하기

리버티 스킨 저장소에 광고를 다는 방법에 대해 설명되어 있지만, 매우 불친절하게 알려져 있어 추가하기가 쉽지 않습니다. 아래는 저장소에 적혀져 있는 광고 추가 방법의 예제입니다.

array( 'client' => '(Google Adsense에서 제공한 값)', 'header' => '1234567890', 'right' => '0987654321', 'belowarticle' => 1313135452 )

'client' 부분은 "Google Adsense에서 제공한 값"이라고 적혀져 있기 때문에 어렵지 않게 입력할 수 있지만, 이후의 'header', 'right', 'belowarticle' 부분은 임의의 숫자로 적혀져 있어 어떤것인지 알기 매우 어렵습니다.

리브레 위키측에 문의를 해도 이슈트래커에 확인하라고 하고, 이슈트래커에 문의하니 README.md 내용을 보라고 하니...

'header', 'right', 'belowarticle' 부분은 data-ad-slot 부분을 입력하면 됩니다.

로고 짤림 문제 해결

$wgLibertyNavBarLogoImage로 로고 파일의 위치를 지정할 수 있게 되었는데, 로고의 크기가 원본 이미지 파일(리브레 위키 로고)와 동일하지 않고 크면 짤리는 문제가 있다. 이를 해결했다.

수정 전

SkinLiberty.php 파일을 수정한다.

if ( isset( $wgLibertyNavBarLogoImage ) ) {
			$out->addInlineStyle(
				".Liberty .nav-wrapper .navbar .navbar-brand {
					background: transparent url($wgLibertyNavBarLogoImage) no-repeat scroll left center/auto 1.9rem;
				}"
			);
		}

수정 후

151번째 줄에 background-size: contain;를 입력한다.

if ( isset( $wgLibertyNavBarLogoImage ) ) {
			$out->addInlineStyle(
				".Liberty .nav-wrapper .navbar .navbar-brand {
					background: transparent url($wgLibertyNavBarLogoImage) no-repeat scroll left center/auto 1.9rem;
					background-size: contain;
				}"
			);
		}

그러면 크기가 클 경우, 이미지를 자동으로 맞춰준다.

분기

각주

  1. 최신 버전 기준이다.
• 현재 페이지 URL 줄이기