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

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.   
2. "posts" style="padding: 10px;">  

  

"center" id="posts-pgno" style="cursor: pointer;">  

  

  

"Javascript" type="text/javascript">  

 /** url의 Parameter를 얻는 Class. **/  

    var request = {   

  parameter: function(name) {  

   return this.parameters()[name];  

  },  

    

  parameters: function() {  

   var result = {};  

   var url = window.location.href;  

   var parameters = url.slice(url.indexOf('?') + 1).split('&');  

      

   for(var i = 0;  i < parameters.length; i++) {  

    var parameter = parameters[i].split('=');  

    result[parameter[0]] = parameter[1];  

   }  

   return result;  

  }  

 }  

   

 /** Page의 정보를 저장. **/  

 var page = {  

  //초기화.  

  init: function(home,max){  

   page.home = home;  

   page.max = max;  

   page.label = '';  

   page.no = 1;  

  },     

     

  //url의 parameter에서 pgno 값을 읽어 옮.  

  setPage: function(){  

   var url = window.location.href;  

   

   var pl = url.lastIndexOf("/label/");  

   var pq = url.lastIndexOf("?");  

     

   if(pl != -1)  

    page.label = url.substr(pl+7,((pq!=-1)?pq:url.length)-(pl+7));  

     

   if(url.indexOf("pgno") != -1)  

    page.no = request.parameter("pgno");  

      

  }  

    

 }  

 /** feed를 parsing 하여 결과 뿌려 줌. **/  

 var obj = {  

  init: function () {  

   obj.obj = document.getElementById('posts');  

   obj.pgno = document.getElementById('posts-pgno');  

  },  

    

  // 검색을 요청하는 함수   

  pingSearch: function () {  

   //변수 선언.  

   obj.s = document.createElement('script');  

   obj.s.type = 'text/javascript';  

   obj.s.charset = 'utf-8';  

     

   //feed callback 함수를 이용 json 객체 구한 후 pongSearch 함수호출.   

   if(page.label == '')  

    obj.s.src = '' + page.home +   

     '/feeds/posts/summary/?max-results='+(page.no*page.max)  

     +'&alt=json-in-script&callback=obj.pongSearch';  

   else  

    obj.s.src = '' + page.home + '/feeds/posts/summary/-/'  

     +page.label+'?max-results='+(page.no*page.max)  

     +'&alt=json-in-script&callback=obj.pongSearch';  

      

   //append.  

   document.getElementsByTagName('head')[0].appendChild(obj.s);  

  },  

     

  // 검색 결과를 뿌리는 함수   

  pongSearch: function (z) {  

   obj.obj.innerHTML = '';  

     

   /* 글 목록을 뿌려 줌. */  

   for (var i = (page.no-1)*page.max; i < page.no*page.max; i++) {  

    //예외처리.  

    if(i >= z.feed.openSearch$totalResults.$t)  

     break;  

      

    //변수선언.  

    var li = document.createElement("li");  

    var a = document.createElement('a');  

      

    //link로 사용할 base url.  

    var url = page.home + '/search';  

    if(page.label != '')  

     url += '/label/' + page.label;  

      

    //최종 link를 url 입력.  

    if (i == 0)   

     a.href = url + '?max-results=1';  

    else {  

     var pub=obj.changeTime(z.feed.entry[i-1].published.$t);  

     a.href = url + '?updated-max=' + pub   

     + '&max-results=1&pgno='+page.no;  

    }  

    a.innerHTML = obj.escapeHtml(z.feed.entry[i].title.$t);  

       

    //append  

    li.appendChild(a);  

    obj.obj.appendChild(li);  

   }  

      

   /* page 뿌려줌. */  

   obj.pongPgno(z);  

  },  

    

  // page를 뿌려주는 함수.  

  pongPgno: function(z){  

   obj.pgno.innerHTML = '';  

   var before = document.createElement('a');  

   var next = document.createElement('a');  

     

   var ten = parseInt((page.no-1)/10);  

   var total = z.feed.openSearch$totalResults.$t;  

  

   /* before page */  

   before.innerHTML = ' << ';     

   if(ten>0)  

    obj.onMouseDown(before, ten*10);  

   obj.pgno.appendChild(before);  

     

   /* page number */  

   for(var i=ten*10; i< (ten+1)*10; i++){  

    if(i >= total/page.max)  

     break;  

    var a = document.createElement('a');  

    obj.onMouseDown(a,i+1);  

      

    a.innerHTML = ' ' + (i+1) + ' ';  

      

    if(i+1 == page.no)  

     a.style.color = 'yellow';       

    obj.pgno.appendChild(a);  

   }  

      

   /* next page */  

   next.innerHTML = ' >> ';  

   if(ten< parseInt(total/page.max/10))  

    obj.onMouseDown(next, (ten+1)*10+1);  

   obj.pgno.appendChild(next);  

  },  

     

  //mouse click event.  

  onMouseDown: function(a, i){  

   a.onmousedown = function(){  

    page.no = i;  

    obj.pingSearch();  

   }  

  },  

  

  //Time 에러 수정.  

  changeTime: function(str){  

   var s = str.lastIndexOf('.')-1;  

   var e = str.lastIndexOf('+')+1;  

     

   var str2 = str.substr(0,s) + '%2B' + str.substr(e,100);  

     

   return str2;  

  },  

    

  // HTML태그 안 먹게 하는 함수  

  escapeHtml: function (str) {  

   str = str.replace(/&/g, "&");  

   str = str.replace(/"<");  

   str = str.replace(/>/g, ">");  

   return str;  

  }  

 };  

  

 page.init('http://creatorhong.blogspot.com', 5);  

 page.setPage();  

 obj.init();   

 obj.pingSearch();  

  

길군요...

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

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

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

그리고... 앞쪽에 있는

태그내부에 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. },