구글 블로그 페이지, 페이징, 페이지네이션 소스 (json-in-script)

3/14/2024 12:30:00 오전

구글 블로그에서 페이지 기능을 구현하는 소스 예제에 대한 안내입니다. 페이지는 페이징, 페이지네이션이라고도 하는데, 해당 예제에서는 페이징이라고 하겠습니다. 소스 구현 중 특이사항은 다음과 같습니다.

1차적으로 구글 블로그 테마 사이트를 사용하다가 보완하는 것이라, 블로거들이 기본적으로 공유한 소스를 토대로 합니다.
json-in-script와 콜백을 사용하며, 해당 부분은 구글에서 사용하지 않을 것을 권장하는 편입니다. 그렇다고 한글로 된 문서가 많이 공유되는 편이 아니라, API를 사용하려고 해도 뭘 어떻게 해야 할지 짐작이 가지 않아서, 그냥 예전 자료를 보완하여 사용하려고 합니다.

구글 블로그 페이지 (페이징, 페이지네이션)

json-in-script를 조회하면 최대 150개의 결과 배열을 가져옵니다. 그리하여 9999와 같이 max-results를 늘리더라도 소용이 없답니다. 기존의 소스는 최대 150개 자료만 가져오기 때문에 해당 부분을 보완했습니다. 다만, 다큐먼트 라이트를 모두 진행한 다음에 콜백이 진행하며, 현재 블로거의 게시물 개수를 확인하는 부분을 따로 넣지는 않고 하드코딩 해놓았습니다. 보완할 수 있다면 공유 좀 해주세요~ 페이징 때문에 시간을 많이 허비하고 싶지 않아서 임시로 처리하였답니다.

특히, 페이징 시 점프브레이크의 사용이 중요합니다.

페이징 환경설정

환경설정 코드를 진행합니다. 테마나 디자이너에서는 안 보일테고, 직접 수정하는 형식으로 하였습니다. 블로거 고수님들이 수정 좀 해주면 좋을 것 같기도...! 😘

p_page150Units: 2 => 게시물 150개마다 올려줍니다. 함수에서 게시물 개수만큼 가져올 수 있도록 보완작업이 필요해 보입니다. 보완하시면 공유 좀 해주세요~
p_allArr: [] => 150개마다 조회한 모든 게시물 배열을 할당하는 변수입니다.
perPage: 8 => 한 페이지마다 몇 개의 게시물을 노출할 것인지 지정합니다. 블로거 설정 부분 게시물과 동일하게 해주세요. 이 부분을 해당 설정값과 연동하도록 하지는 않았습니다.
numPages: 7 => 아래에 페이징 몇 개로 할 것인지 설정
firstText: "처음" => 처음 페이지 명칭 설정
lastText: "마지막" => 마지막 페이지 명칭 설정
nextText: "다음" => 다음 페이지 명칭 설정
prevText: "이전" => 이전 페이지 명칭 설정

<script type='text/javascript'>
  var pageNaviConf = {
    p_page150Units: 2,
    p_allArr: [],
    perPage: 8,
    numPages: 7,
    firstText: &quot;처음&quot;,
    lastText: &quot;마지막&quot;,
    nextText: &quot;다음&quot;,
    prevText: &quot;이전&quot;
  }
</script>

페이징 소스

라벨 검색인지, 아닌지를 점검하여 다큐먼트에 라이트를 진행합니다. 그리고 해당 건으로 콜백 함수를 호출합니다. 콜백함수는 json으로 호출한 게시물을 배열에 담습니다. 마지막으로 show 함수에서 현재 선택한 페이지가 가운데 갈 수 있도록 디자인 작업을 진행합니다.

<script type='text/javascript'>
//<![CDATA[                
    function pageNavi(o) {
        var m = location.href
          , l = m.indexOf("/search/label/") != -1
          , a = l ? m.substr(m.indexOf("/search/label/") + 14, m.length) : "";
        a = a.indexOf("?") != -1 ? a.substr(0, a.indexOf("?")) : a;
        var g = l ? "/search/label/" + a + "?updated-max=" : "/search?updated-max="
          , k = 0
          , e = 0;
        var mob = ''

                    for(var i=0;i<o.feed.entry.length;i++) {
               pageNaviConf.p_allArr.push(o.feed.entry[i])
                   }  

        if (o.feed.entry.length >= 150) {
          return
        }  

                k = pageNaviConf.p_allArr.length
        , e = Math.ceil(k / pageNaviConf.perPage);

        if (e <= 1) {
          return
        }

        var n = 1
          , h = [""];

        if (isMobile()) {
          mob = "&m=1"
  }

        l ? h.push("/search/label/" + a + "?max-results=" + pageNaviConf.perPage) : h.push("/?max-results=" + pageNaviConf.perPage);  

        for (var d = 2; d <= e; d++) {
            var c = (d - 1) * pageNaviConf.perPage - 1
     , b = pageNaviConf.p_allArr[c].published.$t
              , f = b.substring(0, 19) + b.substring(23, 29);
            f = encodeURIComponent(f);
            if (m.indexOf(f) != -1) {
                n = d
            }      
            h.push(g + f + "&max-results=" + pageNaviConf.perPage + mob)      
         }

        pageNavi.show(h, n, e)  
    }
    pageNavi.show = function(f, e, a) {
        var d = Math.floor((pageNaviConf.numPages - 1) / 2)
          , g = pageNaviConf.numPages - 1 - d
          , c = e - d;
        if (c <= 0) {
            c = 1
        }
        endPage = e + g;
        if ((endPage - c) < pageNaviConf.numPages) {
            endPage = c + pageNaviConf.numPages - 1
        }
        if (endPage > a) {
            endPage = a;
            c = a - pageNaviConf.numPages + 1
        }
        if (c <= 0) {
            c = 1
        }
        var b = '<span class="pages">Pages ' + e + ' of ' + a + "</span> ";
        if (c > 1) {
            b += '<a href="' + f[1] + '">' + pageNaviConf.firstText + "</a>"
        }
        if (e > 1) {
            b += '<a href="' + f[e - 1] + '">' + pageNaviConf.prevText + "</a>"
        }
        for (i = c; i <= endPage; ++i) {
            if (i == e) {
                b += '<span class="current">' + i + "</span>"
            } else {
                b += '<a href="' + f[i] + '">' + i + "</a>"
            }
        }
        if (e < a) {
            b += '<a href="' + f[e + 1] + '">' + pageNaviConf.nextText + "</a>"
        }
        if (endPage < a) {
            b += '<a href="' + f[a] + '">' + pageNaviConf.lastText + "</a>"
        }
        document.write(b)
    }
    ;
    (function() {  
        var b = location.href;
        if (b.indexOf("?q=") != -1 || b.indexOf(".html") != -1) {
            return
        }
        var d = b.indexOf("/search/label/") + 14;
        if (d != 13) {
            var c = b.indexOf("?")
              , a = (c == -1) ? b.substring(d) : b.substring(d, c);

            for(var i=0;i<pageNaviConf.p_page150Units;i++) {
              document.write('<script type="text/javascript" src="/feeds/posts/summary/-/' + a + '?alt=json-in-script&callback=pageNavi&max-results=150&start-index=' + (1 + 150 * i) + '"><\/script>')
            }      
        } else {
            for(var i=0;i<pageNaviConf.p_page150Units;i++) {
              document.write('<script type="text/javascript" src="/feeds/posts/summary?alt=json-in-script&callback=pageNavi&max-results=150&start-index=' + (1 + 150 * i) + '"><\/script>')
            }      
        }
    }
    )();

//]]>
</script>

구글 블로그 페이지 (페이징, 페이지네이션)

페이징 환경설정

페이징 소스

댓글