close AJAX search results (지옥만세 bouquins)

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>
        <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>
    </div>
    <div id="search-results">
        <div class="search-results-string">
            Results for "<em><MTSearchString></em>"
        </div>
        <MTNoSearch>
        <div class="search-results-blank">
            You must search for something!
        </div>
        </MTNoSearch>
        <MTNoSearchResults>
        <div class="search-results-none">
            No results found.
        </div>
        </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>
               </div>
            </div>
        </MTSearchResults>
    </div>
</div>
<div id="search-gray-footer">
</div>

위의 코드 중에 <$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 *********/

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

위 코드에서 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></td></tr></table><div id="search-fix-for-ie">
...................
사이드바의 다른 내용들(코멘트 트랙백 등등 원래 사이드 메뉴에 있던 게 있겠죠?)
...................
</div>

이 블로그처럼 사이드에서 검색결과가 출력 될 때는 사이드 처음과 끝에 <div id="search-fix-for-ie">과 </div>으로 묶어 줘야합니다. 가령 무버블의 기본 템플릿에서는 <div id="beta-inner"><div id="search-fix-for-ie"> ....... </div></div>이런식이 될 것입니다. 테이블을 미워한다고 해도 저 테이블이 없으면 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사용자든 건너뛰어도 되니, 그걸로 위안 삼으심 되겠습니다. 이미 하셨으면 어쩔 수 없고요.