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

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?
<div>  
<div id="posts" style="padding: 10px;">  
</div>  
<div align="center" id="posts-pgno" style="cursor: pointer;">  
</div>  
</div>  
<script language="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(/</g, "<");  
   str = str.replace(/>/g, ">");  
   return str;  
  }  
 };  
  
 page.init('http://creatorhong.blogspot.com', 5);  
 page.setPage();  
 obj.init();   
 obj.pingSearch();  
</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?
changeTime: function(str){  
    var s = str.lastIndexOf('.')-1;  
    var e = str.lastIndexOf('+')+1;  
  
    if(e<1){  
        e = str.lastIndexOf('-')+1;  
        var str2 = str.substr(0,s) + '-' + str.substr(e,100);  
    }  
    else{  
        var str2 = str.substr(0,s) + '%2B' + str.substr(e,100);  
    }  
    return str2;  
},  

프로그래밍

2014년 8월 1일 금요일

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

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

댓글 1개: