2018년 6월 23일 토요일

구글 블로그에서 글 목록 나오게하기


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<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('.');
        var e = str.lastIndexOf('-')+1;
  
        var str2 = str.substr(0,s) + '-' + 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>
이 소스 코드를 레이아웃 설정 창에 들어가 HTML/CSS 가젯 추가를 누른후 복붙하면된다.
page.init('http://creatorhong.blogspot.com', 5); 이 부분의 주소는 자기 블로그 주소로 집어 넣어야한다 ) 
이 소스코드의 원 출처는 http://blog.g1s.kr/2012/02/blogger-label-posts-list.html 이곳인데 원 출처의 소스코드 그대로하면 글 목록들은 뜨지만 클릭시에 제대로 이동되지 않을것이다. 자바스크립트에 대해서는 문외한이다만(자바스크립트가 맞는지도 모르겠다).. 나름 뭐가 문제인지를 유추하다보니 일단 목록별로 링크 주소의 시간부분이 실제 주소의 시간부분과 다르게 잡히는걸 확인했다. 그래서 문자열을 잘못만지고있나 싶어 쭉 소스코드를 확인하다 이부분을 발견했다.


1
2
3
4
5
6
7
8
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;
  },

이 함수가 시간에 대한 문자열을 만들어주고있는데 코드가 좀 잘못됬다. 물론 예전 형식에는 이 코드가 맞는것일수도 있다만.. 아무리 생각해도 2번 째 줄에서 '.' 위치의 인덱스를 얻어오는 코드는 실수가 아닐까싶다. 저 로직대로라면 16:00.75 를 16:0 이런식으로 잘라내버리게 되는데 .. 너무 이상하지 않은가. 16:00로 자르는게 더 자연스럽다. 어쨋든 그래서 난 


1
2
3
4
5
6
7
8
9
    //Time 에러 수정.
    changeTime: function(str){
        var s = str.lastIndexOf('.');
        var e = str.lastIndexOf('-')+1;
  
        var str2 = str.substr(0,s) + '-' + str.substr(e, 100);
  
        return str2;
    },

이렇게 로직을 바꿔줬고 결과는 잘 돌아가고있다.. 추후에 무슨 문제가 있을지도 모르겠다만.

댓글 없음:

댓글 쓰기