미디어위키(Mediawiki) 외부 스킨(skin) Liberty(리버티)

전에 우리는 미디어위키 기본 제공 스킨과 미디어위키에서 관리하는 추가 설치 가능 스킨의 설치 및 설정 방법에 대해 알아본 적이 있습니다. 그러나 솔직히 미디어위키에서 제공하는 스킨들의 수가 결코 많지는 않습니다.

맘에 드는 디자인의 스킨이 없다면 결국 우리는 스스로 만드는 수 밖에 없습니다. 그러나 미디어위키가 관리하지 않은 채 개인 또는 팀이 배포하고 유지보수하는 외부 스킨들도 있습니다. 이번에는 그러한 스킨의 사용법에 대해 알아보고자 합니다.

이번에 다룰 외부 스킨은 리브레 위키(https://librewiki.net/)에서 사용 중인 Liberty(리버티) 스킨입니다. 이 Liberty(리버티) 스킨은 제가 접한 미디어위키 스킨들 중 가장 완성도 높고 시인성이 높은 스킨이었습니다.

Liberty(리버티) 스킨 다운로드

리브레 위키의 '특수:버전' 문서에 접속합니다.

버전 문서에서 위 그림처럼 리버티 스킨이 설치된 스킨 목록에 있는 것을 확인할 수 있습니다. '리버티' 링크를 클릭해줍니다.

그러면 위 그림처럼 Liberty(리버티) 스킨의 GitHub(깃허브) 페이지에 접속할 수 있습니다.

위 그림처럼 자신이 사용하는 미디어위키 버전을 선택하고 Find file 오른쪽의 다운로드 버튼을 눌러줍니다. 그러면 그러면 위 그림처럼 확장별로 파일을 다운받을 수 있는 버튼이 나타납니다. 자신이 원하는 확장자 파일을 내려받으시기 바랍니다. 

저는 웹브라우저를 통해 통해 다운받지 않고 터미널로 내려받기 위해 내려받고자 하는 확장자 버튼 위에 마우스를 올려 두고 오른쪽 버튼을 눌러 메뉴를 띄워 링크 주소 복사를 클릭했습니다.

이렇게 하면 해당 파일 링크 주소가 클립보드에 복사됩니다. 해당 링크 주소는 아래와 같습니다.

https://gitlab.com/librewiki/Liberty-MW-Skin/-/archive/REL1_31/Liberty-MW-Skin-REL1_31.tar.gz

이제 터미널로 다운받아 봅시다.

study@study-VirtualBox:~$ cd ~/다운로드
study@study-VirtualBox:~/다운로드$ wget https://gitlab.com/librewiki/Liberty-MW-Skin/-/archive/REL1_31/Liberty-MW-Skin-REL1_31.tar.gz

Liberty(리버티) 스킨 압축 풀어 설치 하기

study@study-VirtualBox:~/다운로드$ sudo tar -xzf Liberty-MW-Skin-REL1_31.tar.gz -C /var/www/html/w/skins

/var/www/html/w/skins 부분은 자신의 환경에 맞게 수정해주시면 됩니다.

이제 미디어위키 스킨 디렉토리에 들어가 제대로 압축 해제되었는지 확인해봅시다.

study@study-VirtualBox:~/다운로드$ cd /var/www/html/w/skins
study@study-VirtualBox:/var/www/html/w/skins$ ls

그러면 아래와 같이 나오게 됩니다.

 study@study-VirtualBox:~/다운로드$ cd /var/www/html/w/skins
study@study-VirtualBox:/var/www/html/w/skins$ ls
Liberty-MW-Skin-REL1_31  MinervaNeue  MonoBook  README  Timeless  Vector  apex 

Liberty 스킨이 Liberty-MW-Skin-REL1_31와 같이 Liberty-MW-Skin- 다음에 미디어위키 버전이 붙은 디렉토리에 설치되었습니다.

보다 수월한 스킨 유지보수를 위해 디렉토리명을 간결하게 수정해줍니다.

study@study-VirtualBox:/var/www/html/w/skins$ sudo mv Liberty-MW-Skin-REL1_31 Liberty

스킨 디렉토리명을 Liberty로 간결하게 바꾸어 주었습니다.

Liberty(리버티) 스킨 설정

Liberty(리버티) 스킨 필수 설정

Liberty 스킨을 사용하려면 LocalSettings.php 파일을 열어 다음의 코드를 적어주어야 합니다.

# 코드 수정

$wgDefaultSkin = "Liberty";

# 코드 추가

wfLoadSkin( 'Liberty' );

위 코드를 적어주고 저장 후 미디어위키를 다시 접속하면 Liberty 스킨이 적용된 것을 볼 수 있습니다.

여기까지는 Liberty 스킨을 사용하기 위한 최소한의 설정입니다. 다른 변경 없이 그대로 쓰겠다면 이대로 끝내도 됩니다.

Liberty(리버티) 스킨 추가 설정 - 커스터마이징

이 Liberty 스킨은 간단하게 커스터마이징할 수 있는 코드들을 지원하고 있습니다.

$wgLibertyMainColor
// theme-color 메타 설정 및 사이트 주 색상 설정
// 기본값 : #4188F1

$wgLibertySecondColor
// $wgLibertyMainColor의 값에서 1A1415만큼 뺀 값
// 기본값 : #2774DC

$wgTwitterAccount
// 트위터 카드 계정 설정
// 기본값 : 없음

$wgLibertyOgLogo
// 오픈그래프 태그에 사용 될 이미지 설정
// 기본값 : $wgLogo의 값

$wgNaverVerification
// 네이버 사이트 도구 인증 코드
// 기본값 : 없음

$wgLibertyAdSetting
// 구글 애드센스 설정
// 기본값 : 없음
// 예시값 : array( 'client' => '(Google Adsense에서 제공한 값)', 'header' => '1234567890', 'right' => '0987654321' )

$wgLibertyMaxRecent
// 사이드바 최근 변경에 등장하는 편집의 최대 개수
// 기본값 : 10

Liberty 코드 추천 작성법

## Default skin: you can change the default skin. Use the internal symbolic
## names, ie 'vector', 'monobook':
$wgDefaultSkin = "Liberty";

... 중략 ...

# End of automatically generated settings.
# Add more configuration options below.

# 미디어위키 설치 후 추가 설치한 스킨
wfLoadSkin( 'apex' );
wfLoadSkin( 'Liberty' );

... 중략 ...

# 스킨별 환경 변수값 설정 #
## Liberty ##
### https://gitlab.com/librewiki/Liberty-MW-Skin ###
// $wgLibertyMainColor = ;
// theme-color 메타 설정 및 사이트 주 색상 설정
// 기본값 : #4188F1

// $wgLibertySecondColor = ;
// $wgLibertyMainColor의 값에서 1A1415만큼 뺀 값
// 기본값 : #2774DC

// $wgTwitterAccount = ;
// 트위터 카드 계정 설정
// 기본값 : 없음

// $wgLibertyOgLogo = ;
// 오픈그래프 태그에 사용 될 이미지 설정
// 기본값 : $wgLogo의 값

// $wgNaverVerification = ;
// 네이버 사이트 도구 인증 코드
// 기본값 : 없음

// $wgLibertyAdSetting = ;
// 구글 애드센스 설정
// 기본값 : 없음
// 예시값 : array( 'client' => '(Google Adsense에서 제공한 값)', 'header' => '1234567890', 'right' => '0987654321' )

// $wgLibertyMaxRecent = ;
// 사이드바 최근 변경에 등장하는 편집의 최대 개수
// 기본값 : 10

// $wg~ 코드는 주석처리되어 있는 것입니다. 기본값을 쓰지 않으려면 $wg~ 코드 앞의 // 표시를 지우고 변숫값을 정해주시면 됩니다.

해당 스킨의 배포 주소, 스킨에서 사용하는 모든 코드, 해당 코드의 의미, 그리고 기본값을 LocalSettings.php 파일에 같이 적어 두는 이유는 추후의 유지보수를 보다 수월하게 하기 위해서입니다.

Liberty 스킨 화면

Liberty 스킨 접속 화면(로그인 전)

Liberty 스킨 사용 시 미디어위키 접속 화면입니다.

Liberty 스킨 로그인 화면

스킨 상단바 컴색 막대 오른쪽의 화살표 아이콘이 로그인 버튼입니다. 해당 로그인 아이콘을 누르면 위 그림처럼 로그인 창이 뜹니다.

Liberty 스킨 로그인 후 화면

로그인 후에는 컴색 막대와 로그인 아이콘 사이에 계정 아이콘이 생성되며 이 아이콘을 누르면 위 그림처럼 로그인 계정 메뉴가 나타납니다.

Liberty 스킨 로그 아웃 화면

로그아웃 메뉴를 누르면 위 그림처럼 나타나 continue to the log out page 링크를 눌러야 로그아웃이 되거나,

위 그림처럼 바로 로그아웃이 되기도 합니다.

Liberty 스킨 상단바 메뉴 커스터마이징

Liberty 스킨은 화면 상단바에 메뉴들을 커스터마이징할 수 있습니다. 예시는 리브레 위키(https://librewiki.net/)를 보시면 알 수 있습니다.

상단바 메뉴 커스터마이징을 하기 위해서는 미디어위키:Liberty-Navbar 문서를 생성하여 편집해주어야 합니다.

위 그림은 리브레 위키의 미디어위키:Liberty-Navbar 문서 화면입니다.

* comments | 게시판
** | 위키방 | https://bbs.librewiki.net/wiki | https://bbs.librewiki.net/wiki
** | 자유게시판 | https://bbs.librewiki.net/freeboard | https://bbs.librewiki.net/freeboard
* gear | 도구
** | 특수 문서 목록 | 특수:특수문서 | 특수:특수문서
** | 업로드 | 특수:올리기 | 특수:올리기
** | 이슈 트래커 | https://issue.librewiki.net/ | https://issue.librewiki.net/
* book | 도움말
** | 위키 문법 | 도움말:위키_문법 | 도움말:위키_문법
** | TeX 문법 | 도움말:TeX_문법 | 도움말:TeX_문법
** | 태그 | 도움말:태그 | 도움말:태그
** | 이슈 트래커 | 도움말:이슈_트래커 | 도움말:이슈_트래커

위 회색 상자는 리브레 위키의 미디어위키:Liberty-Navbar 문서 원본 예시입니다. 위 예시를 참조하여 자신의 미디어위키에 맞게 수정해주시면 됩니다.