2014년 8월 25일 월요일

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

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

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

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

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

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

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

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

일단 코드먼저 보겠습니다.
  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 부분을  아래 코드로 바꿔서 사용해 주시면 됩니다.
    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. },  

    댓글 없음:

    댓글 쓰기