설치형 TC에 Ajax 적용해보았다.

트윗을 보던 중, 쿠나님이 티스토리 블로그에 아약스를 적용하고 있다는 것을 발견했다.

음..

이란 생각과 함께 바로 가서 구경!


읭..

귀찮아서 하기 싫었던건데 막상 보니까 무진장 하고 싶어졌다. ㅋㅋㅋ


그래서 바로 적용 시도.




일단 몇가지 문제가 있다.

1. SyntaxHighlight와 FootNote 등 BLUEnLIVE 님이 적용해두신 스크립트가 먹지 않는다.
뭐 해결하려면 하겠는데 일단 당장은 귀찮으니 패스.
툴팁은 일단 여기를 참고해보도록 하자..

2. TC용 플러그인은 해당 플러그인을 직접 수정해야한다.

3. 카테고리.. [...]
이.. 이건.. 답이 없는듯;;




텍스트큐브 1.8.4엔 기본적으로 jQuery 1.4가 들어간다.
그러니 scrollTo 파일만 넣도록 하자.

scrollTo.js는 여기에서 받을 수 있다.

아 깜빡한게 있군.
로딩 인디케이터는 여기에서 직접 만들 수 있다.



그리고 아래 소스를 head 태그 안이든 적당한 곳에 넣어둔다.

<!-- deVbug.me Ajax -->
<script type="text/javascript" src="/resources/script/jquery/jquery.scrollTo-1.4.2-min.js"></script>
<script language="javascript">
function LoadPage(url)
{
	if (url == "" || typeof url == "undefined" || url == null) return;

	jQuery.scrollTo( 0, 800, {queue:true} );

	jQuery("#content").html("<center><img src='./ajax-loader.gif'></center>");

	jQuery.get(url, function(data) {
		jQuery('#content').html(jQuery(data).find('#content').html());

		jQuery("div.tagTrail a").click(function() {
			LoadPage(this.href); return false;
		});

		var dest_id = url.substring(url.indexOf("#"));
		jQuery.scrollTo( jQuery(dest_id), 800, {queue:true} );
	});
}
</script>

텍스트큐브나 티스토리나 이런 부분은 거의 같아서 쿠나님의 글과 별반 다를게 없다.




주요 a 태그에 다음 내용을 추가한다.

 onclick="LoadPage(this.href); return false;"

블로그 제목, 상단 메뉴 등과 같은 곳이겠지.

이후 스킨 파일에서 href로 검색해서 나오는 곳을 확인하며 일일히 추가해주면 된다.
특히 새로 올라온 글 부분 등.


Paging 부분은 다음처럼 한다.

<s_paging>
	<div id="paging">
		<a  title="이전" class="" id="prevPage" onclick="LoadPage(this.href); return false;">« Prev </a> :
		<s_paging_rep> <a  class="num" onclick="LoadPage(this.href); return false;"></a> : </s_paging_rep>
		<a  title="다음" class="" id="nextPage" onclick="LoadPage(this.href); return false;">Next »</a> 
	</div>
</s_paging>

역시 다를게 없군.




사이드바에서 검색 부분은 아래처럼 하자.

<!-- 검색 -->
<div id="searchBox">
	<s_search>
		<input type="text" name="" value="" onkeypress="if (event.keyCode == 13) { LoadPage('/search/'+this.value); return false; }"/>
		<input value="검색" type="button" onclick="LoadPage('/search/'+document.getElementsByName('')[0].value); return false;" class="submit"/>
	</s_search>
</div>

새로 등록된 댓글, 트랙백 등과 같은 곳에도 똑같이 집어넣으면 알아서 이동하고 스크롤도 된다.




이걸 플러그인 형태로 만들어야 했을텐데 이미 귀찮아서 이따위로 만들어버렸으니.. 떫..

에효 암튼 무엇보다 문법 강조 플러그인이나 제대로 작동하게 조만간 우선 작업해야겠다.
아주 개판으로 나오겠지. ㅠㅠ



아 그리고, 이 외에 수정한 플러그인은, 나같은 경우
FootNote, JP_ArchiveSelectboxTT, MT_Meta_RecentPS_Default 이고..
JP_ShortenEntryContentsTT 는 수정해도 제대로 작동을 안 하네..

http://devbug.me/561