====== 도쿠위키 사용하기 ======
도쿠위키(Dokuwiki)에 대한 소개와 설치 그리고 사용법에 대해 작성했다. 
====== 소개 ======
한마디로 **<wrap hi>데이터베이스를 사용하지 않는 위키</wrap>** 라고 할 수 있겠다.
이 점이 내가 도쿠위키를 도입하게된 가장 큰 이유다. 적은 리소스 만으로도 운영할 수 있다는 점, <del>AWS EC2 서비스를 사용하는 입장에서는 고려하지 않을 수 없다.</del> 현재는 Hostinger 를 사용하고 있다. 예전에 사용하던 모니위키(moniwiki)와 비슷하다. 위키피디아로 가장 유명한 미디어위키에 이어 두번째로 가장 많이 사용되는 위키다. 
====== 설치 ======
AWS EC2(t2.micro) Ubuntu 20.04.2 LTS 를 기준으로 설명한다. 
===== 웹서버와 PHP =====

<code text>
$sudo passwd     /* root 패스워드 지정 */
$su -
#apt-get update
#apt-get dist-upgrade
#apt-get install apache2
#apt-get install php
#vi /var/www/html/index.php
</code>

웹서버와 PHP 연동이 제대로 되는지 확인하기 위해 아래내용을 입력한다. 

<code php>
<?php phpinfo();?>
</code>

브라우저에 접속하여 PHP 정보가 나오는지 확인한다. 
===== 도쿠위키 =====
완료가 되었다면, 도쿠위키를 설치할 차례다. 압축을 풀고, /var/www/html 아래에 복사한다. 

<code text>
#cd /var/www/html
#chown -R www-data:www-data *
#apt-get install php-xml
#apache2ctl restart
</code>

브라우저에서 install.php 로 접속한다. 설치에 필요한 정보들을 입력하고 완료한다. 이후 웹서버 설정을 수정해주어야 한다. 

<code text>
#cd /etc/apache2
#vi sites-available/000-default.conf
</code>

아래와 같이 파일을 수정한다. 

<code text>
DocumentRoot /var/www/html/dokuwiki
</code>

이제 서버IP 만으로도 접속이 가능하다. 
===== Letsencrypt =====
요즘은 보안이슈 때문에 http 가 아닌 https 를 사용한다. 이를 위해서는 서버인증서를 발급받아야 한다. 주기적으로 인증서를 발급/갱신해야 하는데, 유료 또는 무료다. 유료는 자동으로 그리고 갱신주기가 긴데(최소 1년) 반해, 무료일 경우 3개월마다 스크립트 또는 프로그램을 수동으로 실행해서 갱신해야 한다. 여기서는 letsencrypt 라는 무료 프로그램을 사용할 것이다.  

<code text>
#apt-get install certbot
#apache2ctl stop
#add-apt-repository ppa:certbot/certbot
#apt-get install python-certbot-apache
#apt-get install python3-certbot-apache
#certbot --apache
Saving debug log to /var/log/letsencrypt/letsencrypt.log
Plugins selected: Authenticator apache, Installer apache

Which names would you like to activate HTTPS for?
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1: likewind.ml
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Select the appropriate numbers separated by commas and/or spaces, or leave input
blank to select all options shown (Enter 'c' to cancel): 1
Cert not yet due for renewal

You have an existing certificate that has exactly the same domains or certificate name you requested and isn't close to expiry.
(ref: /etc/letsencrypt/renewal/likewind.ml.conf)

What would you like to do?
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1: Attempt to reinstall this existing certificate
2: Renew & replace the cert (limit ~5 per 7 days)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Select the appropriate number [1-2] then [enter] (press 'c' to cancel): 2
Renewing an existing certificate
Deploying Certificate to VirtualHost /etc/apache2/sites-enabled/default-ssl.conf

Please choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1: No redirect - Make no further changes to the webserver configuration.
2: Redirect - Make all requests redirect to secure HTTPS access. Choose this for
new sites, or if you're confident your site works on HTTPS. You can undo this
change by editing your web server's configuration.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Select the appropriate number [1-2] then [enter] (press 'c' to cancel): 2
Created redirect file: le-redirect-likewind.ml.conf
Rollback checkpoint is empty (no changes made?)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Your existing certificate has been successfully renewed, and the new certificate
has been installed.

The new certificate covers the following domains: https://likewind.ml

You should test your configuration at:
https://www.ssllabs.com/ssltest/analyze.html?d=likewind.ml
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

IMPORTANT NOTES:
 - Congratulations! Your certificate and chain have been saved at:
   /etc/letsencrypt/live/likewind.ml/fullchain.pem
   Your key file has been saved at:
   /etc/letsencrypt/live/likewind.ml/privkey.pem
   Your cert will expire on 2021-09-03. To obtain a new or tweaked
   version of this certificate in the future, simply run certbot again
   with the "certonly" option. To non-interactively renew *all* of
   your certificates, run "certbot renew"
 - If you like Certbot, please consider supporting our work by:

   Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate
   Donating to EFF:                    https://eff.org/donate-le

</code>

웹서버에 제대로 설정이 되었는지 확인한다. 

<code text>
#cd /etc/apache2/sites-available
#ls 
000-default.conf  default-ssl.conf  le-redirect-likewind.ml.conf
#vi default-ssl.conf
</code>

아래와 같이 수정한다. 

<code text>
<IfModule mod_ssl.c>
        <VirtualHost _default_:443>
                ServerAdmin webmaster@localhost
                ServerName likewind.ml
                DocumentRoot /var/www/html/dokuwiki

                # Available loglevels: trace8, ..., trace1, debug, info, notice, warn,
                # error, crit, alert, emerg.
                # It is also possible to configure the loglevel for particular
                # modules, e.g.
                #LogLevel info ssl:warn

                ErrorLog ${APACHE_LOG_DIR}/error.log
                CustomLog ${APACHE_LOG_DIR}/access.log combined
...
                #               downgrade-1.0 force-response-1.0

                Include /etc/letsencrypt/options-ssl-apache.conf
                SSLCertificateFile      /etc/letsencrypt/live/likewind.ml/fullchain.pem
                SSLCertificateKeyFile /etc/letsencrypt/live/likewind.ml/privkey.pem
        </VirtualHost>
</IfModule>
</code>

<code text>
#vi le-redirect-likewind.ml.conf
</code>

아래와 같이 수정한다. 

<code text>
<VirtualHost _default_:80>
ServerName likewind.ml

ServerSignature Off

RewriteEngine On
RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]

ErrorLog /var/log/apache2/redirect.error.log
LogLevel warn
</VirtualHost>
</code>

브라우저에서 https://www.ssllabs.com/ssltest/analyze.html?d=likewind.ml 접속해서 결과를 확인한다. 주소창에 https: 로 접속해보자. 로딩이 안된다면, 웹서버를 재시작하거나, 방화벽에 443번 포트가 열려있는지 확인한다.
====== 수정 ======
기본으로 설치된 도쿠위키로는 사용하기가 불편하기 때문에 플러그인과 디자인테마 그리고 파일 수정이 필요하다. 
===== 디자인 테마 =====
도쿠위키는 꽤 다양한 디자인 테마를 지원한다. https://www.dokuwiki.org/ko:template 에 가서 마음에 드는 테마를 선택한다. 
Bootstrap3 Template 로 결정, 다운로드할 필요없이 주소만 저장하여 설치가능하다. 이후 환경설정메뉴에서 아래 항목들을 설정한다.

^ 설정이름       ^ 값        ^
| 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 |
===== 플러그인 =====
도쿠위키의 특징이라면 다양한 플러그인들을 제공하고 있다는 점인데, https://www.dokuwiki.org/plugins 에서 찾을 수 있다. 
설치방법은 테마와 동일하게 다운로드 주소만으로 간단하게 설치가 가능하다. 
==== shortcutkey ====
단축키를 이용해서 페이지 작성, 저장 같은 여러가지 작업을 할 수 있다. https://www.dokuwiki.org/plugin:shortcutkey 를 참고할 것. 설치 후에 '환경설정' 메뉴에서 설정할 수 있다. 
==== xbr ====
위키페이지 작성 시에 줄바꿈을 하기 위해서는 엔터키 대신 백슬래시(\\)키를 입력해야 한다. 상당히 번거로운데, 이를 위지윅으로 기존의 엔터키를 이용해서 줄바꿈을 가능하게 한다. https://www.dokuwiki.org/plugin:xbr 를 참고할 것. 설치한 이후, '환경설정' 메뉴에서 “renderer_xhtmlwarning주요 (xhtml) 위키 출력에 사용할 렌더러” 항목을 “XBR” 로 변경하여 저장해야 한다. 
==== iframe ====
도쿠위키에서 표시할 수 없는 웹페이지는 iframe 을 사용하면 가능하다. https://www.dokuwiki.org/plugin:iframe 에서 설치 및 이용이 가능하다.
===== 폰트 변경하기 =====
기본 폰트를 바꾸기 위해서는 파일을 직접 수정해야 한다. 참고로 폰트는 https://noonnu.cc/ 에서 골랐다. 

<code text>
#vi /var/www/html/dokuwiki/conf/userstyle.css
</code>

아래와 같이 추가한다.

<code 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;
  }
</code>
===== 로고이미지 없애기 =====
왼쪽 상단에 있는 로고를 삭제하기 위해서는 아래와 같이 해당 줄을 삭제한다. 

<code text>
#vi /var/www/html/dokuwiki/lib/tpl/bootstrap3/tpl/navbar.php
</code>

<code php>
...
echo '<img id="dw__logo" class="pull-left h-100 mr-4" alt="' . $title . '" src="' . $logo . '" />';
...
</code>

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

<code php>
<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>

...
</code>
===== 하위 문단(H4,H5) 밑줄 적용하기 =====
문단 작성 시, 상위 문단(H1,H2,H3)까지만 밑줄이 생긴다. 하위 문단까지도 적용하려면 파일을 수정해야 한다. 
<code text>
#cd /var/www/html/dokuwiki
#vi lib/tpl/bootstrap3/Template.php
</code>
<code 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
}
...
</code>

====== 사용 ======
===== 위키페이지 생성 =====
도쿠 위키운영와 관리에 있어 계층구분은 중요하다. 디렉토리로 구분이 되기때문에 명확하게 이해하기 수월하다. 
도메인(https://likewind.ml)을 입력하면, 가장 처음 보이는 위키페이지는 /var/www/html/dokuwiki/data/pages/start.txt 이다. 페이지는 텍스트(.txt) 파일 형태로 생성된다. 참고로 이 페이지는 설치 후, 기본 생성되기 때문에 별도로 만들 필요가 없다. 
아래와 같이 test 라는 이름의 페이지를 만들어 보겠다. 

<code text>
[[test:test]] # 1
[[test]] # 2
</code>

두 줄 모두 빨간색의 링크가 걸린 것을 볼 수 있다. 해당 링크를 클릭하면, 새로운 페이지가 뜨면서 입력할 수 있다. 이 페이지에 내용을 입력 후 저장하면 'test' 라는 이름의 페이지가 생성된다. 여기서 1번과 2번의 차이점이 발생한다. 
==== 1번 ====
/var/www/html/dokuwiki/data/pages 아래에 test 라는 디렉토리가 생성되고, 그 아래에 test.txt 파일이 생성된다. 
==== 2번 ====
/var/www/html/dokuwiki/data/pages 아래에 test.txt 파일이 생성된다. 

디렉토리를 카테고리라고 보면 되는데, 차후에 관리를 위해서는 같은 카테고리의 위키페이지는 같은 디렉토리로 묶어주는 것이 좋다.
===== 미디어 파일 업로드 =====
위키페이지에 삽일할 파일(대부분 사진)들은 페이지 파일(.txt)과 다른 경로(/var/www/html/dokuwiki/data/media)에 저장된다. 역시 카테고리로 만들고 싶다면, 디렉토리로 만들면 된다. 

<code text>
#cd /var/www/html/dokuwiki/data/media
#mkdir book
#chown -R www-data.www-data book
</code>

위와 같이 디렉토리 권한(www-data)을 변경해야 한다. 페이지 입력 시에 사진 업로드 창이 뜨고, 앞서 만든 디렉토리를 선택 후 업로드하면 된다.
====== 페이지 권한 설정하기 ======
각 위키페이지별로 권한을 설정할 수 있다. 로그인 후에 '관리페이지 - 접근 제어 목록 관리' 를 이동한다. 디렉토리 또는 하위 페이지별로 권한 설정이 가능하다. 

^ 사용자/그룹 ^ 설명 ^
| @ALL | 로그인하지 않은 사용자 |
| @user | 로그인 한 사용자 |

^ 권한 ^ 설명 ^
| 없음 | 접근할 수 없음 |
| 읽기 | 읽기만 허용 |
| 편집 | 읽기 및 수정 가능 |
| 만들기 | 새로운 페이지 생성 가능 |
| 올리기 | 미디어 파일 업로드 가능 |
| 삭제 | 미디어 파일 변경, 삭제 가능 |

====== 도쿠 위키문법 ======
페이지를 작성하는 데 필요한 문법들은 [[wiki:syntax]] 문서를 참고한다. 이외에 추가적으로 필요한 내용을 적었다. 
===== 리스트 작성 =====
글을 작성하다보면, 숫자가 표시된 리스트를 적게 된다. 한줄씩 띄어쓰기가 되어 있다면, 큰 문제가 없겠지만, 리스트 중간에 '코드' 나 다른 리스트가 들어간다면, 숫자가 '1'로 초기화될 수 있다. 아래의 예제를 보자.

<file>
  - first item 
  - second item with linebreak\\ second line
  - third item with code: <code>
some code
comes here
</code>
  - fourth item
</file>

실제 아래와 같이 출력된다. 

  - first item 
  - second item with linebreak\\ second line
  - third item with code: <code>
some code
comes here
</code>
  - fourth item

아래의 다른 예제를 보자. 
<file>
  - 첫번째
  - 두번째
  - 세번째
    - 작은 세번째
    - 더작은 세번째
  - 네번째
</file>
결과는 다음과 같다. 
  - 첫번째
  - 두번째
  - 세번째
    - 작은 세번째
    - 더작은 세번째
  - 네번째

===== 특수문자 입력 =====
도쿠위키에서 예약된 태그들이 있다. 이를 출력하기위해서는 nowiki 태그를 사용하면된다.
===== 지원되는 미디어 파일이지만, 제대로 재생이 안될 경우 =====
DokuWiki가 지원하는 미디어 파일은 다음과 같다. 

| Image  | gif, jpg, png   |
| Video  | webm, ogv, mp4  |
| Audio  | ogg, mp3, wav   |
| Flash  | swf             |

mp4 파일을 업로드했지만, 실제 웹 상에서 실행이 안될 수 있다. 파일의 문제일 수도 있고, 브라우저 또는 PC 의 문제일 수도 있다. 이런 경우, 아래처럼 끝에 ?linkonly 를 추가하면 바로 이미지로 표시되지 않고, 링크로 표시된다. 
<code text>
{{wiki:dokuwiki-128.mp4?linkonly}}
</code>
===== 테이블에 이미지를 추가하고, 입력한 글자가 길어 페이지가 넘어가는 경우 =====
문제가 발생한 상황은 이렇다. 여행페이지에서 테이블을 써서 한 칸(컬럼)에 사진과 글을 함께 썼다. PC 에서는 문제가 없었지만, 해상도가 작은 휴대폰에서는 글자가 길어서 옆의 칸으로 넘어가버렀다.
해결방법은 테이블 설정을 변경하는 것이다. 설정페이지에서 'Layout - Table style' 항목에서 'responsive' 체크를 해제하는 것이다.
===== 첨자 만들기 =====
첨자를 만들 수 있다. 아래와 같이 입력한다. 
<code text>
그((자전거여행자))는 2000일 동안 세계를 돌아다니고 있다.
</code>
그((자전거여행자))는 2000일 동안 세계를 돌아다니고 있다.
===== 사진 크기 조절하기 =====
사진 크기를 강제로 줄여보자.
<code text>
{{wiki:dokuwiki-128.png?200x50}} // 가로 200, 세로 50
{{:journey:korea:2008:2:5.jpg?nolink&100}}  // 가로 100
{{:journey:korea:2008:2:5.jpg?nolink&100x100}}  // 가로 100, 세로 100
{{:journey:korea:2008:2:5.jpg?nolink}}  // 원본 사이즈
</code>

{{wiki:dokuwiki-128.png?200x50}}
{{:journey:korea:2008:2:5.jpg?nolink&100}}
{{:journey:korea:2008:2:5.jpg?nolink&100x100}}
{{:journey:korea:2008:2:5.jpg?nolink}}

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

  - 캐쉬를 사용하지 못하게 명령어 <nowiki>~~NOCACHE</nowiki> 사용하기
  - 설정페이지에서 '저장'버튼을 눌러 저장하기
  - conf/local.php 파일에 touch 명령어 사용하기
  - [[https://www.dokuwiki.org/plugin:stale|Stale]] 플러그인 사용하기
  - 해당 페이지를 수정하기

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

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

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

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

===== 구글맵 상단 부분이 짤려 보일때 =====
구글의 정책 때문에 제대로 보이던 구글맵이 어느날 갑자기 상단부분에 검은색 또는 문자가 보일 경우가 있다. 
이럴 때는 코드를 수정해주어야 한다.

<code text>
<style>
    #mapsengine-box-outerr {overflow: hidden;}
    #mapsengine-box-innerr {
        overflow: hidden;
        width: 100%;
        height:400px;
        border:0px; solid #998;
        border-radius:0px;
        }
    #mapsengine {
	margin: -65px 0 0 -5px;     // 수정
   	border-bottom-width: 0px;
	border-bottom-style: solid;
	border-right-width: 0px;
	border-right-style: solid; 
    }
</style>     
</code>

'-65' 를 수정하는데, 숫자가 높을 수록 아래로 내려가고, 적을 수록 위로 올라간다. 보통 윗부분이 보이기 때문에 이를 가리기 위해서는 기존에 입력된 숫자보다 더 높은 숫자로 바꿔주면 된다.

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

==== navbar.php 수정 ====
likewind.ml/public_html/lib/tpl/bootstrap3/tpl/navbar.php 파일에 아래와 같이 추가한다.
<code 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' : '') ?>">
...
</code>
제대로 수정했다면, 페이지 상단 오른쪽에 언어를 선택할 수 있는 창이 뜰 것이다. 

===== userstyle.css 수정 =====
언어를 선택할 때마다 상단에 출력되는 바(bar)를 없애는 것이 좋다. 따라서 dokuwiki/conf/userstyle.css 파일을 아래처럼 수정한다. 
<code 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;
  }
</code>
===== 로고 글자 번역막기 =====
왼쪽 상단에 있는 로고 글자인 'likewind' 는 번역되지 않아야 한다. 이를 위해 특정 태그를 사용해서 자동 번역되는 걸 막을 수 있다. 앞서 수정한 likewind.ml/public_html/lib/tpl/bootstrap3/tpl/navbar.php 파일에 아래와 같이 'span' 태그를 추가한다.

<code php>
...
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')): ?>
            ...
</code>
===== 다량의 파일 업로드 시 유의할 점 =====
여러 장의 사진 파일을 올리다보면, 오류가 발생할 수 있다. 이런 경우에는 창을 닫고 다시 올려야 한다. 또한 media 디렉토리 아래에 'undefind' 디렉토리가 생성되고 안에 파일이 있는지 확인한다. 이 파일들을 제대로된 경로에 올리고, 삭제해준다.

===== 구글 애드센스 추가방법 =====
애드센스(adsense) 광고를 추가하기 위해서는 특정 코드(script 태그)를 <head></head> 태그 사이 추가해야 한다. 추가할 파일의 위치는 사용하는 테마에 따라 다르다. 
나의 경우, lib/tpl/bootstrap3/main.php 파일에 아래와 같이 추가했다. 

<code text>
...
?><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo $conf['lang'] ?>" dir="<?php echo $lang['direction'] ?>" class="no-js">
<head>
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxx"
     crossorigin="anonymous"></script>   // 추가
    <meta charset="UTF-8" />
    <title><?php echo $TPL->getBrowserPageTitle() ?></title>
    <script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
    <meta name="viewport" content="width=device-width,initial-scale=1" />

...
</code>

여기서 로그인한 경우, 광고가 뜨지 않게 설정해보자. 앞서 추가한 코드 시작과 끝에 아래와 같이 추가한다. 

<code text>
<head>

  <?php if (!$_SERVER['REMOTE_USER']): ?>  // 추가
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxx"
     crossorigin="anonymous"></script>
    <?php endif; ?>      // 추가
    
    <meta charset="UTF-8" />  
</code>

===== 구글맵 표시할 때 유의할 점 =====
자바스크립트를 이용해서 구글지도를 표시할 때는 google map api 를 사용해야한다. 사전에 계정을 등록하고 api 키를 받아야 한다. 
https://console.cloud.google.com/ 에서 'API 및 서비스 -> 사용자 인증정보' 메뉴의 API 키 에서 확인할 수 있다. 키를 생성하고 반드시, '애플리케이션 제한사항 설정' 을 해주어야 한다. 키가 노출되어 무분별한 사용을 방지하기 위함이다. 특정 웹사이트 또는 앱에서만 호출할 수 있도록 설정한다.

===== kml 파일 생성 시 유의할 점 =====
kml 파일은 구글드라이브의 '내지도' 서비스에서 만들 수 있고 수정할 수 있다. kml 파일을 업로드하고, 해당 경로를 선택하면, 입력창이 뜬다. 
기본적으로는 이름, 설명을 입력하는데, 이때 아래의 규칙에 따른다. 

  - 이름 : 영어로 입력
  - 설명 : 한글로 입력

이름은 info window 의 제목에 출력되고, 설명은 제목 아래에 출력되는데, 폰트를 변경할 수 있는 것은 '설명' 데이터 뿐이다. 
===== 업로드 가능한 파일 추가하기 =====
도쿠위키의 미디어 윈도우를 통해 업로드할 수 있는 파일들은 jpg, png 확장자를 가진 사진 파일이나 zip 파일등이다. 이외에 다른 확장자를 가진 파일을 업로드하려고 하면 오류메세지가 뜬다. 물론 FTP 를 통해 업로드 할 수도 있겠지만, 사이트에서 해당 파일의 출력이 안되는 문제가 발생한다. 
대표적인 예가 SVG(벡터이미지 포맷)의 이미지다. 도쿠위키를 통해 업로드 할 수 없고, FTP 로 올리면 브라우저에서 출력이 안된다. 이런 경우는 설정파일(conf/mime.conf)을 수정해야 한다. 

<code text>
svg     image/svg+xml
</code>

위의 설정을 추가한다. 이제 업로드가 가능할 것이다. 
===== 랜덤 데이터를 위한 페이지들 구성 =====
플러그인의 형태로 랜덤(random) 기능을 제공하고 있기는 하지만, 내가 원하는 정도에는 못 미친다. 결국 자바스크립트를 사용해서 별도의 페이지를 만들어야 했다. 
  * [[:journey:random:start|국가별 랜덤 데이터]] - 글, 사진