RSS Feed 이용, 최근글 목록에 이미지 넣기

RSS Feed 이용, 최근글 목록에 이미지 넣기

  저번 글에 FastBoot v1.4는 최근글 목록 이미지를 Ajax로 긁어오고 있다고 했고, 이것이 고민이라고 했었는데요.

2014/03/24 - [연재/Tistory] - 갤러리형 스킨 구현, 그 구현 후에 이어지는 고민

   이 글에서 밝혔던 Ajax를 사용하지 않는 마크쿼리 스킨 제작자이신 Ungki, H님이 사용하고 있는 방식은 최근글 목록을 통째로 RSS Feed에서 가져오는 방식이었는데, 저는 이것을 좀 바꿔 생각해서 이미지 목록을 가져온 다음, 최근글 목록에 일치하는 이미지로 덮어쓰는 방법을 구현해보았습니다. 이렇게 하면 코멘트수도 사라지지 않고 그대로 노출되며, 발행하지 않은 글의 목록 역시 사라지지 않고 그대로 보입니다. 간단한 XML Parsing을 통해 구현해보았습니다. 무엇보다 최근글 목록 수 만큼 페이지를 요청하던 것을 RSS페이지 1개를 요청하는 것으로 끝내니 속도 향상이 예상됩니다.

	
	<!--F Recent Post Thumbnail Fetch from RSS by Readiz(http://blog.readiz.com/) -->
	<script>
	var recent_items_link = new Array();
	var recent_items_img = new Array();
	$.ajax({
		url:"/rss",
		dataType:"xml",
		success:function(rss){
			$(rss).find('item').each(function() {
				var link = $(this).children('link').text();
				link = link.replace('http://',''); link = '/' + link.split('/')[1];
				var des = $(this).children('description').text();
				e = 'http://cfile';
				g = '"';
				if(des.match(e+"(.*?)"+g)!=null){
					a = des.match(e+"(.*?)"+g)[0];
					a = a.substring(0,a.length-1);
					a = a.replace('original','C80x80')
					recent_items_link.push(link);
					recent_items_img.push(a);
				}
			})
			$("#recentPost li").each(function () {
				var t = $(this).find("a").attr("href");
				var d = $(this).find(".thumb img");
				var i;
				for (i=0; i<recent_items_link.length; ++i) {
				    if (t==recent_items_link[i]) {
				    	d.attr("src",recent_items_img[i]);
				    }
				}
			});
		}
	});
	</script> 
	

  FastBoot 스킨의 다음 버전 스펙으로 들어갈 것이며, 이전에 주르륵 하고 떴던 최근글 목록 이미지들이 이제는 똭! 하고 뜨는 느낌이실 겁니다. 이 작업으로 인해 ygal이 카테고리를 제외한 화면에서는 필요없게 되어 제거하였습니다. Ajax를 사용하는 ygal은 오로지 카테고리 부분에서만 삽입됩니다. 전반적인 성능 향상이 느껴져서 만족 중입니다.

  위 코드는 조금만 응용하면 다른 스킨에서도 사용할 수 있을 것입니다. 저작자와 링크만 걸어주시면 사용하셔도 상관없습니다.