Cumulus for Tistory 1.21 업데이트!

Cumulus for TiStory 공개을 통해 Cumulus 플러그인 1.20의 티스토리 버전을 공개했었다.

이 플러그인이 얼마 전 1.21로 업데이트 되었는데, 이제야 알았다.
티스토리용 플러그인도 한글 글꼴을 사용할 수 있도록 수정하여 1.21로 업데이트 한다.

제작자인 Roy Tanck가 밝히는 수정된 내용은 아래와 같다.

= Version 1.21 =
+ Adds an option to show the regular tag cloud to non-flash users (used to be hidden through CSS).
+ The widget title is now optional.
+ Adds support for 'target' attribute to the Flash movie.
+ XML path can now be set through a flashvar.
+ Fixed markup errors in the compatibility mode.
+ Several minor fixes.


그리고, 티스토리 플러그인(및 설치과정)의 수정된 내용은 아래와 같다.

- Cumulus 1.21을 기반으로 함
- swfobject 2.2 적용 (구조가 좀 더 안정적으로 변했다)
- 태그에 다음의 문자가 들어있어도 정상적으로 전시: &(amp), '(따옴표)


설치과정은 아래와 같다.

1. 파일의 설치

아래 파일을 다운받아 압축을 풀면 swfobject.jstagcloud.swf 두 개의 파일이 나온다.
이  두 파일을 스킨 직접올리기 기능을 이용해서 올린다.

TiCumulus_v121.zip

엔터 튤립 9 글꼴을 이용해서 만들었다



2. 스킨 수정

우선 헤더에 아래와 같은 한 줄을 추가한다.
swfobject가 2.x 대로 업데이트 되면서 <body>내에 위치하지 않고, <head> 내에 위치하는 것을 권장하고 있다.

<script type="text/javascript" src="./images/swfobject.js"></script>

다음으로, 스킨을 직접 편집해서 아래와 같은 내용을 찾다.
<div id="tagbox" class="module">
  <h3>태그목록</h3>
  <div class="tagboxWrap">
  <ul>
    <s_random_tags>
    <li>
      <a href="[#\#_tag_link_#\#]" class="[#\#_tag_class_#\#]"> [#\#_tag_name_#\#]</a>
    </li>
    </s_random_tags>
  </ul>
  </div>
</div>
스킨에 따라 조금씩 모양이 다르기는 하지만, 꼭 있는 태그가 <s_random_tags>이다.
우선 수정해야하는 부분은 이 <s_random_tags> 밖에 있는 <ul>-</ul>이다.

이 부분을 아래와 같이 수정한다.
<div id="htags" style="display:none;"><tags>
<s_random_tags>
<a href="[#\#_tag_link_#\#]" class="[#\#_tag_class_#\#]">[#\#_tag_name_#\#]</a>
</s_random_tags>
<a href="/"></a></tags></div>
<div id="TiCumulus"><p>Tistory Cumulus Flash tag cloud by <a href="http://zockr.tistory.com">BLUEnLIVE</a> requires Flash Player 9 or better.</p></div>
<script type="text/javascript">
//<![CDATA[
var flashvars = {};
flashvars.tcolor = "0x2970A6";
flashvars.hicolor = "0x462A56";
flashvars.mode = "tags";
flashvars.distr = "true";
flashvars.tspeed = "100";
flashvars.tagcloud = document.getElementById('htags').innerHTML.replace(/&amp;/gi, ' ').replace(/\'/gi, ' ').replace(/%27/gi, ' ').replace(/&quot;/gi, ' ').replace(/class=([\w]+)/gi, 'class="$1"').replace(/\"\"/gi, '"').replace(/class=\"/gi, 'style=\"font-size:').replace(/:cloud([\d])/gi, ':1$1pt;').replace(/TAGS\>/gi, 'tags>').replace(/\<A\s/gi, '<a ').replace(/\<\/A\>/gi, '</a>').replace(/\"/g, "'");
var params = {};
params.allowScriptAccess = "always";
var attributes = {};
attributes.bgcolor = "#f7f7f7"
swfobject.embedSWF("./images/tagcloud.swf", "TiCumulus", "100%", "200", "9.0.0", null, flashvars, params, attributes);
//]]>
</script>
조금 길지만 소스 보기를 한 뒤에 복사하면 된다.

a. 20행"100%", "200"은 각각 가로, 세로의 크기이다.

b. 19행"#f7f7f7"배경의 색상이다.

c. 10행"0x2970A6"태그의 기본색상이다.

d. 11행"0x462A56"선택된 태그의 색상이다.


인자를 통해 속성을 바꿔줄 수 있다. 상세한 인자들의 목록은 여기를 참조하기 바란다.
설치된 화면은 아래와 같다.

사용자 삽입 이미지

당연한 얘기지만... 화면은 전혀 바뀌지 않았다.