Posts List

2014년 8월 1일 금요일

구글 블로그(블로거) 라벨을 이용한 카테고리.

G1's: 구글 블로그(블로거) 라벨을 이용한 카테고리.
2011 년 8 월 16 일
구글 블로그(블로거)는 아시다 시피 카테고리가 없는데요. 이를 극복하기위해 많은 시도를 하던 중 라벨을 이용해 카테고리를 만들고... 또 얼마전에는 라벨을 선택했을 때 각 라벨에 맞게 글목록이 나오는 방법에 대해서 썼었는데요.
http://creatorhong.blogspot.com/
G1's: [Blogspot] 카테고리 만들기
2012 년 3 월 01 일
var tip = new Category() 처럼 Category라는 클레스를 변수에 할당해 주는데... feed 파싱을 위한 callback 함수에서 이 할당된 변수 이름을 알아야 원하는 변수 내의 함수를 호출하게 되어있습니다. 간단하게 예제의 색별로 넣어주시면 ...
http://creatorhong.blogspot.com/
G1's: [Blogspot] Label을 이용한 글목록(Posts List) 구현.
2012 년 2 월 11 일
그니까 저의 것은 지금 글제목 앞을 장식하는 흑점이 가운데 놓엿다가 이번 수정으로 젤앞에 놓이는데, 그다음 글제목 아닌 역시 시간이 잇고 그 다음 글제목이 뜨고 제목아래가 아닌 직접 이이서 레벌/카테고리가 이어져 있네요,,,,, ...
http://creatorhong.blogspot.com/

=======================================================================

http://creatorhong.blogspot.kr/2012/02/blogger-label-posts-list.html

[Blogspot] Label을 이용한 글목록(Posts List) 구현.

Blogspot에서 글 목록을 보여주는 기능을 제대로 제공해 주지 않아 고민을 하다 없으면 차라리 만들어보자는 생각아래 여러 시도끝에 드디어 Blogspot의 글목록을 제가 원하는데로 만든 것 같네요.

카테고리는 구글의 Label를 통해 어느정도 분류가 가능하지만 이것을 제대로 보여주기 위해서는 해당 카테고리의 글 목록을 보여주는 기능이 필요했었지요.

아래 내용은 제가 직접 구현한 이 포스트 위에 보이시는 Post List를 구현하는 방법입니다.

일단 코드먼저 보겠습니다.
view plainprint?
  1. <div>  
  2. <div id="posts" style="padding: 10px;">  
  3. </div>  
  4. <div align="center" id="posts-pgno" style="cursor: pointer;">  
  5. </div>  
  6. </div>  
  7. <script language="Javascript" type="text/javascript">  
  8.  /** url의 Parameter를 얻는 Class. **/  
  9.     var request = {   
  10.   parameter: function(name) {  
  11.    return this.parameters()[name];  
  12.   },  
  13.     
  14.   parameters: function() {  
  15.    var result = {};  
  16.    var url = window.location.href;  
  17.    var parameters = url.slice(url.indexOf('?') + 1).split('&');  
  18.       
  19.    for(var i = 0;  i < parameters.length; i++) {  
  20.     var parameter = parameters[i].split('=');  
  21.     result[parameter[0]] = parameter[1];  
  22.    }  
  23.    return result;  
  24.   }  
  25.  }  
  26.    
  27.  /** Page의 정보를 저장. **/  
  28.  var page = {  
  29.   //초기화.  
  30.   init: function(home,max){  
  31.    page.home = home;  
  32.    page.max = max;  
  33.    page.label = '';  
  34.    page.no = 1;  
  35.   },     
  36.      
  37.   //url의 parameter에서 pgno 값을 읽어 옮.  
  38.   setPage: function(){  
  39.    var url = window.location.href;  
  40.    
  41.    var pl = url.lastIndexOf("/label/");  
  42.    var pq = url.lastIndexOf("?");  
  43.      
  44.    if(pl != -1)  
  45.     page.label = url.substr(pl+7,((pq!=-1)?pq:url.length)-(pl+7));  
  46.      
  47.    if(url.indexOf("pgno") != -1)  
  48.     page.no = request.parameter("pgno");  
  49.       
  50.   }  
  51.     
  52.  }  
  53.  /** feed를 parsing 하여 결과 뿌려 줌. **/  
  54.  var obj = {  
  55.   init: function () {  
  56.    obj.obj = document.getElementById('posts');  
  57.    obj.pgno = document.getElementById('posts-pgno');  
  58.   },  
  59.     
  60.   // 검색을 요청하는 함수   
  61.   pingSearch: function () {  
  62.    //변수 선언.  
  63.    obj.s = document.createElement('script');  
  64.    obj.s.type = 'text/javascript';  
  65.    obj.s.charset = 'utf-8';  
  66.      
  67.    //feed callback 함수를 이용 json 객체 구한 후 pongSearch 함수호출.   
  68.    if(page.label == '')  
  69.     obj.s.src = '' + page.home +   
  70.      '/feeds/posts/summary/?max-results='+(page.no*page.max)  
  71.      +'&alt=json-in-script&callback=obj.pongSearch';  
  72.    else  
  73.     obj.s.src = '' + page.home + '/feeds/posts/summary/-/'  
  74.      +page.label+'?max-results='+(page.no*page.max)  
  75.      +'&alt=json-in-script&callback=obj.pongSearch';  
  76.       
  77.    //append.  
  78.    document.getElementsByTagName('head')[0].appendChild(obj.s);  
  79.   },  
  80.      
  81.   // 검색 결과를 뿌리는 함수   
  82.   pongSearch: function (z) {  
  83.    obj.obj.innerHTML = '';  
  84.      
  85.    /* 글 목록을 뿌려 줌. */  
  86.    for (var i = (page.no-1)*page.max; i < page.no*page.max; i++) {  
  87.     //예외처리.  
  88.     if(i >= z.feed.openSearch$totalResults.$t)  
  89.      break;  
  90.       
  91.     //변수선언.  
  92.     var li = document.createElement("li");  
  93.     var a = document.createElement('a');  
  94.       
  95.     //link로 사용할 base url.  
  96.     var url = page.home + '/search';  
  97.     if(page.label != '')  
  98.      url += '/label/' + page.label;  
  99.       
  100.     //최종 link를 url 입력.  
  101.     if (i == 0)   
  102.      a.href = url + '?max-results=1';  
  103.     else {  
  104.      var pub=obj.changeTime(z.feed.entry[i-1].published.$t);  
  105.      a.href = url + '?updated-max=' + pub   
  106.      + '&max-results=1&pgno='+page.no;  
  107.     }  
  108.     a.innerHTML = obj.escapeHtml(z.feed.entry[i].title.$t);  
  109.        
  110.     //append  
  111.     li.appendChild(a);  
  112.     obj.obj.appendChild(li);  
  113.    }  
  114.       
  115.    /* page 뿌려줌. */  
  116.    obj.pongPgno(z);  
  117.   },  
  118.     
  119.   // page를 뿌려주는 함수.  
  120.   pongPgno: function(z){  
  121.    obj.pgno.innerHTML = '';  
  122.    var before = document.createElement('a');  
  123.    var next = document.createElement('a');  
  124.      
  125.    var ten = parseInt((page.no-1)/10);  
  126.    var total = z.feed.openSearch$totalResults.$t;  
  127.   
  128.    /* before page */  
  129.    before.innerHTML = ' << ';     
  130.    if(ten>0)  
  131.     obj.onMouseDown(before, ten*10);  
  132.    obj.pgno.appendChild(before);  
  133.      
  134.    /* page number */  
  135.    for(var i=ten*10; i< (ten+1)*10; i++){  
  136.     if(i >= total/page.max)  
  137.      break;  
  138.     var a = document.createElement('a');  
  139.     obj.onMouseDown(a,i+1);  
  140.       
  141.     a.innerHTML = ' ' + (i+1) + ' ';  
  142.       
  143.     if(i+1 == page.no)  
  144.      a.style.color = 'yellow';       
  145.     obj.pgno.appendChild(a);  
  146.    }  
  147.       
  148.    /* next page */  
  149.    next.innerHTML = ' >> ';  
  150.    if(ten< parseInt(total/page.max/10))  
  151.     obj.onMouseDown(next, (ten+1)*10+1);  
  152.    obj.pgno.appendChild(next);  
  153.   },  
  154.      
  155.   //mouse click event.  
  156.   onMouseDown: function(a, i){  
  157.    a.onmousedown = function(){  
  158.     page.no = i;  
  159.     obj.pingSearch();  
  160.    }  
  161.   },  
  162.   
  163.   //Time 에러 수정.  
  164.   changeTime: function(str){  
  165.    var s = str.lastIndexOf('.')-1;  
  166.    var e = str.lastIndexOf('+')+1;  
  167.      
  168.    var str2 = str.substr(0,s) + '%2B' + str.substr(e,100);  
  169.      
  170.    return str2;  
  171.   },  
  172.     
  173.   // HTML태그 안 먹게 하는 함수  
  174.   escapeHtml: function (str) {  
  175.    str = str.replace(/&/g, "&");  
  176.    str = str.replace(/</g, "<");  
  177.    str = str.replace(/>/g, ">");  
  178.    return str;  
  179.   }  
  180.  };  
  181.   
  182.  page.init('http://creatorhong.blogspot.com', 5);  
  183.  page.setPage();  
  184.  obj.init();   
  185.  obj.pingSearch();  
  186. </script>  
길군요...

그래도 그냥 복사 붙여넣기만 하면 되니...

바꾸실 곳은 아래쪽에 page.init('http://creatorhong.blogspot.com', 5);! 각각 블로그의 url 주소와 한 list안에 보여지는 최대 post 수를 입력하면 됩니다. 이때 url 주소 끝에 '/' 가 들어가면 안되구요.

최대 post수를 넘어가는 것은 번호를 넘겨가며 볼 수 있으니 적당한 수를 입력하시면 됩니다. 저 같은경우 5개로 지정하였습니다.

그리고... 앞쪽에 있는 <div> 태그내부에 style를 추가하시거나 css로 꾸미시는 것은 자유!.

이제 끝. 수정할 부분을 수정 하신 후 Blogger에서 제공하는 HTML/javascript 가젯에 코드를 붙여 넣기만 하면 됩니다.

HTML/javascript 가젯 추가하는 것을 모르시는 분이나 저처럼 Post 위쪽에 Posts List를 위치시키는 것이 궁금하신 분들은 링크 의 Post를 참고하시기 바랍니다.

아래는 구현 내용 설명....

전에 구현했던 코드 에서는 url의 label 부분을 읽어서 전체 feed에서 동일한 label를 찾아 순서대로 출력하는 방식이었는데요.
이때 url 인코딩을 제대로 처리 안하고 한 덕분에 여러가지 문제가 있었죠.

그래서 이번에는 url의 Label 를 읽는 것은 같으나 읽은 Label를 가지고 Label 마다 고유의 feed를 불러서 출력해주게 수정하였습니다. 그리고 각 List의 post link 를 post 고유 link가 아닌 Label에서의 순서를 통한 link로 입력하여 post를 눌러도 url 에 Label 이 남도록 수정 하였습니다.

더해서 접었다 펼 수 있게 했던 이전 코드와는 달리 정해진 수 만큼의 List을 항상 띄우고 아래 List Page Number 를 이용해 다음 List로 넘길 수 있도록 수정 하였습니다.

현재 Post Title만을 출력 되도록 하였는데... 혹시라도 label 이나 post 등록 날짜 등을 출력 하고 싶으시면 obj.pongSearch 부분을 수정하시면 됩니다.
이제보니 시간 설정을 표준시간대비 '-'인 곳의 대한 처리를 하지 않았군요. 알려주신 Samuel 님께 감사드립니다.
코드는 댓글에도 있지만.... 표준 시간대비 '-'이신 분들은 위에 코드 중 change:Time 부분을  아래 코드로 바꿔서 사용해 주시면 됩니다.
view plainprint?
  1. changeTime: function(str){  
  2.     var s = str.lastIndexOf('.')-1;  
  3.     var e = str.lastIndexOf('+')+1;  
  4.   
  5.     if(e<1){  
  6.         e = str.lastIndexOf('-')+1;  
  7.         var str2 = str.substr(0,s) + '-' + str.substr(e,100);  
  8.     }  
  9.     else{  
  10.         var str2 = str.substr(0,s) + '%2B' + str.substr(e,100);  
  11.     }  
  12.     return str2;  
  13. },  
작성자: 시간:
라벨:

댓글 없음:

댓글 쓰기

피드 구독하기: 댓글 (Atom)