차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:template_dokuwiki_수정 [2020/06/30 12:13] – kieuns
+++ wiki:template_dokuwiki_수정 [2024/05/25 23:35] (현재) – [TOC를 검색창 아래에 두기] kieuns
@@ 줄 1: / 줄 1: @@
+<title classes #id>
+**dokuwiki_ki** 템플릿 수정
+</title>
+다른 위키 템플릿 수정 목록
+{{section>wiki:위키_테마_수정_문서들&noheader&nofooter&noeditbtn&firstseconly}}
+====== 시작 ======
+기본 템플릿<sup>dokuwiki</sup>을 복사해서 수정한 이력.
+''dokuwiki'' → ''dokuwiki_ki'' 이렇게 복사해서 수정 시작함.
+====== 편집기 창에서 필요 없는 문장 제거 ======
+| ''문서를 편집하고 저장을 누르세요. 위키 구문은 포맷팅 문법를 참조하세요. 문서를 더 좋게 만들 자신이 있을 때에만 편집하세요. 연습을 하고 싶다면 먼저 연습장에 가서 연습하세요.'' |
+(↑)이걸 삭제하고 편집기를 좀 더 크게 하려고.
+  * 수정할 파일: ''./inc/lang/ko/edit.txt''
+저 파일에서 스트링을 전부 삭제함
+====== 사이드바 배경 이미지 빼기 ======
+  * 파일 ''./css/structure.less'', 90 쯤
+<code css>
+/* 아래 코드 주석화 */
+/* background-image: linear-gradient(to right, rgba(255,255,255, 0.8), rgba(255,255,255, 0)); */
+</code>
+====== 검색 후보 보여주는 팝업 위치 조정 ======
+  * 파일 ''./css/contest.less'', 202 줄 쯤
+<code css>
+.dokuwiki form.search div.ajax_qsearch {
+    top: -.35em; /* top: -.35em; */
+    font-size: 1em;
+    text-overflow: ellipsis;
+}
+</code>
+  * 파일 ''./css/_search.less'', 202 줄 쯤
+<code css>
+.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;
+/* .... */
+</code>
+====== 테이블 안쪽 글자 크기 조정 ======
+  * 파일 ''css/content.less''
+**.dokuwiki table.inline** 항목 수정
+<code css>
+.dokuwiki table.inline {
+    min-width: 50%;
+    font-size: inherit; /*새로 추가*/
+}
+</code>
+====== 리스트 위아래 여백을 조정 ======
+  * 파일 ''css/content.less'' 파일 수정
+줄 68쯤 부분에
+<code css>
+/*____________ 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;
+    }
+}
+</code>
+======구글폰트 사용======
+  * **Noto Sans KR 폰트**를 추가
+  * [[https://fonts.google.com/?subset=korean&sort=popularity|구글 웹 한글 폰트]]
+**main.php**
+  * %%<head>%% 영역에 추가할 구글 폰트 추가
+<code html>
+<link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR|Nanum+Gothic|Do+Hyeon" rel="stylesheet">
+</code>
+**basic.less**
+  * body에 'Noto Sans KR' 폰트를 추가
+  * body -> font 항목에 새 폰트 추가
+<code css>
+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%;
+}
+</code>
+====== 제목에 다른 폰트 설정 ======
+  * 파일: ''css/basic.less''
+  * h1 ~ h6 까지 다른 폰트 설정
+<code css>
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  /* font-family: 항목 추가 */
+  font-family: 'Do Hyeon', Verdana, "Lucida Grande", Lucida, Helvetica, Arial, sans-serif;
+/* 이하는 그대로 쓰기 */
+</code>
+====== 제목에 밑줄 긋기 ======
+  * 파일: ''design.less''
+  * 화면 상단, 위키 타이틀의 밑줄 삭제.
+  * 위 항목을 설정하면 위키 타이틀에도 밑줄이 나오는데 그걸 삭제한다.
+<code css>
+#dokuwiki__header {
+  /* 중간 패스 */
+  h1 {
+    /* 중간 패스 */
+    border-bottom: None; /* 밑줄 안보이게 한다 */
+/* 이하는 그대로 쓰기 */
+</code>
+====== 위키 제목에 그림자 넣기 ======
+  * ''design.less''
+<code css>
+#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;*/ /* 수정:주석化 */
+        }
+/* 나머지 생략 */
+</code>
+======검색창 변경======
+aside 영역 상단에 서치바 추가
+  * ''main.php''
+아래 부분을 찾아서,
+<code php>
+<!-- ********** ASIDE ********** -->
+<div id="dokuwiki__aside"><div class="pad aside include group">
+</code>
+사이드바 출력하는 윗 부분에 검색창 추가
+<code php>
+// sidebar 출력하는 코드는 이거 비슷할 것임
+<h3 class="toggle"><?php echo $lang['sidebar'] ?></h3>
+</code>
+추가할 검색창 코드
+<code php>
+<!-- SITE TOOLS -->
+<div id="dokuwiki_aside_sitetools">
+    php tpl_searchform(); ?>
+</div>
+</code>
+원래 검색창을 감춘다.
+  * ''tpl_header.php''
+tpl_searchform() 함수 실행하는 부분을 찾아서 주석으로.
+<code php>
+<!-- SITE TOOLS -->
+<div id="dokuwiki__sitetools">
+    <h3 class="a11y"><?php echo $lang['site_tools']; ?></h3>
+    <?php /*tpl_searchform();*/ ?> <!-- <- 이 함수 쓰이는 곳을 주석으로 -->
+</code>
+====== 배경 변경 ======
+  * ''css/basic.less''
+<code css>
+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);
+</code>
+  * ''css/structure.less''
+%%dokuwiki__aside%%를 찾는다.
+<code css>
+#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));
+</code>
+====== sitetool 위치 변경 ======
+  * ''css/design.less''
+<code css>
+#dokuwiki__sitetools {
+    text-align: right;
+    /* 아래 2줄 추가 */
+    position: relative;
+    top: 1em;
+/* 이하 생략 */
+</code>
+  * ''css/usertools.less''
+%%#dokuwiki__usertools%%를 찾아 수정한다.
+<code css>
+#dokuwiki__usertools {
+    position: absolute;
+    top: 0.5em;
+    /*top: 1.8em;*/ /* 이 숫자를 늘려 아래로 내린다 */
+    right: 40px; // pagetool width
+    text-align: right;
+    width: 100%;
+/* 이하 생략 */
+</code>
+====== TOC를 검색창 아래에 두기 ======
+  * ''css/content.less''
+<code css>
+/* 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;
+}
+</code>
+  * main.php
+<code php>
+<!-- 아래 부분 코드를 참조해서 넣을 위치를 찾는다 -->
+<!-- ********** ASIDE ********** -->
+<div id="dokuwiki__aside"><div class="pad aside include group">
+  <!-- SITE TOOLS -->
+  <div id="dokuwiki_aside_sitetools">
+    <?php tpl_searchform(); ?>
+  </div>
+  <!-- 아래 줄을 추가한다 -->
+  <div class="toc_sidebar sidebar_box"><?php tpl_toc(); ?></div>
+<!-- 이하 생략 -->
+</code>
+====== 목차를 글 위에 배치하기 ======
+  * ''./css/content.less'' 311 줄쯤.
+  * ''%%dw__toc%%''로 검색하기 하면 이런 글이 ''%%./css/content.less:311:#dw__toc {%%''
+<code css>
+ #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;
+}
+</code>
+  * ''./css/_toc.css'' 10줄쯤
+  * 검색 결과가  ''%%./css/_toc.css:10:#dw__toc {%%''
+<code css>
+/* 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;
+}
+</code>
+  * 목차 너비 변경하려면, 아래 항목을 찾아서 수정
+  * ''./style.ini'' 84줄 쯤,  ''%%__sidebar_width__%%''
+<code css>
+./style.ini:84:__sidebar_width__   = "16em"            ; @ini_sidebar_width
+</code>