Script / CSS

G1sUtil.js

G1sBlogger.js

G1sNavigationList.js

G1sCode

Posts List

2017년 7월 12일 수요일

[Blogspot] 글목록(Posts List v2) with Angular.js

블로거를 하면서 가장 많이 찾아오신 분들이 글목록 기능을 적용하기위해 오신 분들이시네요.
2012년도에 제가 구글 블로거를 시작 하면서 가장 필요로 했던 기능이라 javascript에 막 입문한 실력으로 만들어 놓고 공유를 했었는데요.
그동안 버그도 많이 있었고 부족한 기능들도 많아 수정을 한다고 하면서도 실천을 못했는데 이번에 angular.js를 처음 접하면서 글목록 기능을 새로 만들어보았습니다.


만들면서 두가지 버전으로 만들었는데요.
순수 jquery와 angular.js로만 만든 2.0버전과
제가 최근 자주 쓰는 함수들을 모아놓은 유틸을 사용한 3.0 버전입니다.

두 버전에 기능상 차이는 없으며,
글목록 기능만을 필요로 하시는 분들이 사용하실 수 있도록 2.0 버전을 공유하고,
사실상 3.0 버전은 제가 사용하는 버전이 될 것 같습니다.

이번 포스팅에서는 역시 2.0 버전을 적용하는 방법에 대해서 포스팅 하도록 하겠습니다.

우선 소스는 제가 공유하고 있는 Github을 참고하여 주시기바랍니다.



소스를 적용하기 위해 필요한 라이브러리는 위에서 언급했듯이 jquery와 angular.js입니다.
jQuery는 어느정도 javascript 소스를 수정하신 분들은 대부분을 적용이 되어있실텐데요.
우선 두 라이브러리를 적용하기 위해 블로그 관리페이지의 [테마>HTML편집] 페이지로 이동합니다.


아래와 같이 <head>와 </head> 사이에 다음 두 스크립트 태그를 넣어주시기 바랍니다.
<script src='http://code.jquery.com/jquery-latest.min.js'/>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js'/>


다음 angular.js를 사용하기 위해 <html>태그에 ng-app="app" 라고 선언을 하여 주시기 바랍니다.
(해당 작업을 하지 않았을 경우 동적으로 script에서 넣어주는 처리를 하고 있어 꼭 해주셔야 하는 작업은 아닙니다.)


다음으로 레이아웃 페이지로 이동해 가젯을 추가 하신 후 HTML/JavaScript를 추가해주시기 바랍니다.


위 github에서 복사하신 소스를 붙여넣으신 후 아래쪽에 값만 설정해 주시면 됩니다.


G1sPostList( 포스트수페이지수기본정렬 )

포스트 수 : 글목록 한페이지에 보여지는 포스트 수.
페이지 수 : 글목록 하단에 보여지는 페이지 수.
기본정렬 : 기본 글목록 정렬로 게시일(pubnlished)과 업데이트일(updated).

이제 가젯을 원하시는 위치에 배치하시면 적용완료입니다.


적용상의 유의사항으로 기존 angular.js를 사용하시는 분들은 angular.module('app', []); 을 하는 부분이 중복 될 수 있을 텐데요. 이 부분은 getAngular() 함수 내부를 수정해 주시면 될 것 같습니다.

이번에 글목록 기능을 만드면서 중점을 두고 수정한 부분은 다음과 같습니다.

1. 최대 포스트 수 150개 제한 현상 수정
기존에 만든 방식은 feed의 max-result를 늘려가며 데이터를 가져와 보여주는 방식으로 최초 적용할 2012년도 당시만 해도 한번에 최대 500개의 데이터를 가져올 수 있었으나 얼마전부터 최대 150개의 데이터만 가져올 수 있어 최대 150개의 포스트만 리스트에서 보여지는 현상이 있었습니다.
이번에 블로거 feed에 대해서 찾아본 결과 start-index라는 파라미터가 있는 것을 확인하여 max-results 값을 고정값으로 넣고, start-index값을 수정해가며 데이터를 가져오도록 적용하였습니다.
현재 구글코리아 블로거로 테스트 결과 start-index를 조정해가며 현재 포스팅 된 모든 페이지(1580)를 가져올 수 있는것을 확인하였습니다.

2. 간단한 레이아웃 수정
이는 제가 angular.js를 사용한 주된 이유로, 기존 jquery로 동적으로 html태그를 컨트롤 했던 것을 angular.js를 사용할 경우 html 태그에서 데이터를 어디에 사용할지 지정만 해주면 자동으로 데이터가 바인딩이 되어 html, css, javascript를 분리하여 사용할 수 있습니다.
즉 단순 레이아웃만을 수정하시고자 하시는 분들은 html 태그와 css만을 수정하여 변경하실 수 있습니다.

3. 태그별, 날짜별 조회 및 정렬기능 적용
기존 방식은 archive 페이지로 링크를 걸어 해당 url상의 태그정보를 통해 태그들을 보여주는 방식이었는데요.
현재는 타이틀만을 링크로 사용하고 포스트의 각 태그정보와 날짜 정보는 페이지 이동 없이 글목록의 값만 해당 태그와 날짜의 월 데이터가 조회되도록 수정하였습니다.
추가로 정렬기능도 넣었으나...
정렬할 수 있는 값을 게시일과 업데이트밖에 찾지 못한데다 역순으로 정렬은 되어있지 않아 크게 유용할 것 같지는 않네요.

적용 화면은 아래와 같습니다.

기본

태그, 날짜 선택 시

가장 상단의 현재 선택한 라벨이 있을 경우 라벨을 보여주며, 선택한 라벨이 없을 경우 전체리스트라고 표시가 됩니다.
라벨을 클릭할 경우 해당 선택 된 라벨이 취소되며 전체리스트 1페이지로 이동합니다.

마찬가지로 날짜를 선택할 경우 전체리스트 또는 라벨 옆에 날짜가 표시되며 해당 월동안 게시된 포스트들이 보여집니다.
역시 상단의 날짜를 클릭할 경우 날짜 선택이 취소 됩니다.

댓글 23개:

  1. 덕분에 잘 쓰고 있습니다!!!
    이상하게 띄어쓴 태그 찾기가 안되서,
    다 붙여서 쓰고 있습니다.

    답글삭제
    답글
    1. 댓글보고 나서 테스트를 해보니 저는 잘 되네요.
      안될때의 어떤 패턴같은게 있을 텐데 잘 모르겠군요.
      우선 좀더 지켜봐야 할 것 같습니다.

      삭제
  2. 좋은 정보 정말 감사합니다. 잘 쓰겠습니다.

    답글삭제
  3. 블로거 처음 꾸미는 초보입니다.
    GOne Hong 님의 블로거에서 많은 정보 얻어서 정말 감사하게 생각하고 있습니다.
    하지만 제가 html에 대해 전혀 모르다 보니 힘든 부분이 많습니다. ㅠㅠ
    하나하나 배워가고 있지만 아직 갈 길이 머네요.

    죄송하지만 염치 불구하고 하나만 여쭤봐도 될까요.?
    저는 상단 메뉴에 라벨 별로 메뉴를 만들어 놓아서 사람들이 상단 메뉴에서 라벨을 누르면 해당 라벨 글만 뜨도록 설정을 해 놓았습니다.
    (라벨이 많지 않아서 가능하지요.)
    그렇게 만들어 놓았더니 GOne Hong님께서 만들어 주신 소스를 사용하기 조금 불편한 점이 있습니다.

    상단 메뉴에서 라벨을 눌렀을때 포스트 리스트에도 해당 라벨 글만 뜨도록 하려면 소스를 어떻게 변경해야 할까요.?
    답변 해 주신다면 정말정말 감사하겠습니다.

    언제나 좋은 정보 감사합니다.

    답글삭제
    답글
    1. 작년까지만해도 저도 비슷한 방식을 사용했었는데 이번에 방식을 바꾸면서 해당 기능을 적용하지 않았었네요. 소스 변경해서 올려놓았습니다.
      포스트상에 있는 github 링크에 들어가보시면 수정된 소스가 있으실 거구요.
      수정 된 부분은 app.controller 부분에 getParam() 수행한 부분 밑에 아래코드만 추가되었으니 직접 수정해주셔도 됩니다.

      var urls = $scope.url.split("/");
      if(urls.length > 4 && urls[3] == 'search' && urls[4] == 'label'){
      $scope.param['g1sLabel'] = urls[5];
      }

      삭제
    2. 감사합니다.!!
      저도 열공해서 좋은 글 많이 올리겠습니다.!! ㅎㅎ

      언제나 행복하세요~//

      삭제
  4. 아.
    죄송하지만 하나만 더 여쭤봐도 될런지요.

    글 제목 밑에 라벨이 뜨는것도 숨기고 싶습니다. ㅠㅠ
    저는 이미 글마다 하나의 라벨로만 분류를 해 놓아서요. ㅠㅠ
    이건 소스를 어떻게 변경해야 하나요. ㅠㅠ

    염치불구하고 고견 부탁드리겠습니다. ㅠㅠ

    답글삭제
    답글
    1. 페이지에 AngularJs를 적용해 놓으니 댓글에있는 값에도 간섭을 하네요...
      이부분은 댓글로 소스를 남기기는 좀 힘들것 같네요.

      간단하게 설명드리자면 위 소스는 아래와 같이 3가지 부분으로 나뉘어져 있습니다.

      상단 : Style 태그 내의 CSS 소스
      중간 : DIV태그로 감싸여있는 HTML 태그
      하단 : Javascript 소스

      이중 상단과 중단의 CSS와 HTML은 각자가 임의로 수정하여서 원하는 디자인을 적용할 수 있습니다.

      원하시는 데로 라벨이 뜨는걸 없애는부분을 간단하게 설명드리면 DIV 태그내의 class값이 category인 span 태그내의 값들을 삭제해 주시면 됩니다.
      (현재 댓글을 남기는 시점의 소스를 기준으로 57라인 부터 59라인)

      그 외에도 세세한 부분은 취양에 맞게 수정해 주시면 됩니다.

      삭제
  5. 안녕하세요 GOne Hong님 올려주신 소스 정말 감사합니다. 해당 글목록 HTML/Java Script 소스가 사이드바에 잘 적용 되어 잘 작동하는데요. 근데 저는 그 글목록 가젯 밑으로 쓸떼없는 긴 공백이 있어 그 밑에 추가 되는 또 다른 레이아웃 가젯들은 먼 밑으로 떨어져 위치해 버립니다. 글 목록 바로 다음에 다른 가젯을 순서로 놓아도 공백이 생기는건 글목록 밑으로 공백이 있도록 코딩이 되어 있는것 같은데요. 혹시 그 공백을 없앨수 있을런지요.

    답글삭제
    답글
    1. 안녕하세요. 현재 소스상에서는 공백을 따로 잡는 부분은 없습니다.
      아마도 적용하신 테마에 있는 CSS가 제가 만든 소스랑 충돌이 나는부분이 있는거 같네요.
      시험삼아 블로그에서 제공하는 테마 몇개에 적용해봤는데 정상적으로 동작하는것을 확인했습니다.
      하지만 모든 테마를 해본건 아니니... 자세한 것은 적용되어져 있는 URL 주소를 알려주시면 확인 할 수 있을 것 같습니다.

      삭제
    2. 네 다른분들은 별문제 없으신데 아무래도 제 테마가 좀 유별난거 같습니다^^;; 블로그 주소는 https://kpop-sq.blogspot.com/ 인데요. 보시면 우측 사이드 메뉴에 적용된 모든 글목록 다음에 오는 Popular 가젯이 아래 멀리 떨어져 버립니다. 그외에 어떤 가젯을 글목록 다음에 추가해도 Popular 가젯처럼 한참 밑으로 떨어져 버리는데요. 확인 한번 부탁드리겠습니다.

      삭제
    3. 음... 제가 쓴 page라는 클래스가 너무 흔한 명칭이다보니 이부분이 충돌이 나버렸군요... 우선 간단하게..
      적용하신 소스의 32라인 정도에 보시면

      #G1sPostList .pages ul li {
      display:inline-block
      }
      라는 부분이 있는데요. 이 부분을 아래와 같이 수정해 주세요.

      #G1sPostList .pages ul li {
      min-height: 20px;
      display: inline-block;
      }

      현재 사용하고 계신 테마에서 page라는 클래스는 전체 문서를 감싸는 클래스로 min-height 값으로 화면 크기를 잡고 있네요.
      이게 제가 페이지 넘버에 사용한 page 클래스와 충돌이 나서 그 부분이 길어지게 되었네요.
      이 부분은 조만간 충돌이 나지 않는 클래스들로 교체를 해야 할 것 같지만....
      우선 간단하게 위와 같이 수정만 해주셔도 현재의 테마에서는 충돌이 나지 않으실것 같네요.

      삭제
    4. 바로 해결됐습니다 정말 너무 감사합니다^^ 블로그에 다른 소스를 얻어서 적용시킬때 기존 코딩되어 있는 입력값이 다르게 적용되는것도 주의해야 하는거군요. 상세한 설명까지 다시 한번 감사합니다!

      삭제
  6. 안녕하세요 올려주신 팁 매우 잘쓰고 있습니다. 우선 진심으로 감사하다는 얘기부터 전합니다.
    제 블로그스팟에도 적용을 했는데요, 문제없이 기능들은 잘 작동을 합니다만, 한글로 된 레이블의 경우에
    Label : !@#$ 부분에서 한글이 깨지는 현상이 발생합니다. 이런 점은 어디서 문제를 잡아야 할지 좀 애매해서
    댓글 남겼습니다. 혹시 저 코드 내에서의 한글 처리에서 문제가 발생한건 아닌지 생각이 들지만 제가 이런 쪽에
    완전 문외한이라...죄송합니다. 블로그 주소는 parapugliese.blogspot.com 이구요

    답글삭제
    답글
    1. 안녕하세요.
      제가 평일에는 바빠 오늘에서야 살펴보게되었네요.
      며칠전에 모바일로 봤을때는 한글 태그가 정상적으로 잘 나왔었는데요.
      지금은 한글 태그를 모두 지우신 것 같네요...
      제 블로그에도 보시면 아시겠지만 한글태그들을 많이 쓰고 있는데요.
      지금까지 한글이 깨지는 현상을 본적이 없어서요.
      혹시 한글이 깨지는 상황이 어떨때 방생하는지 알 수 있을 까요?
      사용하는 브라우저가 무엇인지.. 어떤 태그를 썼을때 끼지는지 등...

      삭제
    2. 네 구글 크롬을 사용하고 있구요, 지금은 '자동차' 라는 태그를 달아 놨습니다.
      예를들어, '자동차' 를 클릭하게 되면, 글목록 상단에 위치한 label 부분에서 한글이 제대로 나오지 않습니다.
      목록 아래부분의 '레이블이 "자동차'인 게시물을 표시합니다" 부분에서는 잘 나오구요

      삭제
    3. 조금더 추가로 남깁니다. 태그가 한글일 경우에는, 글 목록도 보이지 않는 문제가 있는것 같아요
      브라우저 사이의 차이는 없는것 같습니다

      삭제
    4. 아.. 어떤 상황에서 발생하는지 찾았습니다. 이제 퇴근하고 들어가는 길이라 오늘은 너무 늦은거 같고 내일이나 모레정도 수정해서 올려놓겠습니다.

      삭제
    5. 수정해서 올려놓았습니다. 위의 블로그상의 링크를 통해 Github에서 소스를 가져가서 새로 적용하셔도 되며,
      오늘기준 소스 88라인을 아래와 같이 수정해 주셔도 됩니다.
      * urls[5] -> decodeURIComponent(urls[5])

      $scope.param['g1sLabel'] = decodeURIComponent(urls[5]);

      삭제
    6. 고맙습니다!!! 이제 기능이 모두 정상적으로 작동하네요!!!
      다시한번 감사의 인사 남깁니다^^

      삭제
  7. 정말 찾기 힘든 정보네여
    좋은글 잘 봣습니다^^

    "적용상의 유의사항으로 기존 angular.js를 사용하시는 분들은 angular.module('app', []); 을 하는 부분이 중복 될 수 있을 텐데요. 이 부분은 getAngular() 함수 내부를 수정해 주시면 될 것"

    완전 문외한이라 혹시 저 위의 내용대로 한 다음... ,
    글쎄, 제가 '기존 angular.js를 사용지'인지 모르겠는데,
    위 내용 대로 붙여넣기 한 것 같은데여,
    목록 표시 안되는것 보면은 " getAngular() 함수 내부를 수정" 해줘야 하는건가여? 물론 전 수정을 어디서 어떻게 하는지도 몰라서요.실례하지만 알려주실 수 있으세요


    답글삭제
    답글
    1. angular.js를 쓰고 계신지 잘 모르시겠다면 아마도 안쓰고 계신걸겁니다.
      블로거에서 angular.js를 임의로 쓰고있지는 않으며, 사용자가 직접 넣어주셔야 하는부분이라...
      실제 블로그에 angular.js를 쓰는분도 많을 것 같지는 않네요.

      그것보다는 어떻게 안되는지를 알려주시면 좋을 것 같습니다.
      역시나 블로그 주소를 가르쳐 주시는게 전해듣는것보다 제가 직접 현상을 보면서 확인할 수 있어 가장 좋을 것 같구요..

      삭제