도쿠위키는 페이지제목을 상단오른쪽에 아주 작게 표시한다. 그리고 심지어 이러한 페이지 제목은 모바일 화면에서는 나오지도 않는다.

막상 내가 지금 무슨 제목의 페이지를 보고 있는지 알 수가 없는 것이다. 이는 불합리하다. 따라서 페이지 제목을 본문에 큼지막하게 넣어서 지금 보고 있는 페이지가 어떤 내용을 담고 있는지 아주 크게 인식시키려고 한다.

우리는 main.php 파일을 변경할 것이다. 이에 대한 css 파일은 design.less 파일에 있다.

(root)/libe/tpl/(내템플릿)/css/design.less

주석으로 content라고 쓰여 있는 부분 아래에 다음과 같이 pageTitle이란 css 클래스를 만들어 주자

.dokuwiki div.pageTitle {
    font-family: 'GoryeongStrawberryWeb'; 
    text-align: center;
    border: 5px solid green;
    padding: 0.5em 1em 0.5em 1em;
    font-size : 2.2em;
    height:30px;
    line-height: 30px;
    margin-bottom: 20px;
    color:coral;   
    text-shadow: 2px 2px 3px gold;
}

템플릿의 루트 폴더에 있다.

(root)/libe/tpl/(내템플릿)/main.php

content라고 주석으로 쓰여진 부분의 하단을 아래와 같이 수정한다.

            <main id="dokuwiki__content"><div class="pad group">
                <?php html_msgarea() ?>
 
                <div class="pageId"><span><?php echo hsc($ID) ?> </span></div>
                <div class="page group">
                    <?php tpl_flush() ?>
                    <?php tpl_includeFile('pageheader.html') ?>
                    <!-- wikipage start -->
                    <div class="pageTitle"><?php echo hsc(str_replace("_"," ",$INFO['id'])); ?> </div>   <!-- 수정한 코드 : 타이틀을 추가한다. -->
                    <?php tpl_content() ?>
                    <!-- wikipage stop -->
                    <?php tpl_includeFile('pagefooter.html') ?>
                </div>

단순하게

  <div class="pageTitle"><?php echo hsc(str_replace("_"," ",$INFO['id'])); ?> </div> 

한 줄만 넣으 것이다. 이렇게 하면 제목을 삽입할 수 있다.

내가 만든 도쿠위키 템플릿 파일이다. 참고하도록 여기에 올린다.

법학위키 템플릿 파일

압축을 풀어서 템플릿 파일 폴더에 넣으면 된다.

도쿠위키의 css 설정하기