도쿠위키 사용하기(개정판)

도쿠위키 페이지를 먼저 보길 권한다.
대대적인 업데이트하기위한 방법 중 하나로 최신(2025년 9월 현재)버전의 도쿠위키를 최신 환경에서 설치하는 방법을 설명한다.

준비운동하기

아래와 같은 환경에서 설명한다.

이름 버전
OS Ubuntu 24.04.1
Web server Apache 2.4.58
PHP 8.3.25(Zend Engine v4.3.25)
Dokuwiki 2025-05-14b librarian

기본적인 웹서버 및 PHP 설치를 한다.

/var/www/html 디렉토리 아래에 dokuwiki 파일을 옮기고 압축을 푼다. 

$sudo mv dokuwiki-4e4612fcb2e9d1ec65a6803663bcf8e0.tgz /var/www/html/
$cd /var/www/html && tar xzf dokuwiki-4e4612fcb2e9d1ec65a6803663bcf8e0.tgz
$cd dokuwiki
$mv * ../

도쿠위키 설치하기

http://localhost/install.php 에 접속한다. 만일 아래와 같은 에러 메세지가 뜬다면,

DokuWiki Setup Error

The datadir ('pages') at /var/www/html/data/pages is not found, isn't accessible or writable. You should check your config and permission settings. Or maybe you want to run the installer?

아래처럼 권한을 조정해준다. 

$cd /var/www/html
$sudo chown -R www-data:www-data data/ conf/ lib/plugins/ lib/tpl/

설치화면이 보일 것이다.

라이선스는 “CC Attribution-Noncommercial-Share Alike 4.0 International” 을 선택한다. 설치 후에 아래와 같이 보안 관련 메세지가 뜬다면,

WARNING: It seems your data directory is not properly secured. Please read about Web Access Security in DokuWiki.

아래와 같이 아파치 설정파일(/etc/apache2/apache2.conf)에 추가한다. 

...
<Directory /var/www/>
        Options Indexes FollowSymLinks
        AllowOverride None
        Require all granted
</Directory>
 
<Directory /var/www/html/>
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>
 
#<Directory /srv/>
#       Options Indexes FollowSymLinks
#       AllowOverride None
#       Require all granted
#</Directory>
...

이후 웹서버를 재시작한다. 

$sudo systemctl restart apache2

이제 http://localhost/data/pages/ 에 접속해보자. '403 Forbidden You don't have permission to access this resource.' 메세지가 보인다면, 성공이다.

템플릿(bootstrap3) 설치하기

설치 후 가장 먼저 스킨(템플릿)을 설치해보자.
로그인 후에 Extension Manager 에서 bootstrap3 을 검색해서 설치한다.
이후 환경설정메뉴에서 아래 항목들을 설정한다.

설정이름 값
tpl»bootstrap3»showTools 없음
tpl»bootstrap3»hideLoginLink 체크
tpl»bootstrap3»showPageTools 없음
tpl»bootstrap3»showBadges 체크해제
tpl»bootstrap3»showWikiInfo 체크해제
tpl»bootstrap3»pageInfoDateFormat 사람이 읽을 수 있도록
tpl»bootstrap3»showLoginOnFooter 체크
tpl»bootstrap3»collapsibleSections 체크안함
breadcrumbs 0
tpl»bootstrap3»showPageId 체크해제
maxtoclevel 5
maxseclevel 5
useheading 항상
tpl»bootstrap3»showPageIcons 체크해제

플러그인 설치하기

도쿠위키의 특징이라면 다양한 플러그인들을 제공하고 있다는 점인데, https://www.dokuwiki.org/plugins 에서 찾을 수 있다.
설치방법은 테마와 동일하게 다운로드 주소만으로 간단하게 설치가 가능하다.

shortcutkey

단축키를 이용해서 페이지 작성, 저장 같은 여러가지 작업을 할 수 있다. https://www.dokuwiki.org/plugin:shortcutkey 를 참고할 것. 설치 후에 '환경설정' 메뉴에서 설정할 수 있다. 최신버전에 대한 지원여부가 명확히 나와있지 않지만, 설치 후 문제없이 동작했다.

xbr

위키페이지 작성 시에 줄바꿈을 하기 위해서는 엔터키 대신 백슬래시(\\)키를 입력해야 한다. 상당히 번거로운데, 이를 위지윅으로 기존의 엔터키를 이용해서 줄바꿈을 가능하게 한다. https://www.dokuwiki.org/plugin:xbr 를 참고할 것. 설치한 이후, '환경설정' 메뉴에서 “renderer_xhtml 주요 (xhtml) 위키 출력에 사용할 렌더러” 항목을 “XBR” 로 변경하여 저장해야 한다. 최신버전에 대한 지원여부가 명확히 나와있지 않지만, 설치 후 문제없이 동작했다.

iframe

도쿠위키에서 표시할 수 없는 웹페이지는 iframe 을 사용하면 가능하다. https://www.dokuwiki.org/plugin:iframe 에서 설치 및 이용이 가능하다. 최신버전에 대한 지원여부가 명확히 나와있지 않지만, 설치 후 문제없이 동작했다.

numberof plugin

전체 위키문서의 페이지 수를 알려주는 플러그인이다. https://www.dokuwiki.org/plugin:numberof 에서 설치 및 이용이 가능하다.
최신버전에 대한 지원여부가 명확히 나와있지 않지만, 설치 후 문제없이 동작했다.

Changes Plugin

날짜별로 수정된 문서들을 리스트로 보여준다. http://www.dokuwiki.org/plugin:changes 에서 설치 및 이용이 가능하다.

Access Counter and Popularity Plugin

위키문서의 방문자 수를 알려주는 플러그인. http://www.dokuwiki.org/plugin:accscounter 에서 설치 및 이용이 가능하다.
최신버전에 대한 지원여부가 명확히 나와있지 않지만, 설치 후 문제없이 동작했다.

discussion plugin

누구나 글을 남길 수 있는 게시판 형태의 페이지를 만들어 준다.
https://dokuwiki.org/plugin:discussion 에서 설치 및 이용이 가능하다.
등록되지 않은 사용자의 댓글을 막기 위해, 설정 페이지에서 변경한다.

plugin»discussion»allowguests 체크해제
allow comments by unregistered users 체크해제

Gallery Plugin

페이지에 있는 사진을 갤러리 형태로 볼 수 있게 해준다. https://www.dokuwiki.org/plugin:gallery 에서 설치 및 이용이 가능하다.

Page Navigation Plugin

페이지 이동을 수월하게 해주는 플러그인이다. 날짜별로 기록된 페이지(여행기, 일기등)들을 이동하는 데 편리하다. http://www.dokuwiki.org/plugin:pagenav 에서 설치 및 이용이 가능하다.

PGlist Plugin

네임스페이스 별로 위키페이지를 출력해준다. http://dokuwiki.org/plugin:pglist 에서 설치 및 이용이 가능하다.

Yearbox Plugin

일기를 작성할 때, 유용한 플러그인. https://www.dokuwiki.org/plugin:yearbox 에서 설치 및 이용이 가능하다.

htmlok Plugin

도쿠위키 최신버전에서는 보안상의 이유로 html 와 java script 코드를 직접 쓸 수 없다. 이 플러그인을 사용하면 가능하다. https://www.dokuwiki.org/plugin:htmlok 에서 설치 및 이용이 가능하다.
설치 후에 설정화면에서 'plugin»htmlok»htmlok' 항목에서 체크를 해야 한다.

folded plugin

많은 내용을 접었다가 펼수 있게 하는 유용한 플러그인. https://www.dokuwiki.org/plugin:folded 에서 설치 및 이용이 가능하다.

FontColor Plugin

글자의 색깔을 지정할 수 있는 플러그인. https://www.dokuwiki.org/plugin:fontcolor 에서 설치 및 이용이 가능하다. 최신버전에 대한 지원여부가 명확히 나와있지 않지만, 설치 후 문제없이 동작했다.

IndexMenu Plugin

인덱스 메뉴(마치 탐색기 메뉴처럼)를 만들어주는 플러그인이다. https://www.dokuwiki.org/plugin:indexmenu 에서 설치 및 이용이 가능하다.

폰트 변경하기

기본 폰트를 바꾸기 위해서는 파일을 직접 만들고 추가해야 한다. 참고로 폰트는 https://noonnu.cc/ 에서 골랐다. 

#vi /var/www/html/dokuwiki/conf/userstyle.css

아래와 같이 추가한다. 

@font-face {
      font-family: 'RIDIBatang';
      src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/RIDIBatang.woff') format('woff');
      font-weight: normal;
      font-style: normal;
  }
 
  body {
    background-color: #ffffff;
    padding: 0px;
    font-family: 'RIDIBatang';
    overflow-y: scroll;
  }

로고이미지 없애기 & 로고텍스트 폰트 적용하기

왼쪽 상단에 있는 로고를 삭제하기 위해서는 아래와 같이 해당 줄을 삭제한다. 

#vi /var/www/html/dokuwiki/lib/tpl/bootstrap3/tpl/navbar.php
...
echo '<img id="dw__logo" class="pull-left h-100 mr-4" alt="' . $title . '" src="' . $logo . '" />';
...

로고대신 폰트글자를 추가하고, 오른쪽 검색창과의 높이를 맞추기 위해 아래처럼 수정한다. 

<span class="icon-bar"></span>
            </button>
// 추가
<style>
@import url('https://fonts.googleapis.com/css2?family=Coiny&display=swap');
 
.title_font{
font-family: 'Coiny', cursive;
font-size:30px;
color:black;
margin-top:7px;
}
 
@media screen and (max-width: 767px) {
.title_font{
font-family: 'Coiny', cursive;
font-size:30px;
color:black;
margin-top:-4px;
}
}
</style>
//추가 끝
 
<?php
// get logo either out of the template images folder or data/media folder
$logo_size = [];
$logo      = tpl_getMediaFile([':wiki:logo.png', ':logo.png', 'images/logo.png'], false, $logo_size);
$title     = $conf['title'];
$tagline   = (($conf['tagline']) ? '<div id="dw__tagline">' . $conf['tagline'] . '</div>' : '');
 
$logo_height   = $logo_size[1];
$nabvar_height = $TPL->getNavbarHeight();
 
echo '<a class="navbar-brand d-flex align-items-center" href="' . $home_link . '" accesskey="h" title="' . $title . '">';
 
// 추가
echo '<div class="title_font" class="pull-right"><div id="dw__title">' . $title . '</div>' . $tagline . '</div>';
// 추가 끝
 
echo '</a>';
?>
</div>
 
...

하위 문단(H4,H5) 밑줄 적용하기

문단 작성 시, 상위 문단(H1,H2,H3)까지만 밑줄이 생긴다. 하위 문단까지도 적용하려면 파일을 수정해야 한다. 

#cd /var/www/html/dokuwiki
#vi lib/tpl/bootstrap3/Template.php
...
# Page Heading (h1-h2)
# TODO this class will be removed in Bootstrap >= 4.0 version
foreach ($html->find('h1,h2,h3,h4,h5') as $elm) {
$elm->class .= ' page-header pb-3 mb-4 mt-5'; # TODO replace page-header with border-bottom in BS4
}
...

favicon(파비콘) 설정하기

웹사이트에 접속하면 브라우저 탭이 생기고 왼쪽 상단에 작은 정사각형의 그림이 출력된다. 이 그림을 파비콘(favicon)이라고 부른다. 도구위키의 경우, 기본적으로 설정된 로고이미지가 뜬다.
이것을 원하는 것으로 변경할 수 있다.

먼저 파비콘으로 만들고 싶은 사진 파일을 고른다. 이때 참고할 사항은 사이즈가 정사각형이어야 한다는 점이다. 나중에 사이즈가 16×16 픽셀으로 조정되기 때문이다.
https://www.favicon-generator.org/ 에서 해당 파일을 업로드하고, 'Generate only 16×16 favicon.ico' 메뉴를 선택 후 'Create Favicon' 을 클릭한다.

생성된 파일(favicon.ico)을 다운로드한다. 그리고 도쿠위키의 편집페이지(어떤 페이지든 상관없다)를 열고 사진추가 메뉴를 눌러 'Media Files' 윈도우를 불러온다. 좌측에서 '[root] - wiki' 클릭하면, dokuwiki-128.png 라는 그림파일이 보일 것이다. 여기에 앞서 만든 파비콘 파일(favicon.ico)을 업로드한다.

이제 브라우저에서 다시 접속하여 아이콘이 바뀌었는지 확인해보자.

구글 번역기 사용하기

구글 번역기를 이용해서 자동으로 페이지가 선택한 언어로 번역되도록 한다. 'Bootstrap3 Template' 을 기준으로 설명한다. 템플릿에 따라 수정해야할 파일들이 다르기 때문이다.

navbar.php 수정

lib/tpl/bootstrap3/tpl/navbar.php 파일에 아래와 같이 추가한다. 

<?php
/**
 * DokuWiki Bootstrap3 Template: Navbar
 *
 * @link     http://dokuwiki.org/template:bootstrap3
 * @author   Giuseppe Di Terlizzi <giuseppe.diterlizzi@gmail.com>
 * @license  GPL 2 (http://www.gnu.org/licenses/gpl.html)
 */
 
global $lang;
global $TPL;
global $ACT;
 
$navbar_labels    = $TPL->getConf('navbarLabels');
$navbar_classes   = [];
$navbar_classes[] = ($TPL->getConf('fixedTopNavbar') ? 'navbar-fixed-top' : null);
$navbar_classes[] = ($TPL->getConf('inverseNavbar') ? 'navbar-inverse' : 'navbar-default');
$home_link        = ($TPL->getConf('homePageURL') ? $TPL->getConf('homePageURL') : wl());
 
?>
<!-- navbar -->
 
<!-- 추가 시작-->
<div style="float:right" id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'ko', includedLanguages: 'en,zh-CN,hi,es,fr,ar,ru,pt,de,ja,ko', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<!-- 추가 끝 -->
 
<nav id="dw__navbar" class="navbar <?php echo trim(implode(' ', $navbar_classes)) ?>" role="navigation">
 
    <div class="dw-container container<?php echo ($TPL->isFluidNavbar() ? '-fluid mx-5' : '') ?>">
...

제대로 수정했다면, 페이지 상단 오른쪽에 언어를 선택할 수 있는 창이 뜰 것이다.

userstyle.css 수정

언어를 선택할 때마다 상단에 출력되는 바(bar)를 없애는 것이 좋다. 따라서 dokuwiki/conf/userstyle.css 파일을 아래처럼 수정한다. 

@font-face {
      font-family: 'RIDIBatang';        /* 메인폰트 설정 */
      src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/RIDIBatang.woff') format('woff');
      font-weight: normal;
      font-style: normal;
  }
 
.goog-te-banner-frame.skiptranslate {
    display: none !important;
    } 
 
.skiptranslate > iframe {
  display: none !important;     /* 구글 번역 위젯 사용 시 상단 바 제거 */
}
 
.VIpgJd-ZVi9od-aZ2wEe {
 display: none !important;      /* 구글 번역 위젯 사용 시 왼쪽 상단의 원형 프로그래스 바 제거 */
}
 
body {
    top: 0px !important; 
    background-color: #ffffff;
    padding: 0px;  /* 화면 상단으로부터의 마진 */
    font-family: 'RIDIBatang';
    overflow-y: scroll;
  }

로고 글자 번역막기

왼쪽 상단에 있는 로고 글자인 'likewind' 는 번역되지 않아야 한다. 이를 위해 특정 태그를 사용해서 자동 번역되는 걸 막을 수 있다. 앞서 수정한 lib/tpl/bootstrap3/tpl/navbar.php 파일에 아래와 같이 'span' 태그를 추가한다. 

...
font-size:30px;
color:black;
margin-top:-4px;
}
}
</style>
 
            <?php
 
                // get logo either out of the template images folder or data/media folder
                $logo_size = [];
                $logo      = tpl_getMediaFile([':wiki:logo.png', ':logo.png', 'images/logo.png'], false, $logo_size);
                $title     = $conf['title'];
                $tagline   = (($conf['tagline']) ? '<div id="dw__tagline">' . $conf['tagline'] . '</div>' : '');
 
                $logo_height   = $logo_size[1];
                $nabvar_height = $TPL->getNavbarHeight();
 
		echo '<a class="navbar-brand d-flex align-items-center" href="' . $home_link . '" accesskey="h" title="' . $title . '">';
		echo '<div class="title_font" class="pull-right"><div id="dw__title"><span class="notranslate">' . $title . '</span></div>' . $tagline . '</div>';   // 수정
                echo '</a>';
 
            ?>
 
        </div>
 
        <div class="collapse navbar-collapse">
 
            <?php if ($TPL->getConf('showHomePageLink')): ?>
            ...

사이드바(Sidebar) 사용하기

앞서 설치한 'IndexMenu Plugin' 을 사용해서 왼쪽에 사이드바를 만들 수 있다. 방법은 아주 직관적이고 간단하다. data/pages/ 아래에 sidebar.txt 파일을 만든다. 

~~NOCACHE~~
{{indexmenu>:#1|skipns=/^(wiki|etc|diary|playground)$/ skipfile=/^(todays|about|guestbook)$/ nsort rsort}}

위와 같이 추가한다. 위의 내용은 가장 최상위 경로에서 wiki,etc,diary,playground 의 네임스페이스를 제외한다. 또 todays, about, guestbook 이라는 페이지를 제외한다. 이후 역순으로 정렬하여 출력한다.

이제 브라우저로 확인해보자.

모바일 페이지에서 사이드바 메뉴 수정하기

사이드바를 휴대폰에서 보면, 아이콘과 글자의 높이가 맞지 않는 문제가 있다. 아이콘을 지우고, 글자만 출력하도록 수정해보자.

lib/tpl/bootstrap3/tpl/sidebar.php 파일을 수정해야 한다. 

<!-- sidebar -->
<aside id="<?php echo $sidebar_id ?>" class="dw__sidebar <?php echo $sidebar_class ?> hidden-print">
    <div class="dw-sidebar-content">
        <div class="dw-sidebar-title hidden-lg hidden-md hidden-sm" data-toggle="collapse" data-target="#<?php echo $sidebar_id ?> .dw-sidebar-body">
            <?php echo iconify('mdi:view-list'); ?> <?php echo $sidebar_title ?>  // 기존코드 삭제
            <?php echo '카테고리 ▼' ?>        // 추가
        </div>
        <div class="dw-sidebar-body collapse in small">
            <?php
...

글자 가운데 정렬하기

무척이나 단순한 기능인 이것이 도쿠위키의 기본 문법에는 없다. html 이나 css 코드를 추가해야만 가능한데, 좀더 편한 방법을 찾다가 기본설치가 되어 있는 Wrap 플러그인으로 가능하다는 걸 알았다.
하지만, 편집메뉴에서는 이 기능이 빠져있다. 기존에 있는 기능 중에 하나를 수정해서 쓴다.
lib/plugins/wrap/action.php 파일을 아래와 같이 수정한다. 

                    'icon'   => '../../plugins/wrap/images/toolbar/box.png',
                    'open'   => '<'.$syntaxDiv.' center round box 60%>\n',
                    'close'  => '\n</'.$syntaxDiv.'>\n',
                ),
                array(
                    'type'   => 'format',
                    'title'  => $this->getLang('info'),
                    'icon'   => '../../plugins/wrap/images/note/16/info.png',
                 //   'open'   => '<'.$syntaxDiv.' center round info  60%>\n',   주석처리
                    'open'   => '<'.$syntaxDiv.' centeralign>\n',  // 추가
                    'close'  => '\n</'.$syntaxDiv.'>\n',
                ),
                array(
                    'type'   => 'format',
                    'title'  => $this->getLang('tip'),
                    'icon'   => '../..

이제 편집화면에서 Wrap 플러그인 버튼을 누르고, 'info box' 를 클릭한다. 아래와 같이 가운데 정렬을 하는 태그가 자동으로 입력된다. 

<WRAP centeralign>
정보 상자
</WRAP>

편집 메뉴에 자주 쓰는 태그 버튼 만들기

편집 작업을 할 때, 최대한 마우스나 키보드의 입력을 줄이는 게 일의 효율을 조금이나마 높일 수 있다.
자주 사용하는 태그들이 있다면, 편집 메뉴에 버튼을 만들어 두면 편리하게 사용할 수 있다.
여기서는 글자색을 바꾸고, 가운데 정렬을 하는 태그를 넣는 버튼을 만들어 보겠다.
lib/tpl/bootstrap3/script.js 파일을 아래와 같이 추가한다. 

...
        /* DOKUWIKI:include js/plugins/semantic.js */
        /* DOKUWIKI:include js/plugins/simplenavi.js */
        /* DOKUWIKI:include js/plugins/struct.js */
        /* DOKUWIKI:include js/plugins/tabbox.js */
        /* DOKUWIKI:include js/plugins/tagalerts.js */
        /* DOKUWIKI:include js/plugins/tagging.js */
        /* DOKUWIKI:include js/plugins/translation.js */
        /* DOKUWIKI:include js/plugins/wrap.js */
        /* DOKUWIKI:include js/plugins/watchcycle.js */
    },
};
 
// 추가시작
 
jQuery(function () {
    // 편집창이 있을 때만 실행
    if (!jQuery('#wiki__text').length) return;
 
    var $toolbar = jQuery('#tool__bar');
 
    /* -----------------------------
     * 1️⃣ 파란 글자 버튼 (<fc #4682b4></fc>)
     * ----------------------------- */
    var $button1 = jQuery('<button type="button" title="파란 글자" style="margin-left:5px;">💙blue</button>');
    $button1.on('click', function () {
        var $textarea = jQuery('#wiki__text');
        var start = $textarea.prop('selectionStart');
        var end = $textarea.prop('selectionEnd');
        var text = $textarea.val();
        var selected = text.substring(start, end);
        var before = text.substring(0, start);
        var after = text.substring(end);
 
        var openTag = '<fc #4682b4>';
        var closeTag = '</fc>';
        var newText = before + openTag + selected + closeTag + after;
 
        $textarea.val(newText);
        $textarea[0].selectionStart = $textarea[0].selectionEnd = start + openTag.length + selected.length + closeTag.length;
        $textarea.focus();
    });
    $toolbar.append($button1);
 
    /* -----------------------------
     * 2️⃣ 가운데 정렬 + 파란 글자 버튼
     *    (<WRAP centeralign><fc #4682b4></fc></WRAP>)
     * ----------------------------- */
    var $button2 = jQuery('<button type="button" title="가운데 파란 글자" style="margin-left:5px;">💙blue_center</button>');
    $button2.on('click', function () {
        var $textarea = jQuery('#wiki__text');
        var start = $textarea.prop('selectionStart');
        var end = $textarea.prop('selectionEnd');
        var text = $textarea.val();
        var selected = text.substring(start, end);
        var before = text.substring(0, start);
        var after = text.substring(end);
 
        var openTag = '<WRAP centeralign><fc #4682b4><';
        var closeTag = '></fc></WRAP>';
        var newText = before + openTag + selected + closeTag + after;
 
        $textarea.val(newText);
        $textarea[0].selectionStart = $textarea[0].selectionEnd = start + openTag.length + selected.length + closeTag.length;
        $textarea.focus();
    });
    $toolbar.append($button2);
});
 
// 추가 끝
 
dw_template.toolbarIcons();
dw_template.jQueryUI();
 
jQuery(dw_template.init);

이제 편집 창에 가면, 두 개의 버튼(blue, blue_center)이 보일 것이다.
추가로 주석처리를 하는 버튼을 만들어보자. 위 코드에 아래 코드를 추가하면 된다. 

    $toolbar.append($button2);
 ...   
// 추가시작
    /* -----------------------------
     * 3️⃣ 숨김 영역 버튼 (<WRAP hide></WRAP>)
     * ----------------------------- */
    var $button3 = jQuery('<button type="button" title="숨김 영역" style="margin-left:5px;">👁️hide</button>');
    $button3.on('click', function () {
        var $textarea = jQuery('#wiki__text');
        var start = $textarea.prop('selectionStart');
        var end = $textarea.prop('selectionEnd');
        var text = $textarea.val();
        var selected = text.substring(start, end);
        var before = text.substring(0, start);
        var after = text.substring(end);
 
        var openTag = '<WRAP hide>';
        var closeTag = '</WRAP>';
        var newText = before + openTag + selected + closeTag + after;
 
        $textarea.val(newText);
        $textarea[0].selectionStart = $textarea[0].selectionEnd = start + openTag.length + selected.length + closeTag.length;
        $textarea.focus();
    });
    $toolbar.append($button3);
    // 추가끝
});

편집창에 hide 라는 버튼이 만들어졌다.
또다시 추가로 code 버튼(무척이나 자주 사용한다)을 만들어보자. 

...
  /* -----------------------------
     * 4️⃣ 코드 텍스트 버튼 ()
     * ----------------------------- */
    var $button4 = jQuery('<button type="button" title="코드 텍스트" style="margin-left:5px;">💻code</button>');
    $button4.on('click', function () {
        var $textarea = jQuery('#wiki__text');
        var start = $textarea.prop('selectionStart');
        var end = $textarea.prop('selectionEnd');
        var text = $textarea.val();
        var selected = text.substring(start, end);
        var before = text.substring(0, start);
        var after = text.substring(end);
      <nowiki>var openTag = '<code text>';</nowiki>
      <nowiki>var closeTag = '</code>';</nowiki>        
        var newText = before + openTag + selected + closeTag + after;
 
        $textarea.val(newText);
        $textarea[0].selectionStart = $textarea[0].selectionEnd =
            start + openTag.length + selected.length + closeTag.length;
        $textarea.focus();
    });
    $toolbar.append($button4);
    ...

편집창에 code 라는 버튼이 만들어졌다.
추가로 페이지 하단에 '이전, 다음' 버튼을 만들 때 사용하는 [<>] 를 입력할 수 있는 버튼을 만들어보자. 아래를 추가한다. 

    /* -----------------------------
     * 5 이전다음 버튼 ([<>])
     * ----------------------------- */
    var $button4 = jQuery('<button type="button" title="이전다음" style="margin-left:5px;">PN</button>');
    $button4.on('click', function () {
        var $textarea = jQuery('#wiki__text');
        var start = $textarea.prop('selectionStart');
        var end = $textarea.prop('selectionEnd');
        var text = $textarea.val();
        var selected = text.substring(start, end);
        var before = text.substring(0, start);
        var after = text.substring(end);
 
        var openTag = '[<';
        var closeTag = '>]';
        var newText = before + openTag + selected + closeTag + after;
 
        $textarea.val(newText);
        $textarea[0].selectionStart = $textarea[0].selectionEnd =
            start + openTag.length + selected.length + closeTag.length;
        $textarea.focus();
    });
    $toolbar.append($button4);

편집메뉴에 'PN' 버튼이 생겼다. 클릭해서 확인하자.

사진첩 페이지 버그 수정

사진첩 페이지를 볼 때, sidebar 윗부분이 잘리는 문제가 있다. 

<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  // margin: 0; 주석처리 또는 삭제한다
}
 
* {
  box-sizing: border-box;
}
...

국가별 페이지에서 사용할 kml 파일 다루기

구글맵 API 통해서 지도 상에 경로를 그릴 수 있는데, 아쉽게도 kml 포맷만 지원한다. 따라서 기존의 gpx 파일을 kml 로 변환해야 한다. https://www.gpsvisualizer.com 사이트를 통해서도 이용가능하지만, 내가 원하는 결과물을 얻기 위해서는 다른 방법을 사용해야 한다.
일련의 과정을 순서대로 적어보겠다.

  1. 날짜별 gpx 파일의 사이즈를 줄이고(gpsbabel), 하나의 파일로 합친다(프로그램 사용)
  2. 구글드라이브에서 'Google 내지도'를 선택해서 새지도를 하나 만들고, 앞서 만든 gpx 파일을 불러오기 한다
  3. 왼쪽 상단의 메뉴(점 3개)에서 KML/KMZ 내보내기를 선택하고, 'KMZ 대신 KML로 내보냅니다. 모든 아이콘을 지원하지는 않습니다' 체크 후 다운로드

이 파일(test.kml)을 수정해야 한다. 편집기(vim)로 열어서 작업한다. 

...
    <Folder>
      <name>Wikiloc - 17-06-16 09:46:10 PM</name>
      <Placemark>
        <name/>
        <description><![CDATA[<h4 style="color : blue; font-family: RIDIBatang;">출발지점</h4>]]></description>    // 수정
        <styleUrl>#icon-61</styleUrl>
        <Point>
          <coordinates>
            76.885624,43.206226,943.77
          </coordinates>
        </Point>
      </Placemark>
      <Placemark>
        <name/>
        <description><![CDATA[<h4 style="color : blue; font-family: RIDIBatang;">도착지점</h4>]]></description>   // 수정
        <styleUrl>#icon-123</styleUrl>
        <Point>
          <coordinates>
            79.23644,43.014772,1852.12
          </coordinates>
        </Point>
      </Placemark>
      <Placemark>
        <name>Cycling</name>
        <description><![CDATA[<img src="https://www.likewind.cloud/lib/exe/fetch.php?media=journey:kazakhstan:2016:95.jpg" height="200" width="auto" /><br><br><h4 style="color : blue; font-family: RIDIBatang;"><a href="https://likewind.cloud/doku.php?id=journey:kazakhstan:2016:start">자전거여>행(2016)</a></h4>]]></description>  //수정
        <styleUrl>#line-0288D1-5000</styleUrl>  
        <ExtendedData>  // 추가시작
          <Data name="gx_media_links">
            <value><![CDATA[https://www.likewind.cloud/lib/exe/fetch.php?media=journey:kazakhstan:2016:95.jpg]]></value>
          </Data>
        </ExtendedData>   // 추가끝
        <MultiGeometry>
          <LineString>
            <tessellate>1</tessellate>
...

추가하는 코드에서는 경로를 클릭하면 보일 이미지의 주소와 링크 주소를 알맞게 수정한다. 참고로 'Cycling' 이라는 글자의 코드 <name>Cycling</name> 는 여기서 바꿀 수 없고, 해당 국가 페이지의 css 코드를 사용해야 한다. 

<style>
 
.gm-style .gm-style-iw {
    color: red;
}
 
</style>

위의 코드를 통해, 글자색을 빨간색으로 바꿀 수 있다.

페이지 하단에 문서편집 링크 만들기

로그인한 상태에서만 문서를 편집할 수 있는(로그인 상태에서만 보이는) 링크를 만들어보겠다.
휴대폰이나 구형 기기(ipad2 2세대)에서 문서 편집을 할 때 유용하게 사용된다.
/lib/tpl/bootstrap3/tpl/footer.php 파일 마지막에 아래코드를 추가한다. 

</div>
<!-- /footer -->
// 추가시작
<?php
// ==== 페이지 하단 편집 아이콘 ====
global $ID;
if (auth_quickaclcheck($ID) >= AUTH_EDIT) {
    echo '  <a href="' . wl($ID, 'do=edit') . '" title="이 문서 편집하기">';
    echo '<center><h3>edit</h3></center>';
    echo '  </a>';
}
?>
// 추가끝
 
<?php endif; ?>

하단 중앙에 'edit' 라는 링크가 걸린 것을 볼 수 있다.

운영 관련 팁

캐쉬 사용하기

도쿠위키는 페이지 로딩 속도를 높이기위해 캐시(cache)를 사용한다. 캐시는 매번 접속할 때마다 데이터를 가져오지않고, 한번 저장해놓고 이후에는 저장된 데이터를 로딩한다. 이 것은 장점이자 단점이 될 수도 있는데, 최신정보를 바로 적용할 수 없다는 점이다. 예를 들면, 도쿠위키의 총 문서갯수를 출력하고 싶은 경우 'NUMBEROFPAGES 플러그인'을 사용할 수 있다. 실제 문서를 만들었음에도 숫자가 올라가지 않는 문제가 발생하는데, 이것이 바로 캐쉬문제이다. 이를 해결하기 위해서는 몇가지 방법이 있다.

  1. 캐쉬를 사용하지 못하게 명령어 ~~NOCACHE 사용하기
  2. 설정페이지에서 '저장'버튼을 눌러 저장하기
  3. conf/local.php 파일에 touch 명령어 사용하기
  4. Stale 플러그인 사용하기
  5. 해당 페이지를 수정하기

원하는 방법을 선택해서 사용하면 된다. 개인적으로 3번을 추천한다. touch 명령어는 해당 파일이 없을 경우, 파일을 만들지만, 이 경우에는 기존의 파일이 있기 때문에 생성 시간을 최신(명령이 실행되는 시점)으로 바꾼다.
도쿠위키에서 설정파일의 시간을 가지고 로딩(read) 여부를 판단하기 때문이다. 따라서 이 명령은 주기적으로 실행해야 한다. cron 을 통해 가능하다. 

0,30 * * * *	touch /home/u62xxx24852/domains/likewind.cloud/public_html/conf/local.php

위 명령어는 매 30분마다 실행된다.

Files And Directories (inodes) 줄이기

현재 사용하는 hostinger 의 Files And Directories (inodes) Limit 은 200,000 개이다. 디스크용량은 20% 밖에 안되지만, Files And Directories (inodes) 양은 60% 가 넘는다. 위키 페이지가 4000개가 넘다보니, 압도적으로 많은 것이다.
도쿠위키는 기본적으로 페이지를 수정할 때마다, revision(나중에 복구를 위한) 파일을 만든다. 다시 말해서 수정 후 저장을 10번 했다면, 10개의 리비전 파일이 만들어지는 것이다. 참고로 현재 사용하고 있는 inodes 수는 127,986 개인데, 문서 숫자가 4296개 인걸 감안하면, 3배 가량 많은 것이다. 계산 상으로 2/3 는 리비전 파일이다. 이 파일을 삭제한다면, 향후 운영에 큰 도움이 될 것이다.

물론 이파일을 삭제하게 되면, 페이지의 히스토리나 복원작업은 할 수 없게 된다. 여러명이 함께 사용하는 위키라면 필요하겠으니, 개인 위키의 경우 별 효용이 없다.
기본적으로 도쿠위키에서 페이지를 수정하면 자동으로 리비전 파일이 생성되기 때문에 주기적으로 삭제를 해주어야 한다. 역시 cron 을 통해 가능하다. 

0,30 * * * *  rm -rf /home/u621xxx852/domains/likewind.cloud/public_html/data/attic/*

매 30분마다 리비전 파일들을 삭제한다.

FAQ

구글맵 지도가 보이지 않는다

자바스크립트를 이용해서 google map api 를 호출해서 쓰고 있는데, 갑자기 문제가 생긴다면, 크게 세가지다.

  1. 해당 api 가 바뀌었음
  2. 도쿠 위키에서 자바스크립트가 허용되지 않음
  3. likewind.cloud 에서는 보이는데, 로컬 웹서버에서는 안보임

1번의 경우, 아주 드물게 일어나는 일이다. 이런 경우, 구글링을 통해 수정된 api 에 맞게 코드를 수정할 필요가 있다.
2번의 경우, 최신 도쿠위키에서는 기본적으로 html, 자바스크립트에 대한 사용을 금지해놨다. 앞서 설명한 htmlok Plugin 을 통해 사용할 수 있다.
3번의 경우, api 를 특정 도메인에서만 호출할 수 있도록 했기 때문이다. 이유는 보안적으로도 매우 중요하기 때문이다. 이에 대한 설정을 보거나 수정하기 위해서는 https://console.cloud.google.com 에 접속해야 한다. 여기서 '빠른액세스(api 및 서비스)'를 클릭한다. 왼쪽 패널의 '사용자 인증정보' 를 클릭하면, 이미 발급된 API key들이 보인다. 여기서 해당 키를 클릭한다. '애플리케이션 제한사항'에 '웹사이트'가 선택되어 있고, 아래 도메인 주소가 있을 것이다.
이 도메인 주소를 삭제하면, 모든 곳에서 호출이 가능하다. 수정 후, 저장을 누르고 로컬 웹서버 상에서 다시 확인해보자.

첨부 파일을 교체했음에도 기존의 파일이 출력된다

1.jpg 파일을 업로드하고, 해당 문서에 추가했다. 이후, 같은 이름(1.jpg)의 다른 사진 파일로 교체를 하더라도 기존의 사진파일이 계속해서 출력된다.
이것은 캐시(cache)때문인데, 파이어 폭스라면, 'Ctrl + F5' 를 눌러서 새로고침한다. 사진파일이 갱신될 것이다.

  • computer/os/dokuwiki2.txt
  • Last modified: 5 days ago
  • by likewind