nme.kr

문서의 이전 판입니다!


도쿠위키 제작 일지

도쿠위키 설치

쥔장의 경우

우선 다운로드

도쿠위키 최신 다운로드

도쿠위키를 다운로드 받으십시오

도쿠위키 처음 설정

ftp의 경우 : 업로드 해주면 된다. 시간이 좀 걸리더라. (다른 일 보고 오기를 추천) / 도메인 경로로 접속하면 된다. 안 되면 install.php 붙여서 접속해보고, 폴더 권한설정 777로 해보고, 그래도 에러메시지나 페이지 없음 어쩌구 뜨면 내가 사용하고 있는 업체의 php 버젼을 확인하라~

환경설정

테마 등을 바꾸기 위해서는 ./conf/dokuwiki.php 이 파일을 수정해야 한다.

한글 버젼으로 하고 테마를 변경하기 위해

이렇게 수정해주었다.

메인페이지의 수정

어찌보면 가장 중요한 껍데기(스킨)에서의 핵심 파일이 바로 :!:main.php 파일이다. 스킨을 적용해주고, 그 나머지 디자인과 기능들은 이 파일의 수정을 통해 지금 보고 있는 디자인이 모두 이루어진 것이다.

경로 : ./lib/tpl/white/main.php

main.php
<?php
/**
 * DokuWiki NME Template
 *
 * @link     http://nme.kr
 * @based on white template
 * @editor  [email protected]
 * @license  GPL 2 (http://www.gnu.org/licenses/gpl.html)
 */
 
if (!defined('DOKU_INC')) die();
@require_once(dirname(__FILE__).'/tpl_functions.php');
header('X-UA-Compatible: IE=edge,chrome=1');
$showSidebar = page_findnearest($conf['sidebar']);
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $conf['lang'] ?>" lang="<?php echo $conf['lang'] ?>" dir="<?php echo $lang['direction'] ?>" class="no-js">
 
<head>
    <!-- Google Tag Manager -->
    <script>
        (function(w, d, s, l, i) {
            w[l] = w[l] || [];
            w[l].push({
                'gtm.start': new Date().getTime(),
                event: 'gtm.js'
            });
            var f = d.getElementsByTagName(s)[0],
                j = d.createElement(s),
                dl = l != 'dataLayer' ? '&l=' + l : '';
            j.async = true;
            j.src =
                'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
            f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', 'GTM-WJ3T8KM');
    </script>
	    <!-- End Google Tag Manager -->
    <script type="text/javascript" src="view-source:http://usablica.github.io/widearea/widearea.js?v030"></script>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, 
  maximum-scale=1.0, minimum-scale=1.0">
    <meta name="description" content="nme.kr - name - 문학, 클래식, 어학, 여행회화, 상용구, 단문장사전, 어문학사전">
    <meta property="og:type" content="website">
    <meta property="og:title" content="nme.kr - name - 문학, 클래식, 어학, 여행회화, 상용구, 단문장사전, 어문학사전">
    <meta property="og:description" content="nme.kr - name 원서로 읽기 위한, 문학, 클래식, 어학, 여행회화, 상용구, 단문장사전, 어문학사전">
    <meta property="og:image" content="https://nme.kr/katoc.jpg">
    <meta property="og:url" content="https://nme.kr">
    <?php tpl_metaheaders() ?>
    <?php tpl_includeFile('meta.html') ?>
    <title><?php tpl_pagetitle() ?> [<?php echo strip_tags($conf['title']) ?>]</title>
    <script>
        (function(H) {
            H.className = H.className.replace(/\bno-js\b/, 'js')
        })(document.documentElement)
    </script>
 
    <?php echo tpl_favicon(array('favicon', 'mobile')) ?>
    <script>
        window.dataLayer = window.dataLayer || [];
 
        function gtag() {
            dataLayer.push(arguments);
        }
        gtag('js', new Date());
        gtag('config', 'UA-177213008-1');
    </script>
 
    <!--- 구글 애드센스 스크립트 --->
    <script data-ad-client="ca-pub-3614176458286759" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <!--- 구글 애널리틱스 스크립트 --->
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-177213008-1"></script>
    <!--- 우측 광고 정렬 스크립트 --->
    <style type="text/css" media="screen and (min-width:769px)">
       #parent1 {
            position: relative;
            z-index: 3;
        }
       #child {
            position: absolute;
            display: none;
	z-index: 1;
        }
    </style>
 
    <style type="text/css">
        #button {
            background: #FFF;
        }
 
        #button:hover {
            background: #F2F2F2;
        }
    </style>
 
    <link rel="stylesheet" type="text/css" href="/dw/lib/plugins/widearea/widearea/widearea.css" />
 
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
</head>
 
<body id="dokuwiki__top">
    <div id="dokuwiki__site" class="<?php echo tpl_classes(); ?> <?php echo ($showSidebar) ? 'hasSidebar' : ''; ?>">
        <?php html_msgarea() ?>
        <?php tpl_includeFile('header.html') ?>
<div id="parent1">
        <!-- ********** HEADER ********** -->
         <div id="dokuwiki__header">
            <div class="group">
                <h1><?php tpl_link(wl(),$conf['title'],'accesskey="h" title="[H]"') ?></h1>
                <div class="left">
                    <?php if ($showSidebar): ?>
                    <button class="btn_left" accesskey="m" , title="[M]">Nav</button>
                    <?php endif; ?>
                </div>
                <div class="right">
                    <button class="btn_search" accesskey="s" , title="[S]">Search</button>
                    <button class="btn_right" accesskey="i" , title="[I]">Edit</button>
                </div>
            </div>
            <div class="search">
                <?php tpl_searchform(); ?>
            </div>
        </div><!-- /header -->
 
        <!-- ********** sidebar ********** -->
        <div id="sidebar_wrapper">
            <!-- ********** ASIDE ********** -->
            <?php if ($showSidebar): ?>
            <div id="dokuwiki__aside" class="sidebar">
                <?php tpl_includeFile('sidebarheader.html') ?>
                <?php tpl_include_page($conf['sidebar'], 1, 1) ?>
                <?php tpl_includeFile('sidebarfooter.html') ?>
 
                <div id="button" style="font-size:12px; border: solid 1px; padding:5px; margin:5px; width:160px; height:30px;">
                    <img src="https://nme.kr/dw/lib/tpl/white/fold.png" align=middle><a href="javascript:void(0);" class="fold_unfold_all" onclick="fold_unfold_all();" rel="nofollow" title="Fold/unfold all"><span><b>전체 접힌 글 펴기 / 접기</b></span></a>
                </div>
 
                <!-- TOC -->
                <div id="sidebar" style="padding:5px; margin:5px;">
                    <?php tpl_toc()?>
                </div>
            </div><!-- /dokuwiki__aside -->
            <?php endif; ?>
 
            <div id="dokuwiki__tools" class="sidebar left">
                <!-- PAGE TOOLS -->
                <div id="dokuwiki__pagetools">
                    <h3><?php echo $lang['page_tools'] ?></h3>
                    <ul>
                        <?php white_toolsevent('pagetools', array(
                            'edit'      => tpl_action('edit', 1, 'li', 1, '<span>', '</span>'),
                            'revisions' => tpl_action('revisions', 1, 'li', 1, '<span>', '</span>'),
                            'backlink'  => tpl_action('backlink', 1, 'li', 1, '<span>', '</span>'),
                            'subscribe' => tpl_action('subscribe', 1, 1, '<span>', '</span>'),
                            'revert'    => tpl_action('revert', 1, 'li', 1, '<span>', '</span>'),
                        )); ?>
                    </ul>
                </div><!-- /dokuwiki__pagetools -->
 
                <!-- SITE TOOLS -->
                <div id="dokuwiki__sitetools">
                    <h3><?php echo $lang['site_tools'] ?></h3>
                    <ul>
                        <?php white_toolsevent('sitetools', array(
                            'recent'    => tpl_action('recent', 1, 'li', 1, '<span>', '</span>'),
                            'media'     => tpl_action('media', 1, 'li', 1, '<span>', '</span>'),
                            'index'     => tpl_action('index', 1, 'li', 1, '<span>', '</span>'),
                        )); ?>
                    </ul>
                </div><!-- /dokuwiki__sitetools -->
 
                <!-- USER TOOLS -->
                <?php if ($conf['useacl']): ?>
                <div id="dokuwiki__usertools">
                    <h3><?php echo $lang['user_tools'] ?>
                    </h3>
                    <ul>
                        <?php white_toolsevent('usertools', array(
                            'admin'     => tpl_action('admin', 1, 'li', 1, '<span>', '</span>'),
                            'register'  => tpl_action('register', 1, 'li', 1, '<span>', '</span>'),
                            'login'     => tpl_action('login', 1, 'li', 1, '<span>', '</span>'),
                        )); ?>
                    </ul>
                    <h3><a href="http://nme.kr/dw/doku.php?id=index&do=admin&page=move_tree">왼쪽 메뉴 편집</a>
                        <p>
                            <p>
                                <a href="http://nme.kr/dw/doku.php?id=index&do=admin&page=extension">&nbsp;Plugin 관리</a>
                                <p>
                                    <a href="http://nme.kr/dw/doku.php?id=index&do=admin&page=styling">&nbsp;테마 디자인</a>
                    </h3>
 
<!-- Kakaotalk Share -->
 
<div>
&nbsp;
</div>
<center><input type="image" onClick="sendLinkCustom();" src="https://developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png" width="25" height="25">&nbsp;<b>카카오톡 링크 보내기</b></center>
 
<script type="text/javascript">
    function sendLinkCustom() {
        Kakao.init('e4dc9d94bcfd69949b12133b45c4d2cb');
        Kakao.Link.sendCustom({
            templateId: 75002
        });
    }
</script>
 
<script type='text/javascript'> //<![CDATA[ // // 사용할 앱의 JavaScript 키를 설정해 주세요. Kakao.init('e4dc9d94bcfd69949b12133b45c4d2cb'); // // 카카오링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다. Kakao.Link.createScrapButton({ container: '#kakao-link-btn', requestUrl: 'http://nme.kr', templateId : 75002 }); //]]> </script>
 
 
                </div><!-- /dokuwiki__usertools -->
                <?php endif ?>
            </div><!-- /dokuwiki__tools -->
 
            <div id="sidebar_bg">
            </div>
 
            <div id="to_top">
                <?php tpl_action('top') ?>
            </div>
        </div><!-- /sidebar_wrapper -->
 
        <div class="wrapper group">
 
            <div style="border:1px solid lightgray;">
 
                <!-- ********** CONTENT ********** -->
                <div id="dokuwiki__content">
	            <div class="group" id="parent1" style="background-color: #FFFFFF" style="height: 100%; width: 100%">
                        <?php tpl_flush() ?>
                        <?php tpl_includeFile('pageheader.html') ?>
 
                        <!-- BREADCRUMBS -->
                        <?php if($conf['breadcrumbs']){ ?>
                        <div class="breadcrumbs"><?php tpl_breadcrumbs($ret='›') ?></div>
                        <?php } ?>
                        <?php if($conf['youarehere']){ ?>
                        <div class="breadcrumbs"><?php tpl_youarehere() ?></div>
                        <?php } ?>
 
                        <div class="page group 
                <?php if(tpl_getConf('numberedHeading')): ?> numbered_heading<?php endif ?>
                <?php if(tpl_getConf('tocPosition')): ?> toc_<?php echo tpl_getConf('tocPosition') ?><?php endif ?>
                ">
	                <!-- wikipage start -->
		<div>
		    <?php tpl_content() ?>
 
		    <!-- wikipage stop -->
                        </div>
                        <?php tpl_flush() ?>
                        <?php tpl_includeFile('pagefooter.html') ?>
                    </div>
                </div><!-- /content -->
                <a href="https://nme.kr"><img src="https://nme.kr/dw/logo.gif" border="0"></a>
                <!-- ********** FOOTER ********** -->
                <div id="dokuwiki__footer">
                    <?php if($INFO['exists']): ?>
                    <div class="doc"><?php white_pageinfo() ?></div>
                    <?php endif ?>
                    <?php tpl_includeFile('sidebarfooter.html') ?>
                    <?php tpl_license('badge', false, false) ?>
                    <div class="footer">
                        <?php tpl_include_page(tpl_getConf('footer'), 1, 1) ?>
                    </div>
                </div><!-- /footer -->
 
                <?php tpl_includeFile('ads.html') ?>
            </div><!-- /wrapper -->
 
 
	        </div>
		</div><!-- /site -->
 
        <div class="no"><?php tpl_indexerWebBug() /* provide DokuWiki housekeeping, required in all templates */ ?></div>
 
        <!-- Google Tag Manager (noscript) -->
        <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WJ3T8KM" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
        <!-- End Google Tag Manager (noscript) -->
 
        <!-- Naver Analytics -->
        <script type="text/javascript" src="//wcs.naver.net/wcslog.js"></script>
        <script type="text/javascript">
            if (!wcs_add) var wcs_add = {};
            wcs_add["wa"] = "4b599b83947410";
            if (window.wcs) {
                wcs_do();
            }
        </script>
        <!-- End Naver Analytics -->
 
</body>
 
</html>

Friday:24.05.03 수정

도쿠위키 꾸미기

Plugin

plugin 은 도쿠위키라고 하는 신차에 달리는 옵션이라고 할 수 있다. 플러그인의 기능에 따라서는 스마트폰의 앱만큼이나 기능이 없는 기기에 날개를 달아준다고도 볼 수 있다. 하지만, 여기에도 무분별한 플러그인의 설치는 에러 메시지 출력을 보게 될 수 있으니 꼭 필요한 기능을 위주로, 내 도쿠위키 버젼과 호환성(되도록 너무 오래된 플러그인은 깔지 말자) 및 다른 플러그인 설치 및 충돌에 대한 설명을 잘 읽어보고 설치하자.

설치할 때 포함되어 있거나 함께 받을 수 있는 기본 옵션 플러그인

:!: 용법에 관해서는 논외의 플러그인을 통한 구문 문법에 정리를 해놓고 있다.

  • 포함되어 있는 플러그인(24.05.03 hogfather 버젼 기준
  1. 플러그인 확장 관리자 : plugin:extension 번거롭게 ftp로 접속해서 폴더로 업로드를 안 해도 검색과 설치를 편하게 해주는 플러그인이다. 편리한만큼 플러그인이 에러 메시지를 출력하면 답이 없다. ;;;; 해결법이 있는지 모르겠지만 ftp로 접속해서 걍 설치했던 플러그인 폴더를 지워야 한다. 플러그인을 설치할 때 신중하자.
  • 다운로드할 때 체크해서 받을 수 있는 플러그인 (활용도를 볼 때 필수 플러그인이다)
  1. 업그레이드 플러그인 : plugin:upgrade 도쿠위키 엔진을 쉽게 업그레이드 시킬 수 있는 플러그인
  • 추가하고 있는 플러그인 (깔았다가 필요 없으면 결국 정리할 것이다.)
  1. 플러그인 추가 : 폴더 plugin:folder 이곳을 먹여 살리고 있는 플러그인이다. 사용법도 단순.
  2. 플러그인 추가 : 키워드 plugin:keywords {{keywords>키워드추가,}}
  3. 24.05.03 플러그인 추가: ← 글머리에 이거
  4. 날짜형식 삽입 코드 : {{<date>% A : % d. % m. % y}}> plugin:date 날짜 삽입 플러그인
  5. 24.05.03 플러그인 추가 : 검색폼 넣기 코드 : {searchform}plugin:searchform 내부 검색이 필요해서 깔았는데 그닥 ;;

플러그인 리스트 목록으로 되어 있는 전체 플러그인 리스트이다.

template

현재 이곳에 적용되어 있는 템플릿은 white 템플릿이다. template:white 한국사람이 제작했으며 (예제 스샷이 아이유이다~), 매우 깔끔하고 단순하며 그래서 모바일에 더더욱 이점이 있다. (하지만 데스크탑용에는 기능이 너무 없으며 단순해서 기능을 하나 추가하려면 무진장 애먹어야 한다.. ㅡㅡ;;;) 괜찮아, 는 모바일 최적화이니까 ;;;

백업 및 복구

모든 글의 데이터는 txt 파일로 저장되는 것이 도쿠위키의 특징이자, 장단점이다. (백업 복구가 간편하다)

폴더의 위치도 간단하다. ./data/pages 이곳에 저장된다.

도쿠위키 글쓰기

도쿠위키만의 문법

좀 더 나만의 홈페이지를 만들고 싶어

대문 : start

좌측 메뉴 : sidebar - indexmenu : plugin

24.05.03 현재 지금까지도 가장 애를 많이 먹고 있는 부분이다.앞으로도? ㅠㅠ

:!: 플러그인 plugin:indexmenu 이것을 사용해서 현재 왼쪽의 메뉴를 구성하고 있다. 도쿠위키에서 메뉴 구성은 좀 특이한데 좌측의 메뉴처럼 폴딩 - 트리 구조의 메뉴를 만드려면 플러그인을 통해서 구현할 수가 있다. (하지만 도쿠위키 처음 디자인만큼이나 기본으로 제공하는 것은 투박함 ;;;) 플러그인을 설치한 후, sidebar 라는 처음부터 만들어져 있던 페이지에 코드를 작성하면 그 페이지가 메뉴 페이지가 되는 형식이다. 메뉴 편집은 사이드바 페이지를 편집하면 된다. 어찌보면 매우 효율적인 시스템이긴 한데.. 원하는대로 구성하려면 쉽지가 않다. ㅜㅠ

오른쪽 글쓰기 메뉴 : tools

목차 구성 : toc

아주 긴 싸움이었다. 목차….

  1. 일단 지금의 형태는 왼쪽 sidebar 속에 넣었다. 20.08.28

소스

  1. 그리고 페이지를 열었을 때 목록이 펼쳐져 있지 않고 접혀 있도록 옵션을 수정해서 넣었다. (대신 첨에 접속하면 심하게 떨린다 ;;;) 참조 본인이 사용하는 white 템플릿에서는 scripts.js 파일에 구문이 생략되어 있다. 쩝… 그래서 2번 방법을 사용. lib/scripts/page.js 파일을 수정 dw_page.makeToggle('#dwtoc h3','#dwtoc > div',-1); -1만 끝에 붙여서 수정했다. 그리하야 덤으로 페이지 접속할 때 진동을 느낄 수 있게 되었다.

도쿠위키 Directory 구성

고오급 단계 편집

도쿠위키_디렉터리_구조

이곳은 도쿠위키라는 위키사이트로 제작되었다. 도쿠위키는 영문이다. 젝일, 내가 영어를 더 공부하던가 해야지. 네이버에서는 검색하면 아이돌 글들만 딸려 나온다. 네이버 쓰렉~ 결국 구글링인데~ 구글 자동번역하면 코드 명령어까지 같이 번역된다. 아놔… 빵부스러기 ;;;

그리하야~ 길고 긴 오딧세이 여정을 거치게 된 결과물들이다. 한글로 된 도쿠위키 정보들이 참 귀하다. ㅡㅜ 설치는 쉽다. 참 쉽다. 하지만 플러그인이 없으면 옵션없는 깡통 차에 불과하고, 디자인은 테마를 쓰면 되는데 당최 수정이 어렵다. ㅡㅜ

내부적인 꾸미기

interwiki 항목 편집

편집에 참고한 문서들

interwiki tips:interwiki_shortcuts

./conf/interwiki.conf 파일

  1. 내게 불필요한 사이트들은 싹 지우고, nme.kr 코드명 : nme>내부링크용으로,위키피디아 코드명 : wp>영문위키,구글 코드명 : go>구글검색 위키피디아 코드명 : wp>는 한국어 사이트로, 나무위키 코드명 : namu>링크 추가 했다. 오픈위키 코드명 : ow>, 네이버 코드명 : n> (아직 안된다, 안 될 듯;;), 시인과 시 검색 코드명 p> 추가 / 계속 추가 중
  2. 처음에 편집하면 새 창 옵션으로 지정이 안 되어 페이지를 나가게 된다. 불편, 따라서 열공해서 바꿨다. (이것도 시간이 ㅠㅜ) 참고 근데 어떤 파일을 편집해야 하는가? 이것땜시 삽질했다.
  3. 답은 참고

./conf/local.php

파일에서 $conf['target']['interwiki'] = '_blank'; 추가하면 된다.$conf['target']['extern'] = '_blank'; 여기에다 그냥 ['interwiki']넣었다가 홈페이지에서 아무것도 안 눌러지는 먹통현상이 발생했다. 쩝, 따로 한 줄 넣어주어야 한다.

  1. (아이콘은 업로드를 했는데 아직 안 뜬다.;;) 분명 namu 라는 이름으로 png 만들어서 ./lib/images/interwiki 에 올렸는데 말이다. 뭐가 잘못됐지?쿠키탓이었다. 잘된다. / 관리자 로그인 - 설정 - 저장해주면 해결 된다.

아이콘을 사용해 보자

인터위키를 사용하는데 맛들리니 이제 아이콘을 넣어 문서를 만들고 싶어졌다. 그래서 연구했다.

결과 - devel:smileys.conf 참조 / 현재 이곳에 적용된 아이콘은 아래와 같다.

:f: - 코드 :f: 폴더 아이콘 추가

이미지 업로드 경로는 :f:./ lib/images/smileys

./conf/smileys.conf

자질구레한 것들

주소입력창에 아이콘을 넣었다. 익스플로러의 경우,

<link rel="shortcut icon" href="이미지경로">

  1. 1차적인 방법 : <head></head> 사이에 (보통 타이틀 아래) 넣고 경로를 수정해준다. png, jpg 같은 파일이 다 적용된다. 사이즈만 16×16 이면 좋다. 참조
  2. 보다 고급스런 방법이다. 위의 참조는 무시하기로 한다. 나는 도쿠위키이니까, 도쿠위키에 맞게 우선, favicon.ico 파일을 만들어 둔다. 걍 png 파일 저장이나 이름 바꾸기로 해서 .ico 로 만든다. 사이즈도 되기만 하면 되지 16×16으로 한다. 그 다음에 tips:favicons 여기를 참조해서, ./data/media 폴더와 ./lib/tpl/dokuwiki/images 폴더에 업로드 시켜주기만 하면 끝이다.

좀 더 깊이 있게 파고들고자 하면

도쿠위키_디렉터리_구조 ⇒ 이곳을 참고하시길

도쿠위키 사이트들

  1. https://www.dokuwiki.org 이 홈페이지 제작의 툴이 제공되고 있는 곳이다. (영문)
  2. https://openwiki.kr/ 오픈위키 : 보기엔 대단히 어지러워 보이지만 @.@ 그만큼 내공이 있는 국내 최대? 도쿠위키 사이트
  3. http://elfism.com/ 엘프화가님의 위키(개인) 많지 않으며 잘 없어지는 개인 위키 사이트들 중에 1위로 꼽을 수 있겠다. (도쿠위키 한정) 많은 부분 참고하고 도움을 받았다.
  4. http://kieuns.com 긴스위키