본문 바로가기

작업 공간/프로그래밍 [GCP] 위키 사이트를 만들어 보자 <2>

by 서울나기 2020. 2. 10.
앞 포스팅에 이어서 위키 추가 설정을 해보겠습니다. 여기서 포스팅을 한 내용만 있어도 충분히 위키를 활용할 수 있지만, 개인 용도에 따라 추가적으로 기능을 붙이면 됩니다. 인터넷에서 '미디어 위키 확장 기능'을 검색해 보면 더 많은 자료를 찾아보실 수 있습니다.

미디어 위키 폴더 위치

서버 환경마다 다른 설치 위치를 가지고 있겠지만 GCP x Bitnami의 위키 설치 폴더는 아래와 같습니다.

 

미디어 위키 설치 폴더

/home/bitnami/apps/mediawiki/htdocs/

확장 기능

설치 폴더/extensions

기본으로 깔려있는 확장 기능

스킨

설치 폴더/skins

미디어 위키 설정 파일

설치 폴더/LocalSettings.php


로고 바꾸기

Liberty 스킨의 로고는 /skin/img/logo.png를 수정하면 됩니다. ssh로 접속해 로고 파일의 퍼미션을 777로 바꿔주고 FTP를 이용하여 로고를 바꿔 주세요. 바꾼 뒤에는 원래 퍼미션인 664로 다시 돌려놔야 합니다.

 

GCP에서 FTP 사용법은 아래 포스팅을 참고하시면 됩니다.

 

[GCP] 구글 클라우드 플랫폼에서 SFTP 사용하기

구글 클라우드 플랫폼은 말 그대로 호스팅이 아닌 가상 서버를 빌려주는 것이기 때문에 사용자가 뒷단에서 몇가지 작업을 해줘야 합니다. 클라우드 서버에 FTP 연결을 하는 방법입니다. 이렇게 연결하더라도 퍼미..

artnfear.com


미디어 위키 이름 바꾸기

메인의 LocalSettings.php 파일을 열어 다음 부분을 수정합니다.

$wgSitename = "원하는 위키 이름";
$wgMetaNamespace = "원하는 위키 이름";

메뉴바 색상 변경

메인의 LocalSettings.php 파일을 열어 마지막에 아래 문장을 추가합니다. 따옴표 안에 원하는 색을 적어주면 됩니다.

$wgLibertyMainColor = "#5b6275";

위키 에디터 설치

마찬가지로 LocalSettings.php 파일을 열어 마지막에 아래 문장을 추가합니다. 최신 버전의 미디어 위키를 설치하면 기본으로 위키 에디터가 설치되어 있습니다.

wfLoadExtension( 'WikiEditor' );

에디터가 있으면 위키 작성이 편리해집니다.


인용 기능 추가

인용 확장 기능도 최신 버전의 미디어 위키에 기본으로 설치되어 있습니다. 위에서와 마찬가지로 LocalSettings.php 파일에 아래 문장을 추가해주면 됩니다.

wfLoadExtension( 'Cite' );

인용 사용법은 아래 페이지를 확인하세요.

https://www.mediawiki.org/wiki/Help:Cite/ko


소도구 추가

위키를 다채롭게 쓰기 위해 자바스크립트와 CSS로 제작된 소도구를 사용할 수 있습니다. LocalSettings.php에 아래 명령어를 붙여 넣기 하면 환경 설정에서 관련 내용을 확인할 수 있습니다.

wfLoadExtension( 'Gadgets' );

소도구 정의 문서에서 소도구를 정의하고 설명 문서에서 자바스크립트나 CSS를 작성 관리합니다. 소도구의 종류에 대해서는 구글에 검색해도 되고 아래 사이트를 참고하세요.

https://www.mediawiki.org/wiki/Extension:Gadgets

 

필요한 소도구를 아래 사이트를 참고해서 소도구 정의 문서 / 소도구 설명 문서를 클릭해 필요한 부분을 복사-붙이기 하면 됩니다.

https://ko.wikipedia.org/wiki/미디어위키:Gadgets-definition

https://ko.wikipedia.org/wiki/특수:소도구

추천 소도구

/미디어위키:Gadgets-definition

* ReferenceTooltips[ResourceLoader|default]|ReferenceTooltips-ko.js|ReferenceTooltips.css
* DotsSyntaxHighlighter[ResourceLoader]|DotsSyntaxHighlighter.js
* righteditlinks[ResourceLoader|type=styles]|righteditlinks.css
* OldDiff[ResourceLoader|type=styles]|OldDiff.css
  • 주석 말풍선 - 주석 번호 위로 마우스 커서를 가리키면 주석 내용을 볼 수 있습니다.
  • 문법 강조 기능 - 편집 상자에서 구문 강조를 합니다.
  • 문서 판의 비교 차이를 볼 때 과거의 방식인 노란색/녹색으로 보여줍니다.

추가 인터페이스 설정

편집창 아래에 다양한 기호나 위키문법을 입력할 수 있는 도구 모음을 삽입합니다. 

/미디어위키:Gadgets-definition 페이지로 가서 아래 내용을 추가합니다.

* charinsert[ResourceLoader|peers=charinsert-styles]|charinsert.js
* charinsert-core[ResourceLoader|hidden|dependencies=jquery.textSelection,user,mediawiki.storage]|charinsert-core.js
* charinsert-styles[ResourceLoader|hidden|type=styles]|charinsert-styles.css

/특수:소도구 페이지로 가서 각각의 사항을 클릭해서 수정합니다.

위 4개의 링크를 수정해 줍니다.

편집 소스는 아래 페이지에서 찾아서 붙여 넣기 하면 됩니다.

https://ko.wikipedia.org/wiki/특수:소도구

 

마지막에 있는 Gadget-charinsert-styles.css 경우는 4-5줄에 아래와 같이 수정해야 가독성이 높습니다.

#specialchars {
	display: block;
	border: 1px solid #c0c0c0;
	padding: 0.3em; /* 0.3em으로 바꿔주고*/
	line-height: 2.2em; /* 이 라인을 추가합니다. */
}
#specialchars a {
	background-color: #f9f9f9;
	border: 1px solid #ddd;
	padding: 1px 4px;
}
#wpTextbox1 + #specialchars,
.wikiEditor-ui-clear + #specialchars {
	border-top: none;
}

모두 설정했으면 환경 설정 > 소도구에 가서 해당 기능을 켜야 합니다.

하단 목록 편집

미디어위키:Gadget-charinsert-core.js을 통해 에디터 아래 나오는 목록을 편집 할 수 있습니다.

 

이때 각 문장은 '띄어쓰기'로 구별됩니다. 하나의 요소안에 띄어쓰기를 하고 싶다면 . 콤마나 _ 언더바를 붙이고, 클릭시 중간에 에디터에서 드레그한 문자를 집어 넣고 싶다면 + 더하기로 표시합니다. ' 쉼표나 {{ 같은 중복 기호를 사용하고 싶다면 \를 앞에 써줍니다.

 

예시 1. == == 문단 제목을 만들고 싶을 때 == 제목 == 이런식으로 제목 앞뒤로 띄어쓰기를 넣는다고 생각해보면 ==_+_== 이렇게나 ==.+_== 이렇게도 가능합니다. 앞에서도 말했듯 +에 문단이나 커서가 들어갑니다.

 

예시 2. 변수 값을 {{{이름|값}}}을 미리 지정해서 쓰고 싶다면 {\{\{+|}}} 이런식으로 입력하면 됩니다.

 

요소를 커스텀해서 위키 문법이나 만들어둔 틀 양식을 집어넣을 수 있습니다.


위키 사용자 권한 설정

미디어 위키는 기본적으로 4가지 형태로 사용자 권한을 설정할 수 있습니다.

  • 열린 위키 : 모두에게 열린 위키입니다.
  • 계정 만들기 필요 : 로그인을 해야만 문서 생성과 편집이 가능합니다.
  • 승인된 편집자만 : 운영자가 권한을 준 회원만 문서 생성과 편집이 가능합니다.
  • 비공개 위키 : 오직 소유자만 생성/편집/글 보기를 할 수 있습니다.

아무것 설정도 없으면 기본적으로 열린 위키로 설정됩니다.

 

GCP는 설치 과정 없이 미디어 위키가 설치되기 때문에 설치 후에 아래 코드를 LocalSettings.php에 추가해서 권한 관리를 할 수 있습니다.

 

계정 만들기 필요

$wgGroupPermissions['*']['edit'] = false;

승인된 편집자만

$wgGroupPermissions['*']['edit'] = false;
$wgGroupPermissions['*']['createaccount'] = false;
오픈 위키가 아니라면 문단 번호가 로그인 전엔 안보이게 되는데 계정 만들기 필요, 승인된 편집자로 위키를 설정한 경우 아래 명령을 LocalSettings.php에 추가해야 회원이 아닌 유저도 문단 번호를 볼 수 있습니다.
$wgDefaultUserOptions['numberheadings'] = 1;

문단 번호 뒤에 . 콤마를 넣고 싶다면 아래 소스를 미디어위키:Liberty.css에 추가해줍시다.
.mw-headline-number { color: #0275d8; }
.mw-headline-number::after { content: "."; }

비공개 위키

$wgGroupPermissions['*']['edit'] = false;
$wgGroupPermissions['*']['createaccount'] = false;
$wgGroupPermissions['*']['read'] = false;

CAPTCHA 기능 추가

열린 위키는 스팸의 공격을 받거나 문서가 훼손되기 쉽기 때문에 보안을 위해 권한 설정을 바꾸고 가입 시 캡차 기능을 걸어두면 상당 부분 스팸을 걸러 낼 수 있습니다.

 

최신 버전의 미디어 위키를 설치하면 역시 기본 설치되어 있기 때문에 메인의 LocalSettings.php 파일을 열어 맨 아래에 아래 코드를 추가하도록 합니다.

wfLoadExtension( 'ConfirmEdit' );
$wgGroupPermissions['user']['skipcaptcha'] = true;
$wgGroupPermissions['bot']['skipcaptcha'] = true;
$wgGroupPermissions['sysop']['skipcaptcha'] = true;

파일 캐시 사용

파일 캐시는 위키 문서를 html로 만들어 제공합니다. DB 없이 준비된 저장된 html을 전송하기 때문에 서버 부하 감소와 속도가 빨라집니다.

$wgUseFileCache = true;
$wgFileCacheDirectory = "$IP/cache";
$wgShowIPinHeader = false;

상단 바 메뉴 추가

도구 메뉴를 만들어 봅시다.

평소에 자주 쓰는 위키 페이지를 상단 메뉴에 만들어 봅시다. 

 

/미디어위키:Liberty-Navbar 주소로 접속해 아래와 같이 입력합니다.

* icon=wrench | display=도구
** icon=cogs| display=특수 문서 목록| link=특수:특수문서
** icon=upload | display=파일 업로드 | link=특수:올리기
** icon=bar-chart| display=통계 | link=특수:통계
*Tip
미디어 위키 css를 수정하고 싶을 땐 아래 주소로 접속합니다.
/미디어위키:Liberty.css

위키 문법

위에서 위키 에디터를 설치했다면 도움말 항목으로 위키 문법을 살펴볼 수 있습니다.

 

더 자세한 사항은 아래 위키 문법 페이지를 참고하세요.

https://www.mediawiki.org/wiki/Help:Formatting/ko


나무 마크 문법

미디어 위키 문법뿐 아니라 나무 위키에서 사용하는 문법인 나무 마크도 사용할 수 있습니다. /extensions 확장 기능 폴더로 들어가 다음 git 명령어를 실행합니다.

sudo git clone https://github.com/Oriwiki/php-namumark-mediawiki NamuMark

나무 마크 확장 기능을 사용하기 위해서는 미디어 위키에 다음의 확장 기능이 포함되어야 완전히 사용할 수 있습니다.

  • EmbedVideo (유튜브, 비메오, 트위치 등등 다양한 서비스의 영상을 임베드할 수 있는 확장 기능)
  • Math 또는 SimpleMathJax (수학 공식을 표현할 수 있는 확장 기능)
  • Poem (시를 표현할 때 쓰는 확장 기능 / 기본 포함)
  • Cite (인용을 위한 확장 기능 / 기본 포함)

이제 메인 폴더에 있는 LocalSettings.php 파일을 열어 하단에 다음 소스를 입력합니다.

require_once "$IP/extensions/NamuMark/namumark.php";
$wgRawHtml = true;
$wgAllowImageTag = true;
$wgNamespacesWithSubpages[NS_MAIN] = true;
$wgNamespacesWithSubpages[NS_TEMPLATE] = true;
$wgAllowDisplayTitle = true;
$wgRestrictDisplayTitle = false;
$wgDefaultUserOptions['numberheadings'] = 1;

추천 확장 기능

* 문서 역사 슬라이더로 정리해주는 확장 기능

https://www.mediawiki.org/wiki/Extension:RevisionSlider

* 파일 업로드를 도와주는 확장 기능

https://www.mediawiki.org/wiki/Extension:MsUpload

* 위키 에디터의 끝판왕

https://www.mediawiki.org/wiki/Extension:VisualEditor

* 그밖에 참고 사이트

https://gendersec.tacticaltech.org/wiki/index.php/How_to_install_and_configure_this_wiki#Extensions

댓글