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-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 를 열고 맨 아래께에 다음 코드를 추가합니다.
<!–
//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에 넣었더니 제 경우에는 충돌이 나서 파일을 따로 생성한 것입니다.
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-for-ie").innerHTML;
} //end of fix for IE6 and below
document.getElementById("search-button").disabled=true;
if (http.readyState == 4) {
if (!doFix) {document.getElementById(‘searchstring’).value = ""; } //not cleared for IE because we need to rerun search results when a user clicks BACK
if (doFix) {document.getElementById("search-fix-for-ie").innerHTML = ""; }
document.getElementById(‘search-results-container’).innerHTML = http.responseText;
document.getElementById("search-button").disabled=false;
if (doFix) {document.getElementById("search-fix-for-ie").innerHTML = tempfix; }
}
}
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);
}
function closeSearch() {
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-for-ie").innerHTML;
} //end of fix for IE6 and below
if (doFix) {document.getElementById("search-fix-for-ie").innerHTML = ""; }
document.getElementById(‘search-results-container’).innerHTML = "";
document.getElementById(‘searchstring’).value = "";
if (doFix) {document.getElementById("search-fix-for-ie").innerHTML = tempfix; }
}
위 코드에서 mt-search.cgi가 있는 곳까지 경로는 수정 잊지 마시고요. 끝에 ?도 잊으면 안 됩니다.
5.
거의 다 됐습니다. 여기까지 했으면 담배 한 대 피우며 쉬면됩니다. 꽤 기네요. ;;;
6.
사이드 바에서 서치 form을 찾아서 그러니깐 아래 부분을 찾아서
<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>
다음처럼 바꿔줍니다.
<input id="searchstring" type="text" name="search" class="searchinputcss" value="Ajax Search" onclick="javascript:this.value=”;" />
<input id="search-button" class="buttoncss" type="submit" name="search-button" value="search" onclick="searchMT();" />
<input id="template" type="hidden" name="Template" value="ajax" />
</div><!– id="search" –>
7.
중요한 부분입니다. 검색결과가 출력 될 부분에 다음코드를 넣어 줍니다.
……………….
사이드바의 다른 내용들(코멘트 트랙백 등등 원래 사이드 메뉴에 있던 게 있겠죠?)
……………….
</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>사이에
<script type="text/javascript" src="<$MTBlogURL$>mt-search.js"></script>
요것을 넣어야 합니다.
생각보다 긴 작업이네요. 그래도 8번까지의 여정에서 5번은 IE사용자든 FF사용자든 건너뛰어도 되니, 그걸로 위안 삼으심 되겠습니다. 이미 하셨으면 어쩔 수 없고요.
MovableType AJAX Search
AJAX Search는 검색 결과를 검색 페이지로 넘기지 않고 검색을 하는 페이지에서 바로 검색 결과를 출력 합니다. 사이트에서 원하는 결과가 없다면 페이지 이동을 할 필요가 없습니다. 무버블타입의 이 아작스 검색으로 CSS를 잘 다룬다면 borderleap 처…