2013/08/14

구글 블로거의 라벨 페이지와 글목록 페이지에 글제목만 나오게 하는 방법

한국식 블로그들은 카테고리 목록에 제목만 뜨게 되어 있는 경우가 많다.
하지만 구글 블로거에서 라벨이나 글목록 링크를 눌러서 라벨 페이지, 혹은 글목록 페이지에 들어가면, 글의 제목만 뜨는 것이 아니라, 원래 블로그의 디자인대로 뜨게 된다. 만약에 블로그의 디자인이 글의 내용이 모두 뜨도록 되어 있다면, 라벨 페이지에서도 글이 모두 뜨고, 만약에 블로그 디자인이 글의 내용을 일부만 보여주도록 되어 있다면, 라벨 페이지에서도 글의 내용이 일부만 보여지게 된다.

물론 블로거의 이런 방식이 마음에 드는 사람들도 있겠지만, 라벨 페이지에서 글 내용이 모두 뜨게 되면, 방문자들이 글들을 훑어보는 것이 매우 힘들 수 있다. 많은 글이 있는 블로그일수록 더욱 더 불편해질 수 밖에 없다. 또한, 라벨 페이지나 글목록 페이지의 로딩 시간을 길게 만들기 때문에 불편함이 가중될 수 있다.

그래서 이 블로그에는 라벨 페이지와 글목록 페이지에 글의 제목만 뜨도록 해놓았다. 지금부터 그 방법을 설명해보려 한다.

1. 블로거에 로그인한다.

2. 대시보드 ⇒ 템플릿 ⇒ HTML 편집 으로 들어간다.

3. HTML 편집을 통해 템플릿을 수정할 때, 잘못 수정해서 오류가 나는 경우, 블로그가 정상적으로 작동하지 않을 수 있으므로, 수정전에 백업을 미리 해놓는 것이 좋다. 백업을 우상단에 있는 「백업/복원」버튼을 눌러서 할 수 있다.

4. 키보드의 「Ctrl+F」 키를 눌러서 아래의 코드를 검색한다.
<b:include data='post' name='post'/>
5. 그 코드를 다음의 코드로 대체한다. (즉, 검색으로 찾은 코드를 지우고, 그 자리에 다음의 코드를 붙여 넣으면 된다.)
<!--Label and archive page title only hack Start-->
<b:if cond='data:blog.searchLabel'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a><font size='2'> | <data:post.dateHeader/></font></h3>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a><font size='2'> | <data:post.dateHeader/></font></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
</b:if>
<!--Label and archive page title only hack End-->
6.템플릿 저장」 버튼을 눌러서 템플릿을 저장한다.

7. 정상적으로 템플릿이 수정되었다면 다음과 같이 라벨 페이지와 글목록 페이지에 제목만 나오게 될 것이다.














8. 만약에 글목록의 스타일을 바꾸고 싶다면 두가지 방법이 있다.
  • 아래의 예처럼, 위의 코드 중 <h3>태그 안에 style 속성을 이용해서 스타일을 바꾼다.
  • <h3 style="margin-bottom: 15px;" class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
  • 아래의 예처럼 CSS에 글목록에 대한 스타일을 넣어준다. (CSS 스타일은 ]]></b:skin> 앞에 넣어주면 된다.)
    .title-only {
    /* 여기에 알맞은 CSS 코드를 넣어주면 된다. */
    }

2013/08/08

블로거의 기능 확장을 위해 자바스크립트 파일을 외부에서 불러오는 방법


구글 블로거는 글 발행 방식이 html 방식으로 되어 있다. 그래서 블로거에 기능을 추가하려면, 클라이언트 스크립트 언어인 자바스크립트를 사용하게 된다.

블로거에서 제공하는 기본 기능들도 마찬가지이다. 예를 들어 얼마전부터 블로거에서 제공하는 구글플러스 댓글 기능은 상당히 많은 자바스크립트 파일을 사용한다. 그래서 구글플러스 댓글을 사용하는 경우 블로그의 로딩이 조금 느려질 수 있다.

그런데, 문제는 블로거에서 제공되는 기능들이 아닌 기능을 추가하려고 할 때이다. 보통 검색을 통해 찾을 자바스크립트 파일을 이용해서 기능을 추가하게 되는데, 블로거는 이미지 파일 이외에는 파일을 올릴 수가 없으므로, 자바스크립트 파일을 올려놓고 불러올 곳이 마땅치 않다는 문제가 있다.

이 글에서는 자바스크립트 파일을 올려놓을 곳에 대한 간단한 소개와 방법에 대해서 설명해보려 한다.


1. 자바스크립트 파일을 외부에서 불러와야 하는 이유는?

첫번째로, 자바스크립트 파일을 외부에서 불러오면, 블로그 방문자가 처음에 블로그에 접속할 때 그 파일을 불러오게 되고 브라우저는 그 파일을 캐시해 놓는다. 따라서 블로그의 다른 페이지에 접속할 때는 그 파일을 다시 불러오지 않게 되므로, 좀 더 빠른 로딩이 가능하다.

둘째로, 블로거의 기능을 확장할 때 대부분, 인터넷에서 검색을 통해 일반사용자가 만든 자바스크립트 파일을 찾아서 이용하게 되는데, 만약 그 파일을 올려놓은 사람이 그 주소에 올려놓았던 자바스크립트 파일을 삭제해버리거나 하면, 그 파일을 이용해서 추가한 기능에 오류가 발생하게 될 것이다. 따라서 가능하면 자바스크립트 파일을 다운 받아서 직접 다른 곳에 올려놓고 그 것을 이용해서 블로거의 기능을 확장하는 것이 블로그의 안정성 면에서 훨씬 더 좋다.

마지막으로, 어떤 자바스크립트 파일에는 몰래 링크같은 것을 숨겨놓는 경우가 있다. 그래서 블로그의 어떤 특정부분을 클릭하면 특정 블로그로 연결되게 된다. 이유는 두가지인데, 첫번째는 실수로 특정부분을 클릭해서 자신의 블로그에 방문하도록 하는 것이고, 두번째는 그 스크립트를 사용한 블로그에 자신의 링크를 남김으로써, 자신의 구글 검색 순위를 높이는 것이다. 구글 검색 순위에 결정적 역할을 하는 페이지랭크인바운드 링크(다른 사이트에서 자신의 사이트에 링크를 걸어주는 것)의 수를 중요시하기 때문이다.

그래서 이렇게 몰래 숨겨놓은 링크와 같은 것이 있을 때는 그것을 삭제해주는 편이 좋다. 당연히 파일을 수정한 후에는 직접 다른 곳에 올려놓고 그 파일을 불러와 써야 한다.

2. 블로거에서 자바스크립트를 사용하는 방법

1. 인터넷에서 찾은 자바스크립트 소스를 이용한다면, 그 소스를 올려놓은 사람이 어디에 그 소스를 삽입해야 하는지 자세히 설명해 놓았을 것이다. 그 소스에서 아래와 같은 형식의 소스를 찾아본다.

<script src="http://safir85.ucoz.com/24work-blogspot/page-navigation/0-test-p-n-01_00.js"></script>
(참고로 이 소스는 www.domawe.com에서 포스팅해주신 페이지 네비게이션 소스에서 가져왔다.)


2. 위의 소스에서 "http://safir85.ucoz.com/24work-blogspot/page-navigation/0-test-p-n-01_00.js" 부분이 자바스크립트 파일이다. 이 것을 복사해서 브라우저의 주소창에 붙여놓고 엔터를 치면, 브라우저에 따라서 바로 다운로드창이 뜨거나 아니면 자바스크립트 파일을 브라우저상에서 보여주게 된다. 브라우저 상에 자바스크립트의 내용이 뜨는 경우에는 키보드에서 "ctrl+s"을 눌러서 자바스크립트 파일을 저장해주면 된다.

3. 이제 다운받은 자바스크립트 파일을 다른 곳에 올려놓고 그 주소를 따서, 원래 소스의 자바스크립트 파일 주소를 대체해주면 된다.


3. 자바스크립트 파일 올리기

3.1. 구글드라이브에 자바스크립트 파일 올리기

1. 구글드라이브에 자바스크립트를 올릴 폴더를 만든다. 폴더를 만들 때는 좌상단의 만들기를 클릭하면 나오는 선택 메뉴에서 폴더를 클릭하거나, 만들기 버튼 조금 오른쪽 위에 있는 아이콘을 클릭해서 만들면 된다. 그 후 나오는 창에서 폴더의 이름을 입력하고 만들기를 누르면 새 폴더가 만들어진다.

 


2. 만들기 버튼 옆의 업로드 버튼을 클릭한 후, 파일 선택창에서 업로드할 파일을 선택하여, 파일을 올린다.




3. 올린 파일을 공유 설정하는데, 이 때 "비공개"로 되어 있는 것을 변경을 클릭해서 "웹에 공개"로 바꾼다. 그 후 마지막 스크린샷에 공유할 링크를 복사해 놓는다.










4. 공유링크는 다음과 같은 형식으로 되어 있다. 그것을 그 밑의 형식으로 바꿔준다. (중간에 0B로 시작하는 것이 파일 id이고 그것을 "https://googledrive.com/host/" 뒤에 붙여주면 된다)

https://docs.google.com/file/d/0BztVokLJZ-YlUHdzVGJlS3FzQWc/edit?usp=sharing
https://googledrive.com/host/0BztVokLJZ-YlUHdzVGJlS3FzQWc


5. 완성된 파일 주소로 원래 자바스크립트 파일 주소를 대체한다.
ex.) <script src="http://safir85.ucoz.com/24work-blogspot/page-navigation/0-test-p-n-01_00.js"></script>
☞ <script src="http://googledrive.com/host/0BztVokLJZ-YlUHdzVGJlS3FzQWc"></script>


3.2. Dropbox에 자바스크립트 파일 올리기

1. Public 폴더가 사용 가능한 지 확인하고 사용이 불가능한 상태라면 다른 링크의 설명을 통해 Public 폴더를 활성화 한다. (Public 폴더를 활성화 하지 않아도 Dropbox에 자바스크립트 파일을 올리고 활용하는 것이 가능하지만 Public 폴더를 이용하는 것이 훨씬 더 편리하므로 Public 폴더를 이용하는 방법으로 설명한다.)

Dropbox(드롭박스) Public 폴더 기능 활성화 하기


2. Public 폴더에 자바스크립트 파일을 저장할 폴더를 생성한다.
폴더를 생성하려면 우상단에 있는 아이콘 중 두번째 아이콘을 클릭하면 된다. 폴더 생성 아이콘을 클릭하면 폴더가 생성되고, 폴더의 이름을 입력하는 창이 뜬다. 거기에 알맞은 이름을 입력해준다.

  


3. 생성한 폴더에 자바스크립트 파일을 올린다.
파일을 올리는 방법은 두 가지이다. 탐색기등에서 파일을 선택하여 마우스로 끌어서 브라주저 창에 떨구는 방법이 있고, 폴더를 생성할 때처럼 우상단의 아이콘을 이용하는 방법이 있다.

드래그앤 드롭으로 파일을 올릴 때는, 먼저 드롭박스의 특정 폴더로 들어간 후, 올리려고하는 파일을 드래그해서 웹브라우저 창에 놓으면 된다. 여러개의 파일이나 폴더를 올리는 것도 가능하다.



드래그앤 드롭으로 파일 업로드하기



업로드 아이콘을 클릭해서 파일을 올리려면 우상단 아이콘들중 첫번째 아이콘을 누른다. 그러면 「Upload to 'Dropbox'」창이 뜨고 거기에서 「Choose files」버튼을 눌러서 올리려고 하는 파일을 선택해서 올리면 된다.

아이콘을 클릭해서 파일 업로드 하기






파일 업로드 아이콘을 클릭한 후 뜨는 창, 여기서 Choose files를 클릭한 후 업로드할 파일을 선택하면 된다.














4. 업로드를 완료했으면, 이제 그 파일에 대한 공개링크주소를 따야 한다. Public링크 기능을 활성화되어 있으면 공개링크주소를 따는 것은 상당히 쉽다. 올린 파일에 마우스커서를 올려놓고 마우스 오른쪽 버튼을 클릭하면 「Copy public link」라는 메뉴를 클릭한다.





5. 그러면 「Copy public link」창이 뜨는데 그 창에 공개링크주소가 나온다. 주수 밑에 있는 「Copy to clipboard」버튼을 누르면 공개링크주소가 클립보드에 복사되므로, 그 주소를 다른 곳에 붙여넣어서 사용하면 된다.





6. 공개링크주소를 활용해서 블로거에 자바스크립트를 로딩하는 방법은 구글드라이브에서 설명한 것과 같다.

ex.) <script src="http://safir85.ucoz.com/24work-blogspot/page-navigation/0-test-p-n-01_00.js"></script>
☞ <script src="http://googledrive.com/host/0BztVokLJZ-YlUHdzVGJlS3FzQWc"></script>


3.3. 구글드라이브와 Dropbox의 차이점

구글드라이브는 Dropbox에 비해 한국에서 속도가 더 빠르고, 구글에서 운영하기 때문에 더 안정적이다. 또한 상당히 많은 트래픽을 줘서, 어떤 상황에서도 트래픽 때문에 문제가 생기지 않는다. 
반면에 Dropbox는 공개링크주소를 따는 것이 편리하고, 파일들을 자동으로 압축 전송하기 때문에, 자바스크립트를 많이 쓰는 경우 속도 부분에 장점이 있다. 다만 무료 사용자의 경우 트래픽 제한이 하루에 20GB로 정해져 있으므로, 그 제한이 넘어가는 경우, 그 계정의 모든 공유링크가 막혀버린다. 며칠이 지나면 제한이 풀리기는 하지만, 불편할 수 있는 부분이다. 하지만 자바스크립트는 상당히 작은 용량이므로, 자바스크립트만으로 트래픽 제한을 넘기기는 힘들다. 따라서 용량이 큰 파일을 공유할 때는, 자바스크립트를 저장한 계정과 다른 계정을 이용하는 것이 좋다.


4. 자바스크립트 파일에서 몰래 링크 제거하기

위의 페이지 네비게이션 스크립트에도 몰래 링크가 숨어 있다. 그래서 페이지 네비게이션 스크립트를 예시로 들어, 몰래 링크를 제거하는 방법을 설명해 보려 한다.


1. 자바스크립트 파일을 텍스트 에디터를 이용해서 열어본다. 이 때 notepad++ 등의 에디터를 사용하며 좀 더 쉽게 소스를 파악할 수 있다.

2. 파일을 열어봤는데, 알아볼 수 없는 이상한 기호들이 나열되어 있다면, 그건 스크립트가 압축되어 있는 것이다. 그럴 때는, Online JavaScript beautifier 에서 원래의 자바스크립트 파일로 복원할 수 있다.

방법은 간단하다. 밑의 큰 창에 스크립트 파일의 내용을 모두 복사해서 넣고 "Beautify JavaScript or HTML" 버튼을 클릭하면 된다.

아래의 소스는 페이지 네비게이션의 압축된 소스와 그것을 다시 복구시킨 소스이다.


압축된 소스

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('7 L;7 j;7 h;7 v;1A();H 1z(1d){7 6=\'\';M=K(12/2);5(M==12-M){12=M*2+1}C=h-M;5(C<1)C=1;e=K(1d/m)+1;5(e-1==1d/m)e=e-1;D=C+12-1;5(D>e)D=e;6+="<4 9=\'1M\'>1L "+h+\' 1Y \'+e+"</4>";7 17=K(h)-1;5(h>1){5(h==2){5(j=="u"){6+=\'<4 9="1Z"><a b="\'+B+\'">\'+S+\'</a></4>\'}c{6+=\'<4 9="g"><a b="/r/s/\'+v+\'?&d-l=\'+m+\'">\'+S+\'</a></4>\'}}c{5(j=="u"){6+=\'<4 9="g"><a b="#" y="N(\'+17+\');x w">\'+S+\'</a></4>\'}c{6+=\'<4 9="g"><a b="#" y="O(\'+17+\');x w">\'+S+\'</a></4>\'}}}5(C>1){5(j=="u"){6+=\'<4 9="g"><a b="\'+B+\'">1</a></4>\'}c{6+=\'<4 9="g"><a b="/r/s/\'+v+\'?&d-l=\'+m+\'">1</a></4>\'}}5(C>2){6+=\' ... \'}1s(7 k=C;k<=D;k++){5(h==k){6+=\'<4 9="24">\'+k+\'</4>\'}c 5(k==1){5(j=="u"){6+=\'<4 9="g"><a b="\'+B+\'">1</a></4>\'}c{6+=\'<4 9="g"><a b="/r/s/\'+v+\'?&d-l=\'+m+\'">1</a></4>\'}}c{5(j=="u"){6+=\'<4 9="g"><a b="#" y="N(\'+k+\');x w">\'+k+\'</a></4>\'}c{6+=\'<4 9="g"><a b="#" y="O(\'+k+\');x w">\'+k+\'</a></4>\'}}}5(D<e-1){6+=\'...\'}5(D<e){5(j=="u"){6+=\'<4 9="g"><a b="#" y="N(\'+e+\');x w">\'+e+\'</a></4>\'}c{6+=\'<4 9="g"><a b="#" y="O(\'+e+\');x w">\'+e+\'</a></4>\'}}7 16=K(h)+1;5(h<e){5(j=="u"){6+=\'<4 9="g"><a b="#" y="N(\'+16+\');x w">\'+1l+\'</a></4>\'}c{6+=\'<4 9="g"><a b="#" y="O(\'+16+\');x w">\'+1l+\'</a></4>\'}}6+=\'<1q><a b="1n://1O.1K.1m" 1R="1Q 1S" 1D="1E-1F: 1I; 1G: 1H; 1N: 2d;" 28="27"><1o 26="0" J="1n://2a.2b.1m/1o/2f.2e" 1T="3" 2c="3" /></a></1q>\';7 E=z.1W("E");7 18=z.1V("1U-1X");1s(7 p=0;p<E.Q;p++){E[p].1i=6}5(E&&E.Q>0){6=\'\'}5(18){18.1i=6}}H 1f(X){7 Y=X.Y;7 1C=K(Y.22$21.$t,10);1z(1C)}H 1A(){7 i=o;5(i.f("/r/s/")!=-1){5(i.f("?V-d")!=-1){v=i.I(i.f("/r/s/")+14,i.f("?V-d"))}c{v=i.I(i.f("/r/s/")+14,i.f("?&d"))}}5(i.f("?q=")==-1&&i.f(".6")==-1){5(i.f("/r/s/")==-1){j="u";5(o.f("#G=")!=-1){h=o.I(o.f("#G=")+8,o.Q)}c{h=1}z.1p("<n J=\\""+B+"P/R/U?d-l=1&13=15-Z-n&T=1f\\"><\\/n>")}c{j="s";5(i.f("&d-l=")==-1){m=20}5(o.f("#G=")!=-1){h=o.I(o.f("#G=")+8,o.Q)}c{h=1}z.1p(\'<n J="\'+B+\'P/R/U/-/\'+v+\'?13=15-Z-n&T=1f&d-l=1" ><\\/n>\')}}}H N(F){11=(F-1)*m;L=F;7 W=z.1r(\'1g\')[0];7 A=z.1w(\'n\');A.1t=\'1v/1u\';A.1y("J",B+"P/R/U?1B-1j="+11+"&d-l=1&13=15-Z-n&T=1e");W.1h(A)}H O(F){11=(F-1)*m;L=F;7 W=z.1r(\'1g\')[0];7 A=z.1w(\'n\');A.1t=\'1v/1u\';A.1y("J",B+"P/R/U/-/"+v+"?1B-1j="+11+"&d-l=1&13=15-Z-n&T=1e");W.1h(A)}H 1e(X){1c=X.Y.25[0];7 1x=1c.1k.$t.I(0,19)+1c.1k.$t.I(23,29);7 1a=1P(1x);5(j=="u"){7 1b="/r?V-d="+1a+"&d-l="+m+"#G="+L}c{7 1b="/r/s/"+v+"?V-d="+1a+"&d-l="+m+"#G="+L}1J.b=1b}',62,140,'||||span|if|html|var||class||href|else|max|maksimal|indexOf|showpageNum|nomerhal|thisUrl|jenis|jj|results|postperpage|script|urlactivepage|||search|label||page|lblname1|false|return|onclick|document|newInclude|home_page|mulai|akhir|pageArea|numberpage|PageNo|function|substring|src|parseInt|nopage|nomerkiri|redirectpage|redirectlabel|feeds|length|posts|upPageWord|callback|summary|updated|nBody|root|feed|in||jsonstart|numshowpage|alt||json|nextnomer|prevnomer|blogPager||timestamp|alamat|post|banyakdata|finddatepost|hitungtotaldata|head|appendChild|innerHTML|index|published|downPageWord|com|http|img|write|div|getElementsByTagName|for|type|javascript|text|createElement|timestamp1|setAttribute|loophalaman|halamanblogger|start|totaldata|style|font|size|float|right|7pt|location|blogspot|Page|showpageOf|padding|24work|encodeURIComponent|Blogger|title|Templates|width|blog|getElementById|getElementsByName|pager|of|showpage||totalResults|openSearch||showpagePoint|entry|border|_blank|target||img1|blogblog|height|2px|gif|blank'.split('|'),0,{}))


복구된 소스

var nopage;
var jenis;
var nomerhal;
var lblname1;
halamanblogger();

function loophalaman(banyakdata) {
    var html = '';
    nomerkiri = parseInt(numshowpage / 2);
    if (nomerkiri == numshowpage - nomerkiri) {
        numshowpage = nomerkiri * 2 + 1
    }
    mulai = nomerhal - nomerkiri;
    if (mulai < 1) mulai = 1;
    maksimal = parseInt(banyakdata / postperpage) + 1;
    if (maksimal - 1 == banyakdata / postperpage) maksimal = maksimal - 1;
    akhir = mulai + numshowpage - 1;
    if (akhir > maksimal) akhir = maksimal;
    html += "<span class='showpageOf'>Page " + nomerhal + ' of ' + maksimal + "</span>";
    var prevnomer = parseInt(nomerhal) - 1;
    if (nomerhal > 1) {
        if (nomerhal == 2) {
            if (jenis == "page") {
                html += '<span class="showpage"><a href="' + home_page + '">' + upPageWord + '</a></span>'
            } else {
                html += '<span class="showpageNum"><a href="/search/label/' + lblname1 + '?&max-results=' + postperpage + '">' + upPageWord + '</a></span>'
            }
        } else {
            if (jenis == "page") {
                html += '<span class="showpageNum"><a href="#" onclick="redirectpage(' + prevnomer + ');return false">' + upPageWord + '</a></span>'
            } else {
                html += '<span class="showpageNum"><a href="#" onclick="redirectlabel(' + prevnomer + ');return false">' + upPageWord + '</a></span>'
            }
        }
    }
    if (mulai > 1) {
        if (jenis == "page") {
            html += '<span class="showpageNum"><a href="' + home_page + '">1</a></span>'
        } else {
            html += '<span class="showpageNum"><a href="/search/label/' + lblname1 + '?&max-results=' + postperpage + '">1</a></span>'
        }
    }
    if (mulai > 2) {
        html += ' ... '
    }
    for (var jj = mulai; jj <= akhir; jj++) {
        if (nomerhal == jj) {
            html += '<span class="showpagePoint">' + jj + '</span>'
        } else if (jj == 1) {
            if (jenis == "page") {
                html += '<span class="showpageNum"><a href="' + home_page + '">1</a></span>'
            } else {
                html += '<span class="showpageNum"><a href="/search/label/' + lblname1 + '?&max-results=' + postperpage + '">1</a></span>'
            }
        } else {
            if (jenis == "page") {
                html += '<span class="showpageNum"><a href="#" onclick="redirectpage(' + jj + ');return false">' + jj + '</a></span>'
            } else {
                html += '<span class="showpageNum"><a href="#" onclick="redirectlabel(' + jj + ');return false">' + jj + '</a></span>'
            }
        }
    }
    if (akhir < maksimal - 1) {
        html += '...'
    }
    if (akhir < maksimal) {
        if (jenis == "page") {
            html += '<span class="showpageNum"><a href="#" onclick="redirectpage(' + maksimal + ');return false">' + maksimal + '</a></span>'
        } else {
            html += '<span class="showpageNum"><a href="#" onclick="redirectlabel(' + maksimal + ');return false">' + maksimal + '</a></span>'
        }
    }
    var nextnomer = parseInt(nomerhal) + 1;
    if (nomerhal < maksimal) {
        if (jenis == "page") {
            html += '<span class="showpageNum"><a href="#" onclick="redirectpage(' + nextnomer + ');return false">' + downPageWord + '</a></span>'
        } else {
            html += '<span class="showpageNum"><a href="#" onclick="redirectlabel(' + nextnomer + ');return false">' + downPageWord + '</a></span>'
        }
    }
    html += '<div><a href="http://24work.blogspot.com" title="Blogger Templates" style="font-size: 7pt; float: right; padding: 2px;" target="_blank"><img border="0" src="http://img1.blogblog.com/img/blank.gif" width="3" height="3" /></a></div>';
    var pageArea = document.getElementsByName("pageArea");
    var blogPager = document.getElementById("blog-pager");
    for (var p = 0; p < pageArea.length; p++) {
        pageArea[p].innerHTML = html
    }
    if (pageArea && pageArea.length > 0) {
        html = ''
    }
    if (blogPager) {
        blogPager.innerHTML = html
    }
}

function hitungtotaldata(root) {
    var feed = root.feed;
    var totaldata = parseInt(feed.openSearch$totalResults.$t, 10);
    loophalaman(totaldata)
}

function halamanblogger() {
    var thisUrl = urlactivepage;
    if (thisUrl.indexOf("/search/label/") != -1) {
        if (thisUrl.indexOf("?updated-max") != -1) {
            lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/") + 14, thisUrl.indexOf("?updated-max"))
        } else {
            lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/") + 14, thisUrl.indexOf("?&max"))
        }
    }
    if (thisUrl.indexOf("?q=") == -1 && thisUrl.indexOf(".html") == -1) {
        if (thisUrl.indexOf("/search/label/") == -1) {
            jenis = "page";
            if (urlactivepage.indexOf("#PageNo=") != -1) {
                nomerhal = urlactivepage.substring(urlactivepage.indexOf("#PageNo=") + 8, urlactivepage.length)
            } else {
                nomerhal = 1
            }
            document.write("<script src=\"" + home_page + "feeds/posts/summary?max-results=1&alt=json-in-script&callback=hitungtotaldata\"><\/script>")
        } else {
            jenis = "label";
            if (thisUrl.indexOf("&max-results=") == -1) {
                postperpage = 20
            }
            if (urlactivepage.indexOf("#PageNo=") != -1) {
                nomerhal = urlactivepage.substring(urlactivepage.indexOf("#PageNo=") + 8, urlactivepage.length)
            } else {
                nomerhal = 1
            }
            document.write('<script src="' + home_page + 'feeds/posts/summary/-/' + lblname1 + '?alt=json-in-script&callback=hitungtotaldata&max-results=1" ><\/script>')
        }
    }
}

function redirectpage(numberpage) {
    jsonstart = (numberpage - 1) * postperpage;
    nopage = numberpage;
    var nBody = document.getElementsByTagName('head')[0];
    var newInclude = document.createElement('script');
    newInclude.type = 'text/javascript';
    newInclude.setAttribute("src", home_page + "feeds/posts/summary?start-index=" + jsonstart + "&max-results=1&alt=json-in-script&callback=finddatepost");
    nBody.appendChild(newInclude)
}

function redirectlabel(numberpage) {
    jsonstart = (numberpage - 1) * postperpage;
    nopage = numberpage;
    var nBody = document.getElementsByTagName('head')[0];
    var newInclude = document.createElement('script');
    newInclude.type = 'text/javascript';
    newInclude.setAttribute("src", home_page + "feeds/posts/summary/-/" + lblname1 + "?start-index=" + jsonstart + "&max-results=1&alt=json-in-script&callback=finddatepost");
    nBody.appendChild(newInclude)
}

function finddatepost(root) {
    post = root.feed.entry[0];
    var timestamp1 = post.published.$t.substring(0, 19) + post.published.$t.substring(23, 29);
    var timestamp = encodeURIComponent(timestamp1);
    if (jenis == "page") {
        var alamat = "/search?updated-max=" + timestamp + "&max-results=" + postperpage + "#PageNo=" + nopage
    } else {
        var alamat = "/search/label/" + lblname1 + "?updated-max=" + timestamp + "&max-results=" + postperpage + "#PageNo=" + nopage
    }
    location.href = alamat
}


3. 이제 이 소스에서 "http://" 로 검색해본다. 그리고 주소가 포함된 라인을 지워준다. 페이지 네비게이션 소스에서는 아래의 라인이 검색되는데 그 라인을 지워주면 된다.

html += '<div><a href="http://24work.blogspot.com" title="Blogger Templates" style="font-size: 7pt; float: right; padding: 2px;" target="_blank"><img border="0" src="http://img1.blogblog.com/img/blank.gif" width="3" height="3" /></a></div>';


4. 저장한 후 그 파일을 업로드한 다음 그 주소를 따서 사용해보고, 별다른 이상이 없는 지 확인한다. 문제가 생기는 경우에는 다시 원래 파일을 사용하거나, 자바스크립트에 대한 지식이 있는 사람들에게 문의를 하는 것이 좋다.



참고로 예시로 든 페이지 네비게이션 기능을 사용할 때는 블로거 템플릿에 삽입하는 소스중 아래 부분도 삭제해야 몰래 링크가 완전히 없어진다.

<a href="http://24work.blogspot.com/" target="_blank" title="Grab this"><img src="http://24work.ucoz.com/24work-blogspot/www.24work.blogspot.com.png" alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a>
<a href="http://24work.blogspot.com/" target="_blank" title="Free Backlinks"><img src="http://24work.ucoz.com/24work-blogspot/www.24work.blogspot.com.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>

2013/06/20

블로거에서 메타 태그 작성으로 검색 순위 올리기

블로거는 구글에서 운영하는 블로그이기 때문에 기본적으로 구글의 검색엔진에 잘 최적화되어 있다. 하지만 조금 더 신경을 써주면 좀 더 검색 엔진에 최적화를 시킬 수 있다.

보통 한국 블로그들은 메타 태그를 설정하는 것이 어렵게 되어 있다. 네이버나 다음 블로거는 메타 태그를 설정할 수 있는 방법이 없고, 티스토리는 HTML 편집을 통해 블로그 전체에 대한 메타 태그를 설정할 수는 있지만, 각각의 포스트에 대한 메타 태그는 입력할 수 있는 방법이 없다. 하지만 블로거는 메타 태그를 입력하는 것이 기본 기능으로 들어가 있기 때문에 쉽게 메타 태그를 설정할 수 있다.

메타 태그 작성 방법

1. 블로거의 대시보드에 들어가서 설정 > 검색 환경설정 으로 들어가면 가장 상단에 메타 태그를 설정하는 곳이 있다. 이제 블로그 설명 오른쪽의 편집 버튼을 누른다.

2. 검색 설명을 사용하시겠습니까? 우측의 를 클릭한 후, 최대 150자로 블로그 설명을 적은 후 변경사항 저장을 누르면, 블로그의 메타 태그 작성이 완료된다.

3. 블로그의 메타 태그 작성이 완료되면 이제 글 작성시, 에디터 우측에는 검색 설명이라는 새로운 옵션이 나타난다.

4. 검색 설명을 클릭하면 아래와 같이 검색 설명을 입력할 수 있는 창이 뜬다.

포스팅시 검색 설명을 작성하면 검색 설명이 검색 엔진에 노출되고 그렇지 않으면 검색 엔진 마음대로 그 글의 일부를 보여주게 된다. 아래의 스크린샷을 참고하면 검색 엔진에 어떻게 노출되는지 알 수 있을 것이다.
메타 태그를 입력한 경우
메타 태그를 입력하지 않은 경우

이렇게 아주 간단한 방법으로 검색 엔진에 대해 좀 더 최적화하는 것이 가능하다.


2013/06/19

중복 컨텐츠가 검색되지 않도록 하기 위해서 글목록 페이지 검색 제한하기

구글은 만약에 중복된 컨텐츠를 가지고 있는 사이트가 있으면, 그 사이트에 패널티를 부과한다. 즉, 구글의 검색 순위에 영향을 줄 수 있다는 말이다.
참고: 검색엔진 최적화와 중복된 컨텐츠의 문제점

그런데, 블로거에서 가장 많이 설치하는 가젯중 하나인 글목록 가젯을 설치하면, 월별 글목록 페이지가 자동으로 생성되고 그 페이지 역시 구글에 크롤링되게 된다.
결국 같은 컨텐츠가 여러 번 인덱싱되고, 그것은 중복 컨텐츠로 인식되게 된다.

아래 스크린샷에서 보면 같은 컨텐츠가 여러 페이지에서 검색이 되고 있음을 볼 수 있다.


중복 컨텐츠 검색 막기

이렇게 같은 컨텐츠가 중복 검색되는 것을 막으려면, 검색 엔진에 글목록 페이지를 검색하지 말라고 지정해주어야 한다. 이것은 "noindex"라는 메타 태그를 글목록 페이지에 적용해주는 것으로 해결될 수 있다. (물론 글목록 페이지에만 검색을 제한하는 것이므로, 블로거 전체가 검색되지 않을 것이라는 걱정은 하지 않아도 된다.)

중복 컨텐츠 검색 막기 순서

  1. 블로거에 로그인한다.
  2. 대시보드에 가서, 템플릿 > HTML 편집으로 들어간다.
  3. <head> 태그를 찾아서 바로 밑에 다음 코드를 입력한다.
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex,noarchive' name='robots'/>
</b:if>

이미 검색엔진에 등록된 중복 컨텐츠는 이제 어떻게 될까?

위의 코드를 적용했다면 결국 중복 컨텐츠가 검색되는 것은 사라질 것이다. 하지만 검색엔진에서 블로그의 글을 인덱싱하는 것에 시간이 걸리므로 바로 적용되는 것이 아니므로 시간을 가지고 기다려야 한다.

2013/06/01

티들리위키로 정보를 정리해보자

차례

1. 위키 소개

아는 것이 힘이라는 말이 있다. 하지만 예전과는 달리 요즘에는 인터넷에 들어가서 간단하게 검색해보는 것만으로 대부분의 정보를 습득할 수 있다. 해외 토픽으로 인터넷 검색만으로 나이 어린 학생이 핵폭탄을 만들었다는 얘기도 들릴 정도이다.

하지만 인터넷에 있는 정보들이 언제나 신뢰성 있고, 잘 정리되어 있는 내용들만 담고 있는 것도 아니다. 사실 인터넷에는 쓰레기 같은 정보들도 넘쳐난다. 따라서 정보의 홍수 시대에 살고 있는 사람들에게는 여러가지 정보를 모아서 그것들을 선별하고, 특정 목적에 맞게 정리 보존할 도구를 가지는 것이 필수적이라고 할 수 있다.

당연하게도 정보를 모아서 정리할만한 도구들은 수없이 많다. 그만큼 많은 사람들에게 이런 도구들이 필요하다는 방증이라고 할 수 있다. 그런 여러가지 도구들 중에서 오늘 이 글에서 설명하고자 하는 것은 바로 "위키위키"다. "위키위키"는 여러가지 항목들을 여러 사용자가 함께 입력하고 편집해서 자료를 완성시켜가는 시스템이다. 가장 대표적인 위키위키인 "위키백과사전"에는 수많은 항목들이 존재하는데, 그것을 한 사람이나 소수의 사람들만이 작성했더라면 지금과 같은 방대한 내용을 담기는 어려웠을 것이다.

위키백과에 들어가서 글들을 읽다보면 약간은 신기하게 느껴질 수 있는 것이 있다. 분명히 여러사람들에 의해 작성된 글들임에도 불구하고 한 사람이 작성한 것처럼 보인다는 것이다. 그것은 위키백과에 글을 쓴 많은 사람들이, 위키백과에서 제시한 가이드라인에 맞춰서 글을 썼기 때문이기도 하지만 "위키위키"라는 시스템의 특성 때문이기도 하다. "위키위키"에서 글을 편집할 때는 우리가 인터넷에서 일반적으로 접하는 일반적으로 많이 보는 위지윅 에디터를 이용해서 글을 쓰지 않고, HTML을 작성할 때와 비슷하게 몇가지 태그를 사용해서 글을 작성한다.

당연히 처음 접하는 사람들에게는 진입장벽으로 다가올 수 있는 부분이다. 하지만 태그를 사용해서 글을 작성하기 때문에 얻는 장점들이 있다.

우선 글을 꾸미는 형식의 통일성이 생긴다. 위지윅 에디터에서는 특정 단어나 문장을 강조하려고 할 때 선택할 수 있는 방법이 많다. 글씨를 굵게 하거나, 글씨를 크게 하거나, 글씨의 색을 바꿀 수도 있다. 따라서 사람에 따라 강조하는 부분의 형식이 달라질 수 있다. 하지만 태그를 이용하는 경우 강조태그를 이용해서 특정 부분을 강조하도록 되어 있다. 따라서 아무리 여러 사람들이 글을 작성해도 강조하는 부분의 형식은 같을 수 밖에 없다.

또한, 태그를 이용해서 글을 작성하면 글의 형식 보다는 글의 내용에 집중할 수 있게 된다. 워드를 작성하면서 좀 더 보기 좋게 만들겠다고, 폰트를 바꿔보기도 하고 폰트의 크기를 바꿔보기도 하고, 자간을 넓히거나 줄이거나 하면서 시간을 보내본 사람들이 많이 있을 것이다. 아무래도 글의 디자인이 바로 보여지고, 그 디자인을 쉽게 바꿀 수 있으면 내용뿐만 아니라 디자인에 집중하게 되는 것이 보통이다. 반면에 태그를 이용해서 글을 작성할 때는 형식은 이미 정해져 있으므로 글의 내용에만 집중하면 된다.

그리고 위키의 특성상 제목 태그를 적극 활용하게 되는데, 그래서 글을 좀 더 계층적이고 조직적으로 작성할 가능성이 높아진다. 이런 특징은 블로그에 글을 쓸 때처럼 생각나는대로 글을 쓰기보다는 좀 더 체계적으로 글을 쓸 수 있도록 유도해주는 역할을 한다.

2. 티들리 위키 소개

tiddlywiki(티들리위키)는 html파일 한 개로 이루어진 위키로 자바스크립트를 이용해서 위키의 기능을 구현하는 위키이다. 자바스크립트를 이용해서 html파일을 편집하는 형태이기 때문에 웹상에서는 파일의 변경이 불가능하고 로컬에서 불러와야만 편집이 가능하다. 따라서 위키로 자료를 정리하고 싶지만, 그것을 웹상에 공개하는 것은 꺼리는 사람들에게 적합한 위키라 할 수 있다. 만약 여러 컴퓨터에서 위키를 보고 편집하려면 USB등에 넣고 다니거나, Dropbox등의 동기화 프로그램을 이용해야 한다. 만약 Dropbox를 이용하는 경우 [http]Dropbox의 Public폴더를 이용하면 웹상에서 보는 것도 가능하다.

티들리위키는 파일 하나로 이루어진 단순한 위키이기 때문에 관리하기 상당히 편한 편이다. 다른 위키들의 경우 위키를 사용하기 위해서는 웹호스팅을 구해서 설치해야 하는데, 웹호스팅은 기본적으로 유료이고, 관련 지식이 없는 사람이 웹호스팅에 위키를 설치하는 것은 쉬운 일이 아니다. 또한 위키 관련 파일들이 로컬에 저장되지 않고, 웹호스팅 계정에 저장되기 때문에, 백업하고 관리하는 것들도 불편한 편이다. 특히 DB를 사용하는 미디어위키의 경우 백업을 하려면 DB와 여러 파일들을 모두 백업 해야해서 꽤 손이 많이 가는 편이다. 보통의 위키들에 비해서 티들리위키가 가지는 가장 큰 장점이 바로 간편함이라고 할 수 있겠다. 그러한 이유로 간단한 메모장처럼 사용하는 것도 괜찮다.

다만 다른 위키에서 비해서 기능이 많이 부족한 편이고, 단일 파일로 이루어져 있기 때문에 파일이 너무 커지면 속도가 느려진다는 단점도 가지고 있다. 하지만 꽤 많은 플러그인들이 존재해서 부족한 기능들을 많이 보완해 줄 수 있다. 그리고 보통 자료의 크기에 따라 3000건에서 10000건 이상의 자료가 입력이 되면 느려진다고 하는데, 혼자 쓰는 위키에 3000건 이상의 자료를 입력한다는 것이 쉬운 일이 아니므로 큰 단점은 아니라고 보여진다.

사실 가장 큰 단점은 version control 기능이 지원되지 않는다는 것이다. 보통의 위키의 경우 문서를 수정할 때, 변경 사항을 따로 저장해 놓기 때문에 추후에 변경사항을 확인해서 잘못 변경한 부분을 쉽게 복구할 수 있다. 하지만 티들리위키의 경우 문서 하나하나의 변경점을 확인하는 기능은 없다. 다만 혼자 위키를 쓰는 경우에는 대부분 자기가 편집한 내용에 대해서 어느정도 기억을 하는 경우가 대부분이기 때문에 생각보다 version control 기능을 쓰는 경우가 많지 않은 것 같다. 따라서 version control의 미지원은 위키의 관점에서 보면 상당한 단점이지만, tiddlywiki의 경우 태생적으로 혼자쓰는 것을 목적으로 개발된 것이기 때문에 큰 단점이라고 보기에는 힘들지 않을까 싶다. 또한 옵션에서 자동 백업 옵션을 켜놓는 경우 문서를 수정할 때마다 백업본이 만들어지기 때문에 그 백업본을 통해서 잘못 수정한 부분을 복구하는 것이 어느정도는 가능하다.
플러그인을 통해서 version control 기능을 구현할 수 있다. 다만 다른 위키들과는 다르게 여러가지 버전들을 계속 저장하면 티들리위키를 저장하는 html 파일의 사이즈가 커지게 되는데, 이것이 티들리위키의 성능에 부정적인 영향을 줄 수 있으므로, 필요한 글에만 선택적으로 적용하는 것이 좋을 것 같다. version control 기능을 추가하는 플러그인은 다음 링크를 따라가면 찾을 수 있다.

RevisionsPlugin

3. 설치

http://tiddlywiki.com/

위의 링크에서 티들리위키를 다운로드한다. 압축을 풀면 "empty.html"과 "TiddlySaver.jar" 라는 파일이 나온다. 이 파일들을 같은 폴더에 넣고 "empty.html"을 더블클릭하면 웹브라우저에 tiddlywiki가 뜨는 것을 볼 수 있다. 하지만 앞에서 설명한 것과 같이 기본 기능이 빈약한 편이라서 몇가지 플러그인을 깔아야 편하게 사용할 수 있는데, 아무래도 좀 성가시다. 그래서 기본적인 플러그인을 미리 깔아놓고, 테마도 바꿔놓은 파일을 아래에 링크해 놓는다. 본인이 직접 플러그인을 깔고 세팅하는 것을 즐긴다면 위의 공식 사이트에서 파일을 다운 받아서 세팅하도록 하고, 바로 파일을 다운 받아서 티들리위키를 사용하고자 하는 사람이라면 아래 링크를 활용하는 것이 편할 것이다.

tiddlywiki(130122).zip

☞ 티들리위키는 브라우저의 특성을 타는 편이다. 파이어폭스를 기준으로 개발되었기 때문에 파이어폭스에서 가장 잘 작동한다. 하지만 파이어폭스 최신 버전에서 보안을 이유로 제한한 기능이 있어서 현재 파이어폭스에서 저장이 되지 않는 현상이 발생한다. 이 문제를 해결하기 위해서는 부가기능을 하나 설치해야 한다. 아래 링크를 통해 다운 받고 파이어폭스에 설치하면 저장 문제가 해결된다.

티들리위키 파이어폭스 부가기능

또한 익스플로러에서는 시작할 때마다 차단된 컨텐츠를 허용해 줘야 정상 작동을 한다.

4. 티들리위키 사용법

4.1. 간단 사용법

4.1.1. 첫 실행 전 작업
"empty.html"을 메모장과 같은 텍스트 에디터로 연다. 그리고 "바꾸기" 메뉴를 통해서 "YourName"을 원하는 이름으로 모두 바꾼다. 티들리위키는 처음 실행시 기본 사용자가 "YourName" 으로 되어 있는데, 에디터를 통해 기본 사용자를 바꿔주는 것이 가장 편하다. 그 후 다시 티들리위키를 열면 텍스트 에디터로 바꿔놓은 사용자가 기본 사용자가 되어 있을 것이다. 또한 "empty.html"이라는 파일명 역시 바꾸고 싶으면 바꾼다. 다만 ".html"이라는 확장자는 바꾸지 않도록 한다.

4.1.2. 실행
"empty.html"을 더블클릭하면 기본으로 설정되어 있는 웹브라우저에서 열린다. 또는 웹브라우저 파일메뉴에서 불러오기를 통해 실행할 수도 있다.

4.1.3. 티들러 편집
ⓐ 기존 티들러 편집: (티틀리위키에서는 각 문서를 티틀러라고 부름.)
기존에 있던 티들러를 편집하려면 티들러를 더블클릭하거나 티들러위에 있는 편집(edit)를 클릭한다. 편집이 끝나면 상단 메뉴의 완료 버튼을 클릭한다.

ⓑ 티들러 생성:
오른쪽 사이드메뉴에서 새 티들러(new tiddler)를 선택한다. 제목과 내용을 채워넣고 저장한다.

ⓒ 티들러 삭제:
티들러 편집화면에 들어가면 상단에 삭제 메뉴가 나온다. 삭제를 선택하면 티들러를 삭제할 수 있다.

ⓓ 태그 입력:
티들러 편집창 밑에는 태그 입력란이 있다. 검색시 태그를 이용하면 편하므로 잘 활용하도록 한다. 태그는 쉼표(,)로 구분되므로 여러개의 태그를 입력할 수 있다. 그리고 태그란에 "systemConfig"이라는 태그를 입력하면 그 티들러는 티들리위키의 시스템설정에 관한 티틀러로 인식된다. 플러그인도 플러그인의 내용을 티들러에 붙여넣고 태그만 "systemConfig" 태그를 붙이면 플러그인으로 인식된다.

http://lh4.googleusercontent.com/-rhHD7z2jnks/UGQDowMMlWI/AAAAAAABbdM/DnraEN2qPqg/s640/tiddlywiki00-1.png

http://lh4.googleusercontent.com/-463lbjNnB14/UGQDoyQcvxI/AAAAAAABbdE/IcPoCB1bgd0/s640/tiddlywiki00-2.png


4.1.4. 환경설정
처음 시작하면 "Getting Started"라는 티들러가 떠있다. 거기서 필요한 내용을 바꾼다.
http://lh3.googleusercontent.com/-Lzn3-4kHsHg/UGGg-2DaLaI/AAAAAAABbWQ/CB0EyKWM-BM/s640/tiddlywiki01.png
또한 오른쪽 사이드바의 옵션을 클릭하면 몇가지 설정을 할 수 있고, 고급옵션을 클릭하면 더욱 상세한 설정을 할 수 있다. 아래 스크린샷을 참조한다.

http://lh3.googleusercontent.com/-YhXCs7CCSiM/UGGg-_DO4RI/AAAAAAABbWY/1EahJNY4I_U/s640/tiddlywiki02.png

http://lh5.googleusercontent.com/-lzHe8-UzL18/UGGg-7GUKfI/AAAAAAABbWU/FR1mJGjlK5w/s640/tiddlywiki03.png

티들러위키는 옵션을 모두 브라우저의 쿠키에 저장한다. 따라서 브라우저를 바꿔서 사용하면 옵션이 초기화되고, 브라우저의 쿠키를 지우는 경우에도 옵션이 초기화된다. 만약 영구적으로 옵션을 저장하기 위해서는 "SystemSettings"라는 티들러를 편집해야 한다. 위의 고급옵션표에서 우측에 있는 기능이름을 이용해서 아래의 스크린샷과 같이 설정해주면 영구적으로 옵션을 저장할 수 있다.

http://lh6.googleusercontent.com/-TcCpWhKVTWQ/UGGg_eI_NQI/AAAAAAABbWk/a5UsWORvWYY/s640/tiddlywiki04.png


4.2. 티들리위키 문법 간단 설명

☞ 다음 링크의 텍스트 파일을 다운 받아서 내용을 복사 후 새로운 티들러에 붙여 넣어주면 티들러위키에서 문법을 확인할 수 있다.

tiddlywiki 문법 파일

  ※ 출처: CHATTERBOX 블로그


티들리 위키는 다음과 같은 문법을 지원합니다.

  • 텍스트를 굵게 하고 싶으시다면

''굵게''
  • 취소선을 긋고 싶다면

--strikethrough text--
  • 밑줄을 긋고 싶다면

__밑줄__
  • 글자를 기울이고싶다면

//기울이고//
  • 글자에 위첨자를 넣고 싶다면

^^위첨자^^
  • 글자에 아래첨자를 넣고 싶다면

~~아래첨자~~
  • 글자에 하이라이트처리를 하고 싶다면

@@하이라이트@@
  • CSS문법을 알고 있다면 하이라이트의 색을 바꿀 수 있습니다.

예를 들어 글자 색을 빨간색으로 하거나 혹은 배경 색깔을 파란색으로 할 수 있습니다.

@@CSS attributes separated by semicolons;text@@
@@color:red;빨간색@@
@@background-color:#0000FF;color:white;파란색@@


http://lh4.googleusercontent.com/-d53TLqHUpko/UGQNArhF1GI/AAAAAAABbdg/4BZJUaXSxX0/s800/tiddlywiki05.png

*리스트는
**이렇게
***만듭니다.
***단순히
**별만 붙이면 되는
*아주 간단한 문법이지요.
http://lh6.googleusercontent.com/-T-9entoyAlM/UGQNAi-zVVI/AAAAAAABbdk/ZvBeup9G5iE/s800/tiddlywiki06.png

#숫자
##넘버링 리스트도
###이런 식으로
###가능합니다.
##별 대신
#샵을 사용하시면 됩니다.

  • 한 티들러에서 여러 내용을 이야기하고자 할 때 사용하는 서브 헤드라인입니다.

http://lh6.googleusercontent.com/-XDCzN7mishU/UGQQdBV5znI/AAAAAAABbeA/eTU6qkAhPA8/s800/tiddlywiki06-1.png

!가장 큰 서브입니다.
!!두 번째 서브입니다.
!!!마지막 서브입니다.





  • 위에서 한 절취선은 이렇게 합니다.
----
[[text|url]]
[[내부 링크|FrontPage]]
  • 이미지를 넣고 싶다면








[img[http://media.nkooo.com/ko/329/311634c0b22d68479cdcb055c9f1d65b.jpg]]
  • 이미지를 오른쪽으로

[>img[http://media.nkooo.com/ko/329/311634c0b22d68479cdcb055c9f1d65b.jpg]]
이렇게 이미지를 오른쪽으로 밀어내고 텍스트를 그 옆에 기술하는 것도 가능합니다. 
참고로 이 상자는 {{{내용}}}으로, 상자 안에서는 위키 문법이 작동하지 않습니다.
줄바꿈은 <br>로 자동으로 처리됩니다.
한 줄이 남았으니 무의미하게 낭비하겠습니다
  • 로컬에 있는 이미지를 넣고 싶다면







[img[imgs/example.jpg]]
이렇게 상대 경로를 이용해서 넣어줄 수 있습니다. 드랍박스를 사용하는 경우에도 잘 적용되므로 유용합니다.
  • 표를 만들어봅시다. 전체적인 느낌을 머릿속에 담고 시작하는 것이 좋습니다.
http://lh4.googleusercontent.com/-PhjCkqdsQwY/UGQN6fvSK4I/AAAAAAABbdw/sM5tJqFjbbk/s800/tiddlywiki07.png

|!느낌표를 붙이면|!표 안에서 머릿말이 됩니다.|!세로칸에도 지정할 수 있습니다.|
|!느낌표를 붙이지 않으면|보통의 흰색으로|표시됩니다|
|>|>|한 줄로 통합할 수 있습니다.|
|두 줄로 만들 수도 있습니다.|>| 한 칸 띄고 시작하면 오른쪽 정렬입니다.|
|~|>| 좌우로 한 칸씩 띄면 가운데 정렬입니다. |
|>|>|bgcolor(lightgreen):셀에 배경색을 넣을 수 있습니다.|
|표 말미에 캡션을 넣을 수도 있습니다.|c
  • 인용구는 이렇게 합니다.
SBS 포켓몬스터 1기 엔딩곡 :

http://lh5.googleusercontent.com/-9A_2lSiZFIc/UGQOZvCmUkI/AAAAAAABbd4/1017ejlkFBE/s800/tiddlywiki08.png

인용 문구

<<<
피카츄 라이츄 파이리 꼬부기 버터플 야도란 피존투 또가스
서로 생긴 모습은 달라도 우리는 모두 친구
산에서 들에서 때리고 뒹굴고 사막에서 정글에서 울다가 웃다가
서로 만나기까지 힘들었어도 우리는 모두 친구

내가 원하는 건 너도 원하고 마주잡은 두 손에 맹세해 
힘을 내봐 그래 용기를 내봐 용기를 내봐 그래 용기를 내봐 
피카피카 피카츄 피카피카 피카츄 아름다운 우리 추억 기억해
피카피카 피카츄 피카피카 피카츄 우리 모두 꿈을 위해 
<<<

4.3. 한글화

tiddlywiki.com에서 다운 받은 티들리위키 파일의 경우 한글화가 되어 있지 않다. 따라서 아래와 같은 방법을 통해 한글화를 하는 것이 좋다.

1. 새로운 티들러를 생성한 후 아래의 링크로 한글화 티들러의 내용이 들어있는 텍스트 파일을 다운 받는다.

tiddlywiki 한글화 파일

2. 파일을 메모장등의 텍스트 에디터로 열어서 그 내용을 복사한 뒤, 새로 생성한 티들러에 붙여 넣는다. 티들러의 이름은 아무거나 붙여도 상관없다.

3. 티들러 편집창 밑에 있는 태그입력란에 "systemConfig"이라고 입력한 후 저장한다.

4. 저장하고 다시 시작한다.

※ 플러그인을 설치하는 방법도 한글화하는 방법과 동일합니다. 추후에 추가적으로 플러그인을 설치하려고 하실 때에는 플러그인의 텍스트파일을 새로운 티들러에 붙여넣고 태그에 "systemConfig"이라고만 적어주시면 완료됩니다.

4.4. 참고 사이트


4.5. 추가사항

클리앙의 크샤나님에 따르면 티들리위키의 xml 백업과 복원이 안정적이지 못하다고 한다. 이전에 자료를 날려본 경험이 있다고 하시는 것을 보면 xml 백업과 복원은 사용하지 않는 것이 나을 것 같다. 필자의 경우는 티들리위키를 드롭박스에 동기화시키고 있는데, 드롭박스는 버전관리가 되기 때문에 이전 버전으로 돌아가는 것이 매우 간단하다. 따라서 xml 백업을 쓰기 보다는 드롭박스를 이용하는 것이 더 좋지 않을까 싶다.