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

Posted by Readiz
2014.03.26 04:17 반응형 티스토리/Tistory



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



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



   이 글에서 밝혔던 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은 오로지 카테고리 부분에서만 삽입됩니다. 전반적인 성능 향상이 느껴져서 만족 중입니다.


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


이 댓글을 비밀 댓글로
  1. 좋은데요@@ 벌써부터 다음버전이 기대됩니다.^^
    • 거의 이제 완성버전이다 생각하고 만들고 있습니다.
      남은숙제가 최적화랑 IE7인데.. IE7은 estoque님처럼 스킨을 아예 바꿔버리는 방향으로 생각중입니다.
  2. 오~ RSS로 불러오는 것도 나쁘지 않은데요~

    모바일 페이지를 보면 별도의 사진 갤러리 같은게 있던데

    이런걸 보면 지원하는게 그다지 힘들어 보이지 않는 부분인것 같으면서도,

    아직도 테터툴즈 버전이 1.1이라는 것을 감안하면 다음 측에서는 전~혀~ 관심이 없다는 것을 알수 있습니다. -ㅅ-
    • 그걸 안해줘서 지금 이 삽질을 하고 있는거죠.. ㅠㅠ
  3. 버전 1.5는... 거의 준공 수준의 버전업이 될 것 같네요
  4. 위의 코드를 어디에 삽입하면 되는건가요?

티스토리 툴바