<div id="readability-page-1" class="page"><div class="page">
 
 
<div id="dw__toc">
<h3>목차</h3>

</div>



&lt;title classes #id&gt;
dokuwiki_ki 템플릿 수정
&lt;/title&gt;



다른 위키 템플릿 수정 목록



<h2 id="시작">시작</h2>
<div>


기본 템플릿dokuwiki을 복사해서 수정한 이력.



<code>dokuwiki</code> → <code>dokuwiki_ki</code> 이렇게 복사해서 수정 시작함.


</div>

<h2 id="편집기_창에서_필요_없는_문장_제거">편집기 창에서 필요 없는 문장 제거</h2>
<div>
<div> <code>문서를 편집하고 저장을 누르세요. 위키 구문은 포맷팅 문법를 참조하세요. 문서를 더 좋게 만들 자신이 있을 때에만 편집하세요. 연습을 하고 싶다면 먼저 연습장에 가서 연습하세요.</code> </div>


(↑)이걸 삭제하고 편집기를 좀 더 크게 하려고.

<ul>
<li> 수정할 파일: <code>./inc/lang/ko/edit.txt</code>
</li>
</ul>


저 파일에서 스트링을 전부 삭제함


</div>

<h2 id="사이드바_배경_이미지_빼기">사이드바 배경 이미지 빼기</h2>
<div>
<ul>
<li> 파일 <code>./css/structure.less</code>, 90 쯤
</li>
</ul>
<pre>/* 아래 코드 주석화 */
/* background-image: linear-gradient(to right, rgba(255,255,255, 0.8), rgba(255,255,255, 0)); */</pre>

</div>

<h2 id="검색_후보_보여주는_팝업_위치_조정">검색 후보 보여주는 팝업 위치 조정</h2>
<div>
<ul>
<li> 파일 <code>./css/contest.less</code>, 202 줄 쯤
</li>
</ul>
<pre>.dokuwiki form.search div.ajax_qsearch {
 top: -.35em; /* top: -.35em; */
 font-size: 1em;
 text-overflow: ellipsis;
}</pre>
<ul>
<li> 파일 <code>./css/_search.less</code>, 202 줄 쯤
</li>
</ul>
<pre>.dokuwiki form.search {
 div.no {
 position: relative;
 }
&nbsp;
 /* .JSpopup */
 div.ajax_qsearch {
 position: absolute;
 top: 0;
 /* left: -13.5em; */ /* -( width of #qsearch__in + padding of .ajax_qsearch + a bit more ) */
 width: 12em;
 padding: 0.5em;
 font-size: .9em;
 z-index: 20;
 text-align: left;
 display: none;
&nbsp;
/* .... */</pre>

</div>

<h2 id="테이블_안쪽_글자_크기_조정">테이블 안쪽 글자 크기 조정</h2>
<div>
<ul>
<li> 파일 <code>css/content.less</code>
</li>
</ul>


.dokuwiki table.inline 항목 수정

<pre>.dokuwiki table.inline {
 min-width: 50%;
 font-size: inherit; /*새로 추가*/
}</pre>

</div>

<h2 id="리스트_위아래_여백을_조정">리스트 위아래 여백을 조정</h2>
<div>
<ul>
<li> 파일 <code>css/content.less</code> 파일 수정
</li>
</ul>


줄 68쯤 부분에

<pre>/*____________ lists ____________*/
&nbsp;
.dokuwiki .page{
 ul li {
 color: @ini_text_alt;
 /* 리스트 위,아래에 살짝 공간을 둔다 */
 margin-top: .4em;
 margin-bottom: .4em;
 /*margin: .4em 1em .4em 0;*/
 }
&nbsp;
 ol li {
 color: @ini_text_neu;
 }
&nbsp;
 li .li {
 color: @ini_text;
 }
}</pre>

</div>

<h2 id="구글폰트_사용">구글폰트 사용</h2>
<div>
<ul>
<li>Noto Sans KR 폰트를 추가
</li>
<li>
</li>
</ul>


main.php

<ul>
<li> &lt;head&gt; 영역에 추가할 구글 폰트 추가
</li>
</ul>
<pre>&lt;<a target="_blank" href="http://december.com/html/4/element/link.html">link</a> href="https://fonts.googleapis.com/css?family=Noto+Sans+KR|Nanum+Gothic|Do+Hyeon" rel="stylesheet"&gt;</pre>


basic.less

<ul>
<li> body에 'Noto Sans KR' 폰트를 추가
</li>
<li> body → font 항목에 새 폰트 추가
</li>
</ul>
<pre>body {
 /* font: normal 87.5%/1.4 "Malgun Gothic", Arial, sans-serif; original */
 font: normal 87.5%/1.4 'Noto Sans KR', Arial, sans-serif;
 /* default font size: 100% =&gt; 16px; 93.75% =&gt; 15px; 87.5% =&gt; 14px; 81.25% =&gt; 13px; 75% =&gt; 12px */
 -webkit-text-size-adjust: 100%;
}</pre>

</div>

<h2 id="제목에_다른_폰트_설정">제목에 다른 폰트 설정</h2>
<div>
<ul>
<li> 파일: <code>css/basic.less</code>
</li>
<li> h1 ~ h6 까지 다른 폰트 설정
</li>
</ul>
<pre>h1,
h2,
h3,
h4,
h5,
h6 {
 /* font-family: 항목 추가 */
 font-family: 'Do Hyeon', Verdana, "Lucida Grande", Lucida, Helvetica, Arial, sans-serif;
/* 이하는 그대로 쓰기 */</pre>

</div>

<h2 id="제목에_밑줄_긋기">제목에 밑줄 긋기</h2>
<div>
<ul>
<li> 파일: <code>design.less</code>
</li>
<li> 화면 상단, 위키 타이틀의 밑줄 삭제.
</li>
<li> 위 항목을 설정하면 위키 타이틀에도 밑줄이 나오는데 그걸 삭제한다.
</li>
</ul>
<pre>#dokuwiki__header {
 /* 중간 패스 */
 h1 {
 /* 중간 패스 */
 border-bottom: None; /* 밑줄 안보이게 한다 */
/* 이하는 그대로 쓰기 */</pre>

</div>

<h2 id="위키_제목에_그림자_넣기">위키 제목에 그림자 넣기</h2>
<div>
<ul>
<li><code>design.less</code>
</li>
</ul>
<pre>#dokuwiki__header {
 padding: 2em 0 1.5em;
&nbsp;
 .headings,
 .tools {
 /*margin-bottom: 1.5em;*/ /* 수정:주석化 */
&nbsp;
/* 나머지 그대로 */
&nbsp;
	h1 {
 margin: 0;
 font-size: 2.2em; /* 수정: 크기변경 */
 font-weight: normal;
		border-bottom: None;
		text-shadow: 0 0 5px rgba(0,0,0,0.5); /* 수정: 그림자추가 */
&nbsp;
		img {
 float: left;
 /*margin-right: -0.5em;*/ /* 수정:주석化 */
 }
/* 나머지 생략 */ </pre>

</div>

<h2 id="검색창_변경">검색창 변경</h2>
<div>


aside 영역 상단에 서치바 추가

<ul>
<li><code>main.php</code>
</li>
</ul>


아래 부분을 찾아서,

<pre>&lt;!-- ********** ASIDE ********** --&gt;
&lt;div id="dokuwiki__aside"&gt;&lt;div class="pad aside include group"&gt;</pre>


사이드바 출력하는 윗 부분에 검색창 추가 

<pre>// sidebar 출력하는 코드는 이거 비슷할 것임
&lt;h3 class="toggle"&gt;&lt;?php echo $lang['sidebar'] ?&gt;&lt;/h3&gt;</pre>


추가할 검색창 코드

<pre>&lt;!-- SITE TOOLS --&gt;
&lt;div id="dokuwiki_aside_sitetools"&gt;
 php tpl_searchform(); ?&gt;
&lt;/div&gt;</pre>


원래 검색창을 감춘다.

<ul>
<li><code>tpl_header.php</code>
</li>
</ul>


tpl_searchform() 함수 실행하는 부분을 찾아서 주석으로.

<pre>&lt;!-- SITE TOOLS --&gt;
&lt;div id="dokuwiki__sitetools"&gt;
 &lt;h3 class="a11y"&gt;&lt;?php echo $lang['site_tools']; ?&gt;&lt;/h3&gt;
 &lt;?php /*tpl_searchform();*/ ?&gt; &lt;!-- &lt;- 이 함수 쓰이는 곳을 주석으로 --&gt;</pre>

</div>

<h2 id="배경_변경">배경 변경</h2>
<div>
<ul>
<li><code>css/basic.less</code>
</li>
</ul>
<pre>body {
 color: @ini_text;
 /*background: @ini_background_site url(images/page-gradient.png) top left repeat-x;*/
 background: @ini_background_site url(images/page_bg_white.jpg);</pre>
<ul>
<li><code>css/structure.less</code>
</li>
</ul>


dokuwiki__aside를 찾는다.

<pre>#dokuwiki__aside {
 width: @ini_sidebar_width;
 float: left;
 position: relative;
 display: block;
 /* 아래부분이 추가된것. 흰색을 투명도 그라데이션을 넣는다. */
 background-image: linear-gradient(to right, rgba(255,255,255, 0.8), rgba(255,255,255, 0));</pre>

</div>


<div>
<ul>
<li><code>css/design.less</code>
</li>
</ul>
<pre>#dokuwiki__sitetools {
 text-align: right;
 /* 아래 2줄 추가 */
 position: relative;
 top: 1em;
/* 이하 생략 */</pre>
<ul>
<li><code>css/usertools.less</code>
</li>
</ul>


#dokuwiki__usertools를 찾아 수정한다.

<pre>#dokuwiki__usertools {
 position: absolute;
 top: 0.5em; 
 /*top: 1.8em;*/ /* 이 숫자를 늘려 아래로 내린다 */
 right: 40px; // pagetool width
 text-align: right;
 width: 100%;
/* 이하 생략 */</pre>

</div>

<h2 id="toc를_검색창_아래에_두기">TOC를 검색창 아래에 두기</h2>
<div>
<ul>
<li><code>css/content.less</code>
</li>
</ul>
<pre>/* sidebar css 속성을 arctic-mbo 에서 가져오기 */
div.dokuwiki div.sidebar_box {
 border: 1px solid #ccc;
 margin-bottom: 0.8em;
 padding: .3em;
 overflow: hidden;
}
&nbsp;
#dw__toc {
 margin: -0.1em 0em -0.1em 0em;
 /*margin: -1.556em -2em .5em 1.4em;*/
 width: @ini_sidebar_width;
 /*border-left: 1px solid @ini_border;*/
 background: @ini_background;
 color: inherit;
}</pre>
<ul>
<li> main.php
</li>
</ul>
<pre>&lt;!-- 아래 부분 코드를 참조해서 넣을 위치를 찾는다 --&gt;
&nbsp;
&lt;!-- ********** ASIDE ********** --&gt;
&lt;div id="dokuwiki__aside"&gt;&lt;div class="pad aside include group"&gt;
 &lt;!-- SITE TOOLS --&gt;
 &lt;div id="dokuwiki_aside_sitetools"&gt;
 &lt;?php tpl_searchform(); ?&gt;
 &lt;/div&gt;
&nbsp;
 &lt;!-- 아래 줄을 추가한다 --&gt;
 &lt;div class="toc_sidebar sidebar_box"&gt;&lt;?php tpl_toc(); ?&gt;&lt;/div&gt;
&nbsp;
&lt;!-- 이하 생략 --&gt;</pre>

</div>

<h2 id="목차를_글_위에_배치하기">목차를 글 위에 배치하기</h2>
<div>
<ul>
<li><code>./css/content.less</code> 311 줄쯤.
</li>
<li><code>dw__toc</code>로 검색하기 하면 이런 글이 <code>./css/content.less:311:#dw__toc {</code>
</li>
</ul>
<pre> #dw__toc {
 margin: -0.1em 0em -0.1em 0em;
 /*margin: -1.556em -2em .5em 1.4em;*/
 width: @ini_sidebar_width; =&gt; 30%
 /*border-left: 1px solid @ini_border;*/
 /* background: @ini_background; */ /* &lt;- 주석화 */
 background-color: #3333; /* &lt;- 추가한 것 */
 color: inherit;
}</pre>
<ul>
<li><code>./css/_toc.css</code> 10줄쯤
</li>
<li> 검색 결과가 <code>./css/_toc.css:10:#dw__toc {</code>
</li>
</ul>
<pre>/* toc container */
#dw__toc {
 /* float: right; */ /* &lt;- 주석화 */
 margin: 0 0 1.4em 1.4em;
 width: 12em;
 background-color: @ini_background_alt;
 color: inherit;
 /* 아래부분을 추가해서 글 위로 배치 */
 position: absolute;
 right: 10px;
 top: 10px;
}</pre>
<ul>
<li> 목차 너비 변경하려면, 아래 항목을 찾아서 수정
</li>
<li><code>./style.ini</code> 84줄 쯤, <code>__sidebar_width__</code>
</li>
</ul>
<pre>./style.ini:84:__sidebar_width__ = "16em" ; @ini_sidebar_width</pre>

</div>
 
 </div></div>

GINS WIKI 긴스 위키

문기은

<title classes #id>
dokuwiki_ki 템플릿 수정
</title>
다른 위키 템플릿 수정 목록
시작
dokuwiki을 복사해서 수정한 이력.
dokuwiki → dokuwiki_ki 이렇게 복사해서 수정 시작함.
편집기 창에서 필요 없는 문장 제거
	
 문서를 편집하고 저장을 누르세요. 위키 구문은 포맷팅 문법를 참조하세요. 문서를 더 좋게 만들 자신이 있을 때에만 편집하세요. 연습을 하고 싶다면 먼저 연습장에 가서 연습하세요. 
	
(↑)이걸 삭제하고 편집기를 좀 더 크게 하려고.
 수정할 파일: ./inc/lang/ko/edit.txt
사이드바 배경 이미지 빼기
 파일 ./css/structure.less, 90 쯤
/* 아래 코드 주석화 */
/* background-image: linear-gradient(to right, rgba(255,255,255, 0.8), rgba(255,255,255, 0)); */
검색 후보 보여주는 팝업 위치 조정
 파일 ./css/contest.less, 202 줄 쯤
.dokuwiki form.search div.ajax_qsearch {
 top: -.35em; /* top: -.35em; */
 font-size: 1em;
 text-overflow: ellipsis;
}
 파일 ./css/_search.less, 202 줄 쯤
.dokuwiki form.search {
 div.no {
 position: relative;
 }
 
 /* .JSpopup */
 div.ajax_qsearch {
 position: absolute;
 top: 0;
 /* left: -13.5em; */ /* -( width of #qsearch__in + padding of .ajax_qsearch + a bit more ) */
 width: 12em;
 padding: 0.5em;
 font-size: .9em;
 z-index: 20;
 text-align: left;
 display: none;
 
/* .... */
테이블 안쪽 글자 크기 조정
 파일 css/content.less
.dokuwiki table.inline 항목 수정
.dokuwiki table.inline {
 min-width: 50%;
 font-size: inherit; /*새로 추가*/
}
리스트 위아래 여백을 조정
 파일 css/content.less 파일 수정
/*____________ lists ____________*/
 
.dokuwiki .page{
 ul li {
 color: @ini_text_alt;
 /* 리스트 위,아래에 살짝 공간을 둔다 */
 margin-top: .4em;
 margin-bottom: .4em;
 /*margin: .4em 1em .4em 0;*/
 }
 
 ol li {
 color: @ini_text_neu;
 }
 
 li .li {
 color: @ini_text;
 }
}
구글폰트 사용
 Noto Sans KR 폰트를 추가
 구글 웹 한글 폰트
main.php
 <head> 영역에 추가할 구글 폰트 추가
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR|Nanum+Gothic|Do+Hyeon" rel="stylesheet">
basic.less
 body에 'Noto Sans KR' 폰트를 추가
 body → font 항목에 새 폰트 추가
body {
 /* font: normal 87.5%/1.4 "Malgun Gothic", Arial, sans-serif; original */
 font: normal 87.5%/1.4 'Noto Sans KR', Arial, sans-serif;
 /* default font size: 100% => 16px; 93.75% => 15px; 87.5% => 14px; 81.25% => 13px; 75% => 12px */
 -webkit-text-size-adjust: 100%;
}
제목에 다른 폰트 설정
 파일: css/basic.less
 h1 ~ h6 까지 다른 폰트 설정
h1,
h2,
h3,
h4,
h5,
h6 {
 /* font-family: 항목 추가 */
 font-family: 'Do Hyeon', Verdana, "Lucida Grande", Lucida, Helvetica, Arial, sans-serif;
/* 이하는 그대로 쓰기 */
제목에 밑줄 긋기
 파일: design.less
 화면 상단, 위키 타이틀의 밑줄 삭제.
 위 항목을 설정하면 위키 타이틀에도 밑줄이 나오는데 그걸 삭제한다.
#dokuwiki__header {
 /* 중간 패스 */
 h1 {
 /* 중간 패스 */
 border-bottom: None; /* 밑줄 안보이게 한다 */
/* 이하는 그대로 쓰기 */
위키 제목에 그림자 넣기
 design.less
#dokuwiki__header {
 padding: 2em 0 1.5em;
 
 .headings,
 .tools {
 /*margin-bottom: 1.5em;*/ /* 수정:주석化 */
 
/* 나머지 그대로 */
 
	h1 {
 margin: 0;
 font-size: 2.2em; /* 수정: 크기변경 */
 font-weight: normal;
		border-bottom: None;
		text-shadow: 0 0 5px rgba(0,0,0,0.5); /* 수정: 그림자추가 */
 
		img {
 float: left;
 /*margin-right: -0.5em;*/ /* 수정:주석化 */
 }
/* 나머지 생략 */ 
검색창 변경
 main.php

<div id="dokuwiki__aside"><div class="pad aside include group">
// sidebar 출력하는 코드는 이거 비슷할 것임
<h3 class="toggle"><?php echo $lang['sidebar'] ?></h3>

<div id="dokuwiki_aside_sitetools">
 php tpl_searchform(); ?>
</div>
 tpl_header.php

<div id="dokuwiki__sitetools">
 <h3 class="a11y"><?php echo $lang['site_tools']; ?></h3>
 <?php /*tpl_searchform();*/ ?> 
배경 변경
 css/basic.less
body {
 color: @ini_text;
 /*background: @ini_background_site url(images/page-gradient.png) top left repeat-x;*/
 background: @ini_background_site url(images/page_bg_white.jpg);
 css/structure.less
#dokuwiki__aside {
 width: @ini_sidebar_width;
 float: left;
 position: relative;
 display: block;
 /* 아래부분이 추가된것. 흰색을 투명도 그라데이션을 넣는다. */
 background-image: linear-gradient(to right, rgba(255,255,255, 0.8), rgba(255,255,255, 0));
sitetool 위치 변경
 css/design.less
#dokuwiki__sitetools {
 text-align: right;
 /* 아래 2줄 추가 */
 position: relative;
 top: 1em;
/* 이하 생략 */
 css/usertools.less
#dokuwiki__usertools {
 position: absolute;
 top: 0.5em; 
 /*top: 1.8em;*/ /* 이 숫자를 늘려 아래로 내린다 */
 right: 40px; // pagetool width
 text-align: right;
 width: 100%;
/* 이하 생략 */
TOC를 검색창 아래에 두기
 css/content.less
/* sidebar css 속성을 arctic-mbo 에서 가져오기 */
div.dokuwiki div.sidebar_box {
 border: 1px solid #ccc;
 margin-bottom: 0.8em;
 padding: .3em;
 overflow: hidden;
}
 
#dw__toc {
 margin: -0.1em 0em -0.1em 0em;
 /*margin: -1.556em -2em .5em 1.4em;*/
 width: @ini_sidebar_width;
 /*border-left: 1px solid @ini_border;*/
 background: @ini_background;
 color: inherit;
}
 main.php

 

<div id="dokuwiki__aside"><div class="pad aside include group">
 
 <div id="dokuwiki_aside_sitetools">
 <?php tpl_searchform(); ?>
 </div>
 
 
 <div class="toc_sidebar sidebar_box"><?php tpl_toc(); ?></div>
 

목차를 글 위에 배치하기
 ./css/content.less 311 줄쯤.
 dw__toc로 검색하기 하면 이런 글이 ./css/content.less:311:#dw__toc {
 #dw__toc {
 margin: -0.1em 0em -0.1em 0em;
 /*margin: -1.556em -2em .5em 1.4em;*/
 width: @ini_sidebar_width; => 30%
 /*border-left: 1px solid @ini_border;*/
 /* background: @ini_background; */ /* <- 주석화 */
 background-color: #3333; /* <- 추가한 것 */
 color: inherit;
}
 ./css/_toc.css 10줄쯤
 검색 결과가 ./css/_toc.css:10:#dw__toc {
/* toc container */
#dw__toc {
 /* float: right; */ /* <- 주석화 */
 margin: 0 0 1.4em 1.4em;
 width: 12em;
 background-color: @ini_background_alt;
 color: inherit;
 /* 아래부분을 추가해서 글 위로 배치 */
 position: absolute;
 right: 10px;
 top: 10px;
}
 목차 너비 변경하려면, 아래 항목을 찾아서 수정
 ./style.ini 84줄 쯤, __sidebar_width__
./style.ini:84:__sidebar_width__ = "16em" ; @ini_sidebar_width

dokuwiki_ki 템플릿 수정 - [TOC를 검색창 아래에 두기]

댓글