dokuwiki:도쿠위키_wrap_plugin_에_커스텀_아이콘_설정하기 [법학위키]

도쿠위키 wrap plugin 에 커스텀 아이콘 설정하기
이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
다음 그림과 같이 Dokuwiki Wrap Plugin에 커스텀 아이콘을 설정해 보자 

{{:법과판례wrapplugin.png?600|}}

법 모양 아이콘과 판례 모양 아이콘을 설정했다. 


===== 리소스 ===== 

==== 1. 위치 ====

wrap plugin 폴더의 images 폴더 밑에 note 폴더 아래에 각 사이즈 별로 다음과 같은 파일을 넣는다. 

^  크기  |  Law  |  Precedent  |
^  16  |  {{:dokuwiki:law.png?16|}}  |   {{:dokuwiki:precedent.png?16|}}  |
^  48  |  {{:dokuwiki:law48.png?48|}}  |  {{:dokuwiki:precedent48.png?48|}}  | 

==== 2. 주의 사항 ==== 

본 위키 사이트에 올리기 위해 각 크기 별로 이름을 달리했다. 이를테면 48픽셀 짜리는 "law48.png"라는 형식으로 저장했다. 

그러나 실제 각 아이콘의 경로는 note폴더 아래에 16과 48각각의 폴더를 쓰므로 나는 폴더만 다르게 하고 이름은 똑같이 저장했다. 

이하에서는 각 다른 픽셀별로 아이콘을 폴더만 다를 뿐 이름은 같은 것으로 가정하고 예시를 쓴다. 


그리고 도쿠위키 문서 에디터에서 사용할 아이콘은 "toolbar"폴더에 저장되는데, 이것은 어차피 16픽셀 짜리를 사용할 것이므로 

나는 toolbar 폴더에는 따로 저장하지 않았다. "toolbar"폴더에 경로를 저장하고 싶으면 취향에 따라 그렇게 해도 된다. 

===== Wrap 문법 작성하기 =====

==== 1. 위치 ====

Wrap 플러그인의 폴더 루트 디렉토리의 style.less 파일을 건드린다. 

  (root)/lib/plugins/wrap/style.less
  
  
==== 2. 문법 추가 ==== 

해당파일의 주석으로 된 부분에 "notes with icons"와 "notes with spans"를 건드린다. 


=== 가. 일반적인 스타일 === 
만약 "law"라는 문법을 추가하고자 하면 "wrap_"이라는 접두어 아래에 해당 키워드를 넣으면 된다. 

wrap과 precedent를 추가하면 다음과 같다. 


<code css>
/*____________ notes with icons ____________*/

/* general styles for all note divs */
div.wrap_info,
div.wrap_important,
div.wrap_alert,
div.wrap_tip,
div.wrap_help,
div.wrap_todo,
div.wrap_download,
div.wrap_law,
div.wrap_precedent {
    padding: 1em 1em .5em 70px;
    margin-bottom: 1.5em;
    min-height: 68px;
    background-position: 10px 50%;
    background-repeat: no-repeat;
    color: inherit;
    overflow: hidden;
}
/* general styles for all note spans */
span.wrap_info,
span.wrap_important,
span.wrap_alert,
span.wrap_tip,
span.wrap_help,
span.wrap_todo,
span.wrap_download,
span.wrap_law,
span.wrap_precedent {
    padding: 0 2px 0 20px;
    min-height: 20px;
    background-position: 2px 50%;
    background-repeat: no-repeat;
    color: inherit;
}
</code>

=== 나. 아이콘 지정 ===   

각 wrap 문법별로 아이콘을 지정하고 싶으면 아래 부분에 다음과 같은 코드를 넣으면 된다. 

<code css> 
/*____________ law ____________*/
.wrap_law { background-color: #c2efdd; }
.wrap__dark.wrap_law { background-color: #345717; }
div.wrap_law { background-image: url(images/note/48/law.png); }
span.wrap_law { background-image: url(images/note/16/law.png); }

/*____________ precedent ____________*/
.wrap_precedent { background-color: #c2efdd; }
.wrap__dark.wrap_precedent { background-color: #345717; }
div.wrap_precedent { background-image: url(images/note/48/precedent.png); }
span.wrap_precedent { background-image: url(images/note/16/precedent.png); }
</code>

<WRAP center round tip 80%>
위에서 각 백그라운드 이미지의 이름은 같지만 48픽셀과 16픽셀은 각 폴더별로 다른 파일임을 주의하자. 

</WRAP>

==== 3. 실행 ==== 

일단 문법은 완성되었다. 

다음의 문법을 실행해보자  

  "<WRAP center box law 95%>  법률  </WRAP> " 
  

다음과 같이 나옴을 알 수 있다. 

<WRAP center box law 95%>  법률  </WRAP> 
  

===== 에디터용 Wrap Action을 만들기 ===== 

==== 1. 로컬 언어  설정하기 ==== 

에디터에서 팝업 도움말에 사용되는 단어들을 추가하자. 

다음 위치에 로컬 언어를 추가하자. 

  (root)/lib/wrap/lang/ko/lang.php 
  

<code php>
$lang['law']        = '법';
$lang['precedent']        = '판례';
</code> 


한국언어뿐만 아니라 혹시 모르니 en 폴더에 있는 영어도  똑같이 추가하는 것을 빠트리지 말자.  

==== 2. action.php 설정 ==== 

=== 가. 위치 ===

   (root)/lib/plugins/wrap/action.php
   
=== 나. 코드 === 

handle_toolbar() 함수에서 $event->data[] 배열에 'list' 배열 항목에 끝에 다음을 추가하면 된다. 


<code php>
                array(
                    'type'   => 'format',
                    'title'  => $this->getLang('law'),
                    'icon'   => '../../plugins/wrap/images/note/16/law.png',
                    'open'   => '<'.$syntaxDiv.' center box law 95%>\n'.'<'.$syntaxSpan.' em>\n',
                    'close'  => '</'.$syntaxSpan.'>'.'\n</'.$syntaxDiv.'>\n',
                ),
                array(
                    'type'   => 'format',
                    'title'  => $this->getLang('precedent'),
                    'icon'   => '../../plugins/wrap/images/note/16/precedent.png',
                    'open'   => '<'.$syntaxDiv.' center box precedent 95%>\n'.'<'.$syntaxSpan.' em>\n',
                    'close'  => '</'.$syntaxSpan.'>'.'\n</'.$syntaxDiv.'>\n',
                ),
</code>

=== 다. 설명 === 

conf폴더에 보면 $syntaxDiv와 $syntaxSpan의 정의가 나온다. 

각각 도쿠위키에서 'WRAP' 문법과 'wrap'문법으로 사용되는 변수들이다. 

WRAP은 HTML의 DIV로 구성되어 있기 때문에 박스형태이고, 

wrap은 HTMl의 span으로 구성되어 있기 때문에 강조형태이다. 

이에 대한 정의는 다시 style.less 파일을 보면 잘 알 수 있다. 


==== 3. 캐시 리프레시 ==== 


도쿠위키의 [관리] -> [환경설정] 

에서 아무거나 바꾸고 저장한다음. 다시 돌린다음에 재저장하면 캐시가 새롭게 생성된다. 

나는 보통 템플릿을 바꾸고 다시 돌린다. 

서버의 캐시를 재생성해야만 에디터가 제대로 동작하니까 반드시 캐시를 실행하자. 


===== 완성된 파일 ===== 

내가 만든 법과 판례 아이콘이 포함된 WRAP plugin 파일이다. 

+ 2023. 6. 22. 기능을 추가하였다 하늘색 글자 기능과, 제목 글자 기능을 추가하였다. 


{{ :dokuwiki:wrap.zip |wrap.zip}}