Multi-blog Tag Cloud

Posted on 2007년 03월 12일 by 부깽

MovableType 3.3부터는 Tag 기능이 기본적으로 내장되어있습니다만 멀티 블로그를 이용하는 경우는 각각의 블로그에 생성된 태그를 한 번에 보일 수 있는 플러그인 같은 게 없습니다. 가령 이 블로그는 메인블로그와 photo블로그, guestbook블로그 이렇게 세 개의 블로그를 생성해서 쓰고 있습니다. 그 특성상 guestbook은 태그 같은 게 필요 없지만 메인블로그와 photo 블로그는 공통된 태그를 가질 수 있습니다. 여러 블로그에서 사용된 태그를 한 자리에서 관리 할 수 있게 만든 코드입니다. 기본정렬이야 ‘가나다’ 순이지만 태그 수순 정렬이나, 최근 n개의 태그만 보이게 할 수도 있습니다. 예제 페이지에서 확인할 수 있습니다.

당연히 두 개 이상의 블로그를 생성해서 쓰는 경우를 위한 것이고, 다만 예제 1의 태그 Cutoff Parameter(created by Ogawa)는 무버블타입뿐만 아니라 어느 블로그 툴에서든 사용할 수 있습니다. (등록된 시간이 지남에 따라 태그의 폰트 색상이 자동으로 바뀐 다던가 카운트 수에 따라서 태그의 폰트 크기가 달라 지는 것 등등을 포함하고 있습니다. )

아마도 멀티블로그 이용자라면 GlobalListing플러그인이나 MultiBlog플러그인을 사용하고 있을 것입니다. 제 경우는 GlobalListing을 사용하고 있기 때문에 그에 맞춰서 코드를 작성했지만, Multiblog 플러그인 이용자도 같은 속성을 가지는 값이 분명히 있으니 그 부분만 바꿔주면 됩니다. 귀찮으면 이참에 GlobalListing도 설치하세요.

1. 필요한 플러그인 – plugin
Globallisting.pl (or MultiBlog)
MTCollate.pl
arithmetic.pl – 이 플러그인을 위해서는 Expressions이 필요합니다.

위의 플러그인들을 mt/plugins 디렉토리에 저장합니다. Expressions는 MT가 설치된 곳/extlib/MTPlugins/Expressions.pm 이렇게 저장됩니다. 각각의 플러그인 페이지에서 그 속성들을 살펴보면 좀 더 입맛에 맞게 표현할 수 있을 것입니다.

2. 기본 코드 – 화면에 나타나는 것이 아니라 이를테면 표현될 태그의 속성을 만들 어 주는 것입니다. 태그가 나타나는 페이지에 꼭 들어가야 하는 코드입니다.

이 코드는 여러 개의 블로그 중에서 blog_id 1과 3에 대해 태그 이름과 날짜 그 태그 카운트를 집계하라는 것입니다. 뭔 소린지 모르겠으면 그대로 사용하시면 됩니다.

중요한 것은 멀티 블로그의 아이디를 꼭 지정해야 합니다.
include_blogs="1"과 include_blogs="3" 이 부분을 수정 해야 합니다. 대부분 메인블로그의 아이디는 1일 테고, 그 외 블로그의 아이디는 movabletype 관리자 페이지에서 마우스 올려보심 알 수 있으니, 그것으로 바꿔줍니다.

3. 최근 사용된 n개의 태그 보여주기 – (예제 2)

2번의 코드 아래 넣어주면 됩니다.
limit="10"은 나타날 수를 조절하는 것입니다.
tag_date:- 의 의미는 태그 정렬을 날짜순으로 하는데 최근 것부터 보인다는 얘기입니다.
-를 +로 바꾸면 등록된 순으로 말하자면 오래된 것부터 나타나게 될 것입니다.
tag_named:d 는 중복돼서 나타나는 태그의 이름은 무시한다는 말입니다. 멀티 블로그 특성상 중복되는 태그 이름은 한 번만 나타나게 하고 그 수는 합치는 것입니다.
<a href="http://antimine.kr/tag/ 이 부분은 자신의 사이트 경로에 맞춰야겠지요. 기본 MT템플릿은 <a href="<$MTTagSearchLink$>" rel="tag"><$MTTagName$></a>게 표현하고 있습니다. 요것을 그대로 이용해도 됩니다만, 링크 주소를 깔끔하게 http://당신홈페이지/tag/태그이름 이런 식으로 나타내고 싶다면 EveryBody loves tags에서 RewriteEngine on 부분을 참고로 .htaccess를 만들면 됩니다.

계속 나오는 링크 경로는 말 안 해도 자신의 사이트로 맞춰야 합니다. =.=

4. 태그의 수가 많은 것부터 정렬 (예제 3)

tag_total_count:- 은 태그의 카운트가 많은 순으로 나타낸다는 뜻입니다. -를 +로 바꾸면 반대가 됩니다.

짐작하셨겠지만 tag_name, tag_total_count, tag_date 같은 이름은 MTCollate플러그인을 이용해서 임의로 그 속성을 만들어 준 것입니다. 그러니깐 이름을 바꿀 수도 그 속성값도 원하는 대로 할 수 있습니다.

5. Cutoff Parameter 이용을 위해 수정해야 하는 부분. (예제 1)

Ogqwa님의 원래의 코드에서 li tilte 값만을 바꿔주면 됩니다. 이 코드의 자바스크립트를 보면 li title 값을 가지고 css가 다르게 적용되는 것을 알 수 있습니다.

원 코드를 보면
<li title="<$MTTagName$>:<$MTTagCount$>:<$MTTagDate format="%Y-%m-%d"$>">게 되어 있습니다.

<li title="태그 이름:태그 개 수:태그 날짜(형태 2007-03-13)"> 이것을 위 2번에서 지정한 새로운 값으로 바꿔주면 됩니다.
즉, <ul id="tags">…….</ul>부분을 다음 코드로 바꿔주면 됩니다.

<ul id="tags">
<MTCollateList sort="tag_name">
<MTCollateIfHeader name="tag_name">
<li title="<$MTCollateField name="tag_name"$>:<$MTCollateField name="tag_total_count"$>:<$MTCollateField name="tag_date"$>">
<a href="http://antimine.kr/tag/<$MTCollateField name="tag_name"$>" title="Tag: <$MTCollateField name="tag_name"$>"><$MTCollateField name="tag_name"$></a>
</li>
</MTCollateIfHeader>
</MTCollateList>
</ul>

다른 블로그 툴 사용자도 <li title=“….”> 부분만 수정하면은 그대로 Cutoff Parameter를 이용할 수 있습니다.

외의 css와 자바스트립트 소스는 Ogawa님의 페이지에서 가져다가 붙이면 됩니다. 참고로 css는 <head>…</head>에서 불러들이는 스타일시트에 붙여 넣을 수 있지만 자바스크립트는 꼭 Cutoff Parameter가 사용되는 <ul id="tags">…</ul> 다음에 들어가야 합니다.

예제 페이지에서 본 것처럼 등록된 태그의 날짜에 따라 폰트 색상이 흐려지고 있습니다. 이 날짜의 기준(예를 들자면 60일이 지난 태그는 회색으로, 1년이 지난 태그는 더 흐린 회색으로, 2주가 안 된 것은 파란색으로 등등)은 자바스크립트 소스에서 색은 css에서 지정하면 됩니다.

이상, 두 개 이상의 블로그 사용 시 태그를 한 곳에서 관리할 수 있는 설명이었습니다. 궁금한 점은 코멘트를 이용해 주세요.

webSSearchy 닫기 버튼 만들기

Posted on 2007년 03월 07일 by 부깽

webSSearchy는 무버블타입 최강의 플러그인 중 하나라 할 수 있습니다. 뭐시냐면 구글 야후 네이버 테크노라티 등등의 검색사이트에서 공개한 API를 가지고 엔트리 내에서 관련된 글을 확장해서 볼 수 있는 플러그인입니다. MovableType 3.34로 업그레이드 하면서 요거 한 번 제대로 해보자고 그간 깔아 논 모듈을 버려가며 서버를 옮기는 수고를 마다하지 않았습니다. 이 블로그에서는 TAG 바로 아래 부분에 있는 관련 글 keyword 검색으로 활용하고 있습니다. AJAX를 통해 구현하고 있는데 쪼매 아쉽게도 검색결과를 닫는 버튼이 없습니다. 간단하게 닫기 버튼을 넣을 수 있는 팁입니다.

이 훌륭한 플러그인을 딸랑 세 명만이 이용하고 있다는 것은 sixapart의 비극입니다. 3.3x버전과 3.2버전이 있으니 무버블 이용자라면 꼭 함 설치해 보길 바랍니다.

기본적으로 웹서치가 설치 됐다는 전제에서 시작합니다. 아 그러니깐 그 세 명을 위한 글이냐면 꼭 그런 것은 아닙니다. 나아~중에라도 누군가 어쩌다 선택한 툴이 무버블이었고 그리하여 예까지 오는 억겁의 우연으로 요 글을 봤을 때 도움이 되지 않을까 해서, 안 되겠군요.

1. 다음 코드를 Index Templates의 mt-site.js에 넣어 줍니다. webSSearchy::Javascript를 그대로 불러온다면 거기 맨 아래에 넣으면 됩니다.

<!–
function closewebSSearch(entryID) {
webSSearchyResultID = (‘webSSearchyResult’ + (entryID));
var verTemp=navigator.appVersion.split("MSIE"); //used to do a fix for IE6 and below
if (navigator.appName == "Microsoft Internet Explorer" && parseFloat(verTemp[1]) <= 6.0) {
var doFix=true;
var tempfix = document.getElementById("search-fix-webSSerchy").innerHTML;
} //end of fix for IE6 and below
if (doFix) {document.getElementById("search-fix-webSSerchy").innerHTML = ""; }
if( document.getElementById ) {
document.getElementById(webSSearchyResultID).innerHTML = "";
}
if (doFix) {document.getElementById("search-fix-webSSerchy").innerHTML = tempfix; }
}
//–>

자바스크립트를 잘 모르는 지라 어림짐작으로 만든 것입니다. 삼수씨말마따나 미친년 널뛰대끼 아무 말이나 씨불씨불 해대다보먼 늘품이 생긴다더만 저도 이렇게 마구잡이로 오리고 붙이고 비우짱으로 댐빈 게 돌아가니 마냥 신기할 따름입니다. 그런고로 좀 더 효과적인 방법이 있으면 조언 부탁합니다.

2. Template Modules에 webSSearchy::Links가 있을 겁니다.

원 코드의 <div class="webSSearchyLinks"> …</div>사이에 빨간색 부분을 추가하고
검색결과가 출력되는 <div id="webSSearchyResult<$MTEntryID$>" class="webSSearchyResult"></div>은 <table>…</table>로 감쌉니다. 레이아웃을 짜는 것도 아니니 테이블이 미워도 이해하세요., IE 6.x에서는 테이블이 없으면 아무리 닫아도 공중부양을 멈추지 않습니다.

<div class="webSSearchyLinks">
<MTWebSSearchys>
<MTWebSSearchyLink>
</MTWebSSearchys>
<a href="javascript:closewebSSearch(<$MTEntryID$>)" class="webSSearchy closed">Close::닫기</a>
</div>
<table cellpadding="0" cellspacing="0"><tr><td><div id="webSSearchyResult<$MTEntryID$>" class="webSSearchyResult"></div></td></tr></table>

3. Archive Templates의 Individual Entry Archive에 webSSearchy 검색결과가 출력되는 부분이 있겠죠, <$MTInclude module="webSSearchy::Links"$> 이 코드를 이용하고 있을 것입니다.

<$MTInclude module="webSSearchy::Links"$>
                    <div id="search-fix-webSSerchy">
                        <div class="entry-footer">
                         …………..
                         ………………………………….
                         …………..
                        </div><!–class="entry-footer"–>
                     </div><!–id="search-fix-webSSerchy"–>

이곳처럼 <div class="entry-footer"> ……. </div>위에서 검색결과를 출력할 텐데 그 부분을 <div id="search-fix-webSSerchy"> ……. </div>로 감싸줍니다. 꼬옥 안아줘야 합니다. 그래야 거만한 IE가 반응을 합니다.

4. Stylesheet에 다음 코드를 추가합니다. <$MTInclude module="webSSearchy::CSS"$>를 이용한다면 그곳에 넣으면 됩니다.

.webSSearchyLinks a.closed {
background: url(/img/webssearchy-close2.gif) no-repeat 2px;
border:1px solid #ccc;
}
.webSSearchyLinks a.closed:hover { color: #bd0000;}

조오기 이미지 경로 수정 잊지 마시고요.
끝입니다. 설치보다 훨씬 쉬운 닫기 버튼을 넣는 과정이었습니다.

바로 아래에 보이는 Close::닫기입니다.

close AJAX search results

Posted on 2007년 03월 06일 by 부깽

Movabletype AJAX Search에서 찾기 결과를 close button을 이용해 닫는 팁입니다.
오른 쪽 위의 >> ajax search를 통해서 뭐 하자는 것인지 확인 할 수 있습니다. 검색어를 입력해 보심 됩니다. 좋다고 계속 했다간, 스패머로 간주하고 Error를 큼지막하게 뱉어냅니다.

원문은 Movable Type AJAX Search에서 한글 설명은 무버블타입 AJAX search에서 확인 할 수 있습니다.

원문의 AJAX Search는 AJAX의 장점이랄 수 있는 페이지 갱신 없이 찾기 결과를 나타낼 수 있지만 닫기 버튼이 없어서 페이지가 길어 졌을 경우 약간의 번거로움이 있습니다. 원문 링크 중에 Borderleap에서 닫기 버튼을 이용하고 있기에 그곳 소스를 마구 헤집고 몇 가지 수정을 했습니다. 수정이라고 해봐야 IE에서는 close버튼이 제대로 동작하지 않는 부분과 검색버튼을 눌러야만 실행되는 것을 손 본 것뿐입니다. 여하튼 아래 팁의 저작권은 Movable Type AJAX Search와 Borderleap에 있습니다.

0. 빨강색 굵은 글씨부분은 꼭 경로 설정을 해 줘야 하는 부분입니다.

1.
다음 코드를 ajax.tmpl로 만들어서 mt(설치된 곳)/search_templates/ 폴더 안에 넣어줍니다. (몇 부분 원문의 코드와 틀립니다. )

<div id="search-gray">
    <div id="search-label">
        <div id="search-label-text">
            <img src="http://당신홈페이지/img/검색결과.gif" width="101" height="11" alt="Search Results" />
        </div><!– id="search-label-text" –>
        <div id="search-label-close">
            <a href="javascript:closeSearch()" title="Close search box"><img src="http://당신홈페이지/img/닫기버튼.gif" width="11" height="11" alt="Close search box" /></a>
        </div><!– id="search-label-close" –>
    </div><!– id="search-label" –>
    <div id="search-results">
        <div class="search-results-string">
            Results for "<em><MTSearchString></em>"
        </div><!– class="search-results-string" –>
        <MTNoSearch>
        <div class="search-results-blank">
            You must search for something!
        </div><!– class="search-results-blank" –>
        </MTNoSearch>
        <MTNoSearchResults>
        <div class="search-results-none">
            No results found.
        </div><!– class="search-results-none" –>
        </MTNoSearchResults>
        <MTSearchResults>
            <div id="item-<$MTEntryID$>" class="search-results-item-color">
        <div class="searchbackgroundcolor" style="background-color: <$MTStripeColor target="searchbackgroundcolor" oddcolor="#FFEFE7" evencolor="#FEFDE2"$>; padding:3px 10px 2px 10px;">
                <a href="<$MTEntryLink$>"><$MTEntryTitle$></a>
                  <div class="search-results-date">
                    <$MTEntryDate format="%Y. %m. %d"$>
                  </div><!– class="search-results-date" –>
               </div><!–searchbackgroundcolor end–>
            </div><!– id="item-<$MTEntryID$>"–>
        </MTSearchResults>
    </div><!– id="search-results" –>
</div><!– id="search-gray" –>
<div id="search-gray-footer">
</div><!– id="search-gray-footer" –>

위의 코드 중에 <$MTStripeColor$>는 검색결과의 홀수/짝수의 색을 틀리게 나타내 주는 플러그인 태그입니다. しましまプラグイン에서 다운 받은 후 압축을 풀고 mt(설치된 곳)/plugins/폴더에 넣어주면 됩니다. 이미지 부분은 당연히 텍스트로 대체해도 됩니다.

2.
mt(설치된 곳)에 보면 그러니깐 mt.cgi가 있는 곳과 같은 경로에 mt-config.cgi가 있습니다. 그 파일을 열고 맨 아래에 AltTemplate ajax ajax.tmpl 을 추가합니다. 설명하자면 (mt)/search_templates/ 밑의 ajax.tmpl 파일을, 내부적으로 ajax 라는 별명으로 부르겠다는 얘기입니다.

여기까지는 별 반 다를 게 없습니다. 계속 비슷비슷 합니다만 원문과의 차이를 쓰는 게 귀찮아서 그냥 다 쓰고 있습니다.

3.
인덱스 템플릿에서 mt-site.js 를 열고 맨 아래께에 다음 코드를 추가합니다.

/******* movabletype ajax search *********/
<!–
//USED FOR ALL AJAX FUNCTIONS
function getHTTPObject() {
var xmlhttp;
/*@cc_on
@if (@_jscript_version >= 5)
    try {
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (E) {
        xmlhttp = false;
      }
    }
@else
xmlhttp = false;
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != ‘undefined’) {
    try {
      xmlhttp = new XMLHttpRequest();
    } catch (e) {
      xmlhttp = false;
    }
}
return xmlhttp;
}
var http = getHTTPObject(); // We create the HTTP Object

//–>

4.
인덱스 템플릿에 mt-search.js 라는 파일을 새롭게 만들고 다음 코드를 넣어줍니다. mt-site.js에 넣었더니 제 경우에는 충돌이 나서 파일을 따로 생성한 것입니다.

}
}

function searchMT() {
    var url = "http://당신홈페이지(mt가 설치된 곳까지 경로)/mt-search.cgi?"; // The server-side script
    var searchstring = document.getElementById("searchstring").value;
    var template = document.getElementById("template").value;
    var poststr = "search=" + encodeURI(searchstring) + "&Template=" + encodeURI(template);
    http.open("GET", url + poststr, true);
    http.onreadystatechange = handleSearchResponse;
    http.send(null);
}

위 코드에서 mt-search.cgi가 있는 곳까지 경로는 수정 잊지 마시고요. 끝에 ?도 잊으면 안 됩니다.

5.
거의 다 됐습니다. 여기까지 했으면 담배 한 대 피우며 쉬면됩니다. 꽤 기네요. ;;;

6.
사이드 바에서 서치 form을 찾아서 그러니깐 아래 부분을 찾아서

<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
   <input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
   <label for="search" accesskey="4">Search this blog:</label><br />
   <input id="search" name="search" size="20" />
   <input type="submit" value="Search" />
</form>

다음처럼 바꿔줍니다.

7.
중요한 부분입니다. 검색결과가 출력 될 부분에 다음코드를 넣어 줍니다.

<table cellpadding="0" cellspacing="0"><tr><td><div id="search-results-container"></div><!– id="search-results-container"–></td></tr></table><div id="search-fix-for-ie"><!–id="ajax-fix-for-ie" start –>
……………….
사이드바의 다른 내용들(코멘트 트랙백 등등 원래 사이드 메뉴에 있던 게 있겠죠?)
……………….
</div><!–id="ajax-fix-for-ie" end–>

이 블로그처럼 사이드에서 검색결과가 출력 될 때는 사이드 처음과 끝에 <div id="search-fix-for-ie">과 </div><!–id="ajax-fix-for ie"–>으로 묶어 줘야합니다. 가령 무버블의 기본 템플릿에서는 <div id="beta-inner"><div id="search-fix-for-ie"> ……. </div></div><!–id="beta-inner" end–>이런식이 될 것입니다. 테이블을 미워한다고 해도 저 테이블이 없으면 IE에서는 닫기 버튼을 눌러도 붕 뜹니다. 내 홈페이지는 오직 firefox와 opera만을 위한 곳이다! 라는 분은 테이블을 빼도 됩니다.

8.
css 부분입니다. 요령껏 수정하면 되겠습니다. 이곳에서 사용하는 css입니다.

/***********************************************************/
/***** Movabletype AJAX Search Start *****/
/***********************************************************/
.buttoncss {
position: absolute;
/*bottom:1px;*/
float:right;
top:1px;
right:1px;
}

.searchinputcss {
width:200px;
border-bottom:1px solid #212018;
border-right:1px solid #212018;
border-left:1px solid #212018;
border-top:1px solid #212018;
color:#848284;
padding-left:20px;
background: url(/img/search_bg.gif) top left;
font-variant:small-caps;
font-size:1em;
}

#search {
float:left;
display:inline;
position:absolute;
top:105px;
left:548px;
}

#search-gray {
position:relative;
margin-top:0px;
width:257px;
background-color:#fff;
padding:5px 0px 10px 0px;
border-top:1px solid #fff;
border-bottom:1px dotted #F76921;
border-left:1px solid #FFF;
border-right:1px solid #FFF;
}

#search-label {
position:relative;
padding:10px 10px 10px 10px;
}

#search-label-text {
position:relative;
float:left;
padding-left:10px;
}

#search-label-close {
position:relative;
float:right;
padding-right:10px;
}

.search-results-string {
position:relative;
background-color:#FFFCCC;
margin:10px 10px 0px 10px;
padding:10px 10px 7px 10px;
font-size:12px;
text-decoration: none;
}

.search-results-blank,
.search-results-none {
margin:0px 10px 0px 10px;
padding:10px;
font-size:10px;
background-color:#FFFFFF;
}

.search-results-blank,
.search-results-none {
background-color:#FDEEE6;
}

.search-results-date {
font-size:10px;
margin-left:15px;
color:#666666;
}

.search-results-item-color {
margin:0px 10px 0px 10px;
font-size:9pt;
background-color:#FEFDE2;
}

#search-gray-footer {
position:relative;
padding-bottom:10px;
}

/***** Movabletype AJAX Search End *****/

잘 아시겠지만 그래도 한 번 더! 잊지 말아야 할 것은 두 개의 자바스크립트 파일 링크를 잊으면 안 됩니다.
이 ajax search가 나타나는 페이지의 <head>와 </head>사이에

요것을 넣어야 합니다.

생각보다 긴 작업이네요. 그래도 8번까지의 여정에서 5번은 IE사용자든 FF사용자든 건너뛰어도 되니, 그걸로 위안 삼으심 되겠습니다. 이미 하셨으면 어쩔 수 없고요.

Yearly Archives 생성

Posted on 2007년 02월 22일 by 부깽

MovableType에서 연간 아카이브 목록을 뽑아내는 팁입니다. 이 페이지의 오른 쪽 메뉴를 보면, Yearly Archives 가 있습니다. 클릭 해 보면 연도별 아카이브 생성을 확인 할 수 있습니다. 실상 이곳처럼 어쩌다 블로깅하는 곳에서는 있으나마나지만, 끊임없이 포스팅을 멈추지 않는 곳에서는 퍽 유용하리라 생각합니다.

3가지 플러그인이 필요합니다.
ArchiveDateHeader.pl
archiveload.pl
archiveyear.pl
archiveload.pl 과 archiveyear.pl은 사이트가 닫힌 관계로 이곳에서 직접 다운 받으시면 됩니다. 마우스 오른쪽 버튼을 누르고 다른 이름으로 대상저장을 통해 다운 받으세요.

1. 위 3개의 플러그인을 mt/plugins 디렉토리에 업로드 합니다. 무버블 로그인후 바로 나타나는 화면에서 오른 쪽 메뉴를 보면 plugin이 있습니다. 그곳에 들어가서 오류 메시지 없이 제대로 플러그인 이름이 나타나는지 확인해 봅니다.

2. Templates >> Archives에서 Create new archive template을 누르고 Yearly Archives라는 제목의 새로운 템플릿을 생성합니다.

우선 자신의 Date-Based Archive 템플릿을 그대로 복사해서 Yearly Archives에 복사해 넣고 저장합니다. 차후에 바디부분의 템플릿만 바꿔 줍니다. (4에서 계속 설명합니다.)

3. 다음은 setting >> Publishing 으로 들어갑니다.
Archive Mapping에서 Create New Archive Mapping을 누르면 그림처럼 연두색 부분이 나옵니다. archive type: 을 Monthly 로 선택하고 template: 은 좀 전에 생성한 Yearly Archives를 선택합니다.

Continue reading →

Random Entries

Posted on 2007년 02월 17일 by 부깽

MovableType에서 랜덤엔트리를 보여주는 팁입니다. php를 이용한 것이기 때문에 글 목록을 뽑아 낼 수 있는 블로그툴이라면 어디서나 적용가능하리라 봅니다.

무버블타입에는 원래 MTRandomEntries plugin이 있습니다만, 인덱스 페이지가 리빌드 되야지만, 랜덤이 동작을 합니다. 말하자면 새 글을 올렸거나 누군가 코멘트를 남겼거나 트랙백을 받았을 때만 랜덤하니 이곳처럼 세 가지가 거의 일어나지 않는 곳에서는 무용지물인 플러그인입니다. 그 와중에 작은 변화마저 줄 수가 없으니 서버마저 심심해 할 겁니다.

새로 고침만을 눌러도 동작하는 것은 없냐고 구글에 애걸했더니, Random Entries Using PHP를 찾아 주더군요. 감탄입니다. 새로 고침만 눌러도 랜덤하게 글이 표현이 됩니다. 접속할 때마다 다른 글을 보여준다니 놀랍잖아요? 꽤나 기특해하며 본문을 읽기 시작했는데, 갑자기 저와 너무나 먼 딴 세상 얘기 같습니다. 이걸 어떻게 하라는 말인지.

곰곰이 생각해보니, 조기처럼 굳이 본문 전체를 보여줄 필요는 없을 것 같고, 그냥 제목만 뽑아내는 게 좋겠다 싶더군요. 조것도 당연히 가능한데 상당히 번거롭단 얘기입니다.구글은 더 이상 뱉어내는 게 없고 야후를 달달 볶았더니 PHPを用いたエントリー・ランダムピックアップ Ver 1.00를 떡 하니 뿌려줍니다. 엄청나게 훌륭한(?) php소스의 등장입니다. 요것을 그대로 가져 왔습니다. ;;;;

씹떡껍떡한 소릴랑은 말고 본론으로 들어갑니다.

1. Index Templates에 Random Entries 라는 템플릿을 만들고 파일명은 randomentries.html로 합니다. (동적 퍼블리슁을 이용하는 분은 randomentries.php로 만듭니다.)

그 안에 아래 부분을 넣어 줍니다.

Rebuild this with index templates를 체크 하고 save 그리고 rebuild 합니다.
체크하게 되면 새로운 글을 썼을 경우 이 파일이 리빌드되면서 새로 쓴 글이 자동적으로 전체 글 목록에 포함 됩니다.

www.yourblog.com/randomentries.html 이 만들어 졌습니다. 경로는 당연히 어디다 만드느냐에 따라 틀려질 테고, 이 파일의 용도는 뻔뻔하게 엔트리의 제목과 링크만을 뽑아내는 것입니다. 경우에 따라서 특정 카테고리만 나타나게 한다든지, 같은 몇몇 속성을 넣을 수 있겠죠.

2. 역시 Index Templates에 Random Pick up 이라는 템플릿을 만들고 파일명은
randompickup.html로 합니다. (randompickup.php로 해도 됩니다.)

<?php $entries = file("/home/hosting_users/xxxxx/www/randomentries.html"); $cnt = count($entries) -1; srand( (double)microtime()*1000000 );
echo "<div class=\"pickup\">\n";
echo "<ul>\n";
for ( $i = 0; $i < 3; $i++) { // 3은 보여줄 글 목록 개수입니다.
$num=round( rand(0,$cnt) );
echo "<li>" . $entries[$num] . "</li>\n";
}
echo "</ul>\n";
echo "</div>";
?>

이것을 복사해 넣고 맨 첫줄의 파일경로를 각자의 randomentries.html이 있는 곳으로 설정합니다. 위처럼 절대 경로를 써넣어도 되고, 만약 randomentries.html과 randompickup.html이 같은 경로에 있으면 경로를 삭제하고 파일이름만 넣어도 됩니다.

/home/hosting_users/xxxxx/www/randomentries.html 대신에 randomentries.html만 해도 된다는 뜻입니다.

Rebuild this with index templates 체크를 해도 되고, 안 해도 되고 save 그리고 rebuild 합니다.

randompickup.html 파일이 만들어 졌습니다.

3. 랜덤한 글 목록을 보여 줄 곳에

<? include ("/home/hosting_users/xxxxxx/www/randompickup.html"); ?>

이 부분을 넣어 줍니다. 혹은

이렇게 대신 해도 됩니다.

4. css에 <div class="pickup">부분을 만들어 줍니다.

제 경우는

.pickup {
margin-left: -10px;
margin-top:-3px;
}

.pickup ul {
list-style-image: url(/img/new_random.gif); /*글 목록 앞에 나올 아이콘 이미지 경로, 당연히 수정해야겠죠? */
margin-top:5px;
padding-top:0px;
padding-bottom:0px;
line-height:1.4em;
}

어라, 벌써 끝이네요.
이제 마음껏 새로 고침을 누르면서 감탄하시면 됩니다.

MovableType Valid XHTML 1.1

Posted on 2007년 02월 16일 by 부깽

MovableType은 XHTML 1.0 Transitional에 맞춰져 있는데 이것을 XHTML 1.1로 바꾸려면 코멘트 템플릿에서 form 부분을 수정해야 합니다.

XHTML 1.0 Strict 부터는 form 속성에서 id만 유효하고 name이 없어졌는데 MovableType은 name값을 가지고 모든 것을 처리 합니다. 이 name을 id로 바꿨을 때, MovableType에서 쿠키를 읽어 들이지 못하는 문제가 발생합니다. 게다가 제 경우는 코멘트에 Dynamic Comment Previewing과 작은 에디터를 사용하고 있는데 이것 역시 쿠키 값을 기본으로 하기 때문에 이에 대한 해결책이 꼭 필요했습니다. XHTML 1.1 유효성 통과하자고 그간 만들어 놓은 것을 죄다 버릴 수는 없는 일이니까요.

이 문제를 해결하기 위한 방법입니다.

1. form에서 name을 id로 바꿔 줍니다.
<form method="post" action="<$MTCGIPath$><$MTCommentScript$>"
name="comments_form" onsubmit="if (this.bakecookie.checked) rememberMe(this)">
이 부분 에서 name="comments_form"을 id="comments_form"으로 바꿔줍니다.

2. <form method="post"….. > …..템플릿 내용………</form> 을
<form ….><div> ……..템플릿 내용………</div></form>처럼 div를 넣어 줍니다. 혹은 <p>로 대신 해도 됩니다.

openid나 livejournal을 사용할 경우는 form이 두 번에 걸쳐서 나오고 기본 템플릿에서는 한 번 나옵니다.

여기까지만 하면 기본 템플릿에서는 XHTML 1.1을 통과하게 됩니다.

그런데 문제는 쿠키가 동작을 안 하게 되는 것입니다. 별 짓을 다 하다가 확 컴퓨터를 뽀샤버릴 즘에 Dynamic Comment Previewing에서 힌트를 얻어 쿠키설정 자바스크립트 소스를 수정했더니 잘 됩니다.

결론은 </MTEntryIfCommentsOpen> 다음에 아래 코드를 넣어줍니다.

<br /> <script type=”text/javascript”><br /> <br /> </script><br />

어느 버전부터인지는 모르지만, mt-site.js 파일에 위 속성이 들어갔는데, 살펴보면 한 군데가 틀려졌습니다. 생각해보면 당연한 것인데, 자바스크립트에 무지하다보니 이걸 알아내는 데 종일 삽질을 해댔습니다.

document.comments_form.email.value = getCookie("mtcmtmail");

에서 comments_form.email 을 getElementById(‘email’)로 바꿔준 것입니다.

document.getElementById(‘email’).value = getCookie("mtcmtmail");

mt-site.js내에서 수정을 하셔도 좋고, 템플릿 </MTEntryIfCommentsOpen> 다음에 위의 자바스크립트 소스를 그냥 가져다 붙여도 됩니다.

여기까지면 MovableType 기본 템플릿에서 코멘트가 제대로 동작하고, XHTML 1.1유효성 검사도 통과할 수 있습니다.

여기서부터는 Dynamic Comment Previewing과 작은 에디터를 사용할 경우에 수정해야 할 부분입니다.

Dynamic Comment Previewing 의 자바스크립트 소스에서
document.comments_form.comment-author.value;
부분을 찾아 document.getElementById(‘comments_form’).author.value; 게 바꿔줍니다.

작은 에디터에서도 마찬가지로
onclick="return formatStr(document.comments_form.text, \’strong\’)"
이 부분을
onclick="return formatStr(document.getElementById( \’comments_form\’ ).text, \’strong\’)" 게 수정해 줍니다. 총 6군데가 있을 것입니다.

이제는 Dynamic Comment Previewing과 작은 에디터를 즐기면서(?) XHTML 1.1 유효성 검사를 통과할 수 있을 것입니다.

MovableType 3.34 업그레이드

Posted on 2007년 02월 15일 by 부깽

무버블타입 3.34로 업그레이드 했습니다. 스킨을 바꿨고, 모든 페이지를 xhtml 1.1에 맞도록 수정 했습니다만 여전히 MIME 형식은 text/html입니다. 조만간 application/xhtml+xml로 변환을 생각하고 있습니다. 여기까지도 충분히 지쳐서 photo blog는 버그고 뭐고 당분간은 내비 두기로 했습니다.

몇 가지 변화가 있습니다.

우선 새롭게 Movabletype 카테고리를 만들었습니다. 현재는 무버블 이용자가 거의 없기는 하지만, 어쩌다 처음 시작한 툴이 2.4 버전의 무버블이었고(당시에는 최고의 호황을 누리던 툴이었죠. pMachine이나 WordPress와 비할 바가 아니었습니다.) 그게 여기까지 끈질기게 왔습니다. 끈질기다는 것은 징~하게 블로깅을 안 하면서도 버전의 변화는 잘 따라가고 있었다는 얘기입니다. 그러다 보니 펄을 잘 아는 것도 플러그인을 만들 수 있는 것도 아니지만, 그것들을 어떻게 효과적으로 이용할 수 있는지는 알게 됐습니다. 서당 개 3년이면 왈왈 짖는 다더니 딱 거기까지입니다. Movabletype을 가지고 할 수 있는 혹은 제가 해 놓은 것들에 대한 설명을 써볼 생각입니다. 그간 무버블을 이용하면서 알록블록님께 엄청난 도움을 받았는데, 받는 게 있으면 주는 게 있어야지라는 생각으로 만들어 놓은 것입니다. 이곳이 다른 무버블 이용자에게 도움이 됐으면 하는 바람입니다. 이 카테고리를 만들면서 시간 뺏기거나 하지는 않을까하는 우려는 결코 없었습니다. 한국의 MT 이용자들이라 봐야 체 한 줌도 안 될 테니까요. 한, 열 명 될라나?

Openid, Livejournal, Typekey 등의 로그인을 통해서 코멘트를 남길 수 있습니다. 이미 많은 무버블 이용자가 훨씬 이전 버전부터 사용하고 있던 기능입니다만 별 필요를 못 느꼈었는데 Movabletype 카테고리 만든 기념으로 이참에 적용했습니다. 당연히 익명의 코멘트도 가능합니다. 시험해 보세요.

기존에는 styleswitcher를 가지고 폰트의 크기만을 조절했는데, 이번엔 좀 다르게 바꿨습니다. 마구 마구 변화를 줘야지라고 계획했었지만 귀찮아서 결국 사이드 메뉴만 욌다리갔다리 하는 게 다입니다. 폰트 크기 설정은 mootools를 적용했습니다.

첫 화면에 랜덤엔트리와 랜덤포토를 넣었습니다. 랜덤엔트리에 관련한 무버블 타입 플러그인이 있지만 리빌드가 돼야만 동작을 하는 관계로 크게 유용하지 않았습니다. 왜냐면 이 블로그는 6개월 동안 리빌드가 없을 때도 있었는데, 그 때마다 어쩌다 오는 방문객들에게 아무런 변화를 줄 수 없었으니 얼마나 미안했겠습니까? 여하튼 새로 고침을 누르면 마구 랜덤 하게 표현 됩니다. php random entries를 이용했는데 다른 블로그 툴에서도 조금만 손보면 이용 할 수 있을 것입니다.

Movabletype 3.34의 가장 큰 변화는 Fastcgi를 간편하게 설정 할 수 있다는 것입니다. 조만간 fastcgi의 이용법과 새롭게 적용 된 플러그인에 대한 설명을 첨부하겠습니다. 당분간은 Movabletype과 관련 된 글을 쓸 생각입니다.

아직 개별 페이지 작업이 끝난 것이 아닌 관계로 엄하게 이전 글들이 피드 될 수 있습니다. 이곳을 구독 하는 두 분은 참고하세요. 끝까지 feed주소를 삭제 하지 않았던 두 분 이 구석에서 살짝 고마워합니다. ^^

가끔 블로그를 돌아다니다 보면 “이 페이지는 파이어폭스에서 가장 잘 보입니다.”라는 글을 접할 때마다 뭔가 ‘대단한 곳이구나.’라는 생각과 함께 부러웠답니다. 이곳은 Firefox나 Opera 익스플로어 등을 비교하고 봤을 때, 우울하게도 다들 제각각이고 게 중에 윈도우 2000기반의 IE6.x가 가장 잘 표현을 합니다. xp기반의 IE6.x는 가끔 떨리는 증상이 있던데 왜 여기까지 와서 떨고 지랄인지 모르겠습니다. 여하튼 다들 어중간하게 표현은 합니다.

IE7.0에서는 이곳에 와 본적이 없고, firefox는 1.5x 에서만 테스트를 해 봤고, 오페라는 9.0에서만 테스트 했습니다. 그러니 어딘가에 숨어 있는 버그를 찾아낸다면 코멘트 부탁드립니다. safari에서는 잠깐 본 적이 있는데 많이 우울했습니다. 어쩌란 말인지.

언제나 special thanks 라는 말을 꼭 써보고 싶었는데, 이것을 가능하게 해준 알록블록님!
special thanks입니다.

포토 블로그 + 앨범 만들기

Posted on 2006년 10월 12일 by 부깽

근 6개월 동안 MT에 손을 놓고 있다가 포토블로그에 대한 질문으로 이제야 정리해 보는 거라 상당히 미흡합니다. 아래 기능에 대한 링크와 자세한 설명은 차츰 보충해 나가겠습니다.
기존에 포토블로그를 이용하고 있었지만 썸네일 생성을 따로 해야 하는 불편함이 있었고, 포토 앨범이라기보다는 사진이 들어가 있는 로그의 형태에 가까웠습니다. 바꾸는 김에 썸네일 자동생성, 카테고리를 지정해서 독립된 앨범처럼 보이고 사진의 EXIF 정보를 기본적으로 출력되게끔 했습니다. 그리고 전체사진보기와 카테고리별 사진보기가 가능하도록 만들었습니다. 직접 포토 볼로그를 보는 게 이해하기 쉬울 것입니다. 포토블로그에서 이것저것 눌러보면 ‘아 이게 뭐구나’라고 짐작할 수 있을 것입니다. MovableType의 무궁무진한 확장기능에 박수를 보냅니다.
포토 블로그 + 앨범에 사용된 기능
썸네일 자동생성
(Image::Magick perl 모듈 / MTEmbedImage 플러그인 필요)
EXIF 자동출력
(Image::Info 모듈 / MTImageInfo 플러그인 필요)
디지털 사진의 경우 사진 내에 찍은 시간이라든지 카메라의 기종 등과 같은 정보가 내장되어 있습니다. 이것을 자동으로 불러들이는 것입니다.
여러 개의 pre next 사진 보여주기
MTAgain 플러그인 필요
MTAgain 플러그인 다운로드는 여기서 받으세요.
css만으로 사진의 액자 테두리 자동 생성
IE에서는 액자 테두리에 공간이 생깁니다. IE 버그인데, 소스에서 빈 공간을 두지 않으면 제대로 보입니다. MT뿐만 아니라 다른 툴에서도 사용가능합니다.
사진의 가운데를 기준으로 왼쪽은 이전사진 오른쪽은 다음사진으로 이동
이 기능은 Photo Gallery Templates을 응용했습니다. Photo Gallery Templates은 MT를 기반으로 하는 포토 앨범인데 매우 훌륭합니다. 기존의 블로그와의 호환을 위해서 Photo Gallery Templates 중 맘에 드는 이 기능 하나만을 가지고 온 셈인데 별다른 플러그인 없이 css만을 가지고 만든 것입니다. 제 경우는 MTCompare플러그인을 함께 사용하고 있습니다. MTCompare 플러그인은 블로그의 카테고리별 페이지나 인디비줠 페이지 등등을 다르게 꾸미고 싶을 때 상당히 유용합니다.
전체 사진보기 혹은 카테고리별 사진보기
위의 설명처럼 사진의 정중앙을 기준으로 왼쪽은 이전사진 오른쪽은 다음사진으로 이동을 합니다. 이 때 카테고리(앨범)별로 이동이 가능합니다. 왼쪽 상단의 카테고리 아이콘을 클릭하면 현재 보는 사진을 기준으로 카테고리별 보기로 이동하고 다시 아이콘을 클릭하면 전체보기로 이동합니다.
MTPreviousNextInCategory
이 기능은 플러그인 외에 MT에서 인디비줠을 따로 하나 더 생성해야 합니다.
사진을 확대해서 원본 사이즈 보여주기
lightbox 자바스크립트 소스를 이용했습니다. 매우 간단하게 적용할 수 있습니다. MT뿐만 아니라 어떤 툴에서도 가능합니다. lightbox 2.0을 이용할 수도 있습니다.
외에 사용된 기능
MTGrid 테이블 생성 플러그인입니다. 썸네일을 메인에 뿌려줄 때 깔끔하게 나타낼 수 있습니다.
마지막으로 전체적인 css의 수정이 필요합니다.

MovableType 3.2 업그레이드

Posted on 2006년 04월 18일 by 부깽

힘들게 업그레이드를 끝냈다. 기존에 사용하던 모든 플러그인에 대해서 체크를 끝냈고, 3.2한글화 작업, 스팸코멘트/트랙백 방지는 MT 3.2 한글 플러그인 에서 대부분 해결할 수 있었다.
역시나 가장 어려웠던 것은 3.2 중첩코멘트인데, 해결은 했다지만 뭐가 문제였는지도 뭘 어찌해서 갑자기 잘 되는지도 모르겠다. 여하튼 잘 된다 얼쑤. MT 3.2를 이용하면서 중첩코멘트를 사용하고 있는 블로그가 4개 정도 되는데 이 질문을 해도 답도 없고 메일을 보내도 역시나(대부분의 MT 이용자들의 가장 큰 공통점은 블로그 관리를 안 하는 것과 언제 돌아올지 모르는 잠수인 점을 감안했기에 별 불만은 없다), 뭐 결론은 자고 일어나니 잘 된다. 좋은 꿈을 꿨더니.
MT 3.1x 사용자라면 3.2로 업 했을 때, 다른 설정은 건드릴 필요가 없고, lib/MT/App/Comments.pm 과 lib/MT/Comment.pm을 새롭게 패치 해야 하는데, 그냥 다운 그리고 업이 속 편하다.
이 블로그에서 두 파일의 경로는 다음과 같다. -Comments.pm에는 다중 블로그 연동에 대한 패치가 추가됐지만 그냥 써도 아무런 상관없다. 창에 붙여 넣으면 다운 받을 수 있다.
antimine.kr/lib/MT/App/Comments.pm
antimine.kr/lib/MT/Comment.pm
3.2의 가장 좋은 점은 alogblog님의 BigTemplateWindow를 사용 할 수 있는 것과 Tcode 사용하면서도 트랙백 자동 검색이 가능하다는 점이다.
언제가 될랑가 싶지만 alogblog님의 paginate 플러그인을 적용하고 그즈음에 css와 스킨을 표준에 맞게 고쳐야지.
그리고 하는 김에 search results 의 템플릿도 바꿨다.

MT 이종 인코딩 패치

Posted on 2005년 03월 28일 by 부깽

MovableType 이용자들의 경우 인코딩 문제로 한번 씩은 고민하기 마련이다. 기존에 Gratia님이 만들어 놓은 트랙백 인코딩 패치를 적용하다가 alogblog.com의 이종 인코딩 트랙백 변환 패치로 바꿨다. 트랙백을 보낼 때 조금 더 편하다는 것이 이유이다. 처음 트랙백 인코딩 패치를 하는 블로거들에게는 기존의 방법보다 훨씬 손쉬운 방법이다.
UTF-8을 이용하는 블로그의 경우 rss를 EUC-KR로 내보낼 필요가 있는데, 이것도 플러그인을 통해서 보다 간편하게 적용할 수 있게 됐다. 역시 alogblog.com의 플러그인을 적용해 봤는데, 템플릿을 일일이 수정할 수고가 줄어든다. Index Templates에 Euc-Kr rss 파일을 만들고 기존의 소스를 복사해 붙이기만 하면 된다. 근 2주전부터 wik.ne.kr 포럼이 문을 닫는 바람에 무버블 이용자들의 불편이 있을 텐데 alogblog.com에서 일정 해소 할 수 있을 것이다. MT에 유용한 플러그인들이 아주 많다.
gmail을 이용한 모블로깅에도 관심이 가긴 하는데, 손전화가 걸기와 받기만 가능한지라 그림의 떡이다.

지옥만세 부깽

Vive L'enfer bouquins

Tag Archives: MovableType