Hexo Plugin Series - hexo-related-popular-posts
이 시리즈는 Hexo 블로그를 Gitlab 페이지로 운영하면서 다양한 플러그인들을 테스트해 보고, 나름대로 설정하는 방법을 정리하는 것이다.
Overview
태그를 기반으로 관련 포스트들에 대한 링크 목록을 만들고, Google Analytics 의 페이지 뷰를 기준으로 인기 있는 (많은 페이지 뷰를 기록하는) 포스트들을 정렬된 링크 목록을 만드는
기능을 제공하는 플러그인이다.
또한 포스트의 내용에 따라서 관련된 포스트들에 대한 링크 목록을 생성할 수 있고, 다양한 Styles, Thumbnails 등을 지원하고, 다양한 부분에 사용자 정의가 가능하며, 성능과 관련해서 캐싱 기능도 포함하고
있다.
Notes
이 글에서는 _config.yml 파일에 설정을 다양하게 지정한다. 따라서 설정을 추가/변경하는 경우는 기존에 실행 중이던 Hexo Server를 재 실행해 줘야 하며 다음과 같이 처리하는 것을 권장한다.
hexo clean # 기존 캐시 및 Static content 삭제 (db.json) hexo g # 신규 Static content 생성 (/public) hexo server --draft # Draft 버전도 동일하게 서비스
Features
이 플러그인은 다음과 같은 기능을 제공한다.
- 연관된 포스트에 대한 링크 리스트 생성 (태그 연관성과 내용 연관성)
- 인기 있는 포스트에 대한 링크 리스트 생성 (페이지 뷰 수 기준 정렬)
- 포스트에 대한 방문자 수 (페이지 뷰) 표시
Notes
이 플러그인의 인기있는 게시글 및 페이지 뷰 처리는
Google Analytics연계를 통해서 처리되며, 설정이 쉽지않고(?) 관련된 구글 계정이 구성되어 있어야 하므로 아래의 설정 부분을 검토하고 이 플러그인을 사용할지 여부를 결정하는 것이 좋다.
Settings
설치는 아래의 명령을 통해서 Hexo 블러그에 추가하면 된다.
$ npm install hexo-related-popular-posts --save기본 적용
기본적인 적용 방법은 블로그에서 사용하는 테마 폴더에서 article.ejs 파일에 아래와 같은 내용을 추가하면 된다.
<%- popular_posts () %>이제 Hexo 를 재 처리해서 결과를 확인해 보면 된다.
$ hexo clean
$ hexo server --draft위의 처리는 해당 포스트 뷰에 태그 기준으로 연관된 다른 포스트에 대한 링크를 보여주는 것으로 실행되면 아래와 같이 생성된 결과를 볼 수 있다.
태그 연관 목록 생성 샘플
참고로 샘플에서는 article-footer 바로 위 부분에 삽입한 것이다.
여기까지는 외부의 정보 및 기타 설정 (_config.yml)이 없이 플러그인의 기본 기능을 사용하는 것이다. 따라서 어느 위치에 연관 목록을 만들지만 고민해서 적용하면 된다.
확장 적용
확장 기능은 다음과 같다.
- Options of helper
- Popular posts
- Avanced Related posts (Morphological Analysis)
- Cache (Improve generation speed)
- Log
- Customize HTML
- Visitor Counter
- Ranking Sheet
확장 적용을 위해서는 아래와 같이 블로그 설정 파일 (블로그 루트에 있는 _config.yml) 에 설정을 추가해 줘야 한다.
# More detailed settings
popularPosts:
# (optional) Popular posts options
googleAnalyticsAPI:
clientId: ******.apps.googleusercontent.com
serviceEmail: *****@developer.gserviceaccount.com
key: /hexo-project-root/path/to/google-services.pem
viewId: 12345678
dateRange: 30
expiresDate: 10
pvMeasurementsStartDate: 2015/11/01
rankingSheet: rankingSheet.txt
# cache: # (Deprecated) This options is Deprecated > v0.1.3
# path: hexo-related-popular-posts-ga-cached.json # (Deprecated) This options is Deprecated > v0.1.3
# expiresDate: 10 # (Deprecated) This options is Deprecated > v0.1.3
# (optional) Advanced Related posts options
morphologicalAnalysis:
negativeKeywordsList: pluginSettings/hexo-rpp-negativewords.txt
limit: 300
# (optional) Related post's weight options
weight:
tagRelevancy: 1.0
contentsRelevancy: 1.0
# (optional) Cache options (Improve generation speed.)
cache:
path: cache/hexo-popular-related-posts-ga-cached.json
# (optional) Log options
log: trueImportant
설정 항목이 모두 (optional) 처리가 되어 있다. 그러나 googleAnalyticsAPI 설정은 설정할꺼면 전부 올바른 값을 설정해야 한다. 그렇지 않으면 오류가 발생한다.
우선 각 기능에 대해서 확인을 먼저하고 나머지 설정에 대한 부분을 확인해 보도록 한다.
Options of helper
위에서 사용한 popular_posts() 에 추가 옵션을 설정하는 것으로 다음과 같은 옵션들을 지정할 수 있다.
| option | description | default |
|---|---|---|
| maxCount | 목록으로 구성할 최대 포스트 수 | 5 |
| ulClass | 목록에 사용할 CSS 클래스 명 | ‘popular-posts’ |
| PPMixingRate | 목록에 인기 포스트와 연관 포스트의 구성 비율 | 0.0 (= 연관 포스트만 처리) |
| isDate | 날짜 표시 여부 | false |
| isImage | 이미지 표시 여부 | false |
| isExcerpt | 발췌 표시 여부 | false |
| PPCategoryFilter | 인기 포스트 목록에 카테고리 설정 옵션 | 미 정의 |
옵션 설정의 예제는 다음과 같다.
연관 포스트 목록에 5개를 표시하고 이미지를 구성하는 경우
<%- popular_posts_json({ maxCount: 5 , ulClass: 'popular-posts' , PPMixingRate: 0.0 , isImage: true}) %>인기 포스트 목록에 10개를 생성하는 경우 (단, Google Analytics API 설정 필요)
<%- popular_posts_json({ maxCount: 10 , ulClass: 'popular-posts' , PPMixingRate: 1.0 }) %>기타 옵션들은 직접 테스트를 해보는 것으로 하고, 화면에 표시되는 HTML 을 설정하고 싶은 경우는 아래의 Customize HTML 을 참고하면 된다.
Popular posts
여기는 Google Analytics 설정 의 페이지 뷰 데이터를 기준으로 동작하는 것이기 때문에 Google Analytics API 호출 설정이 필요하다.
Google Analytics 설정이 되었다는 전제하에 아래와 같은 정보를 블로그 루트 폴더에 있는 _config.yml 파일에 설정해 줘야 한다.
popularPosts:
googleAnalyticsAPI:
clientId: ******.apps.googleusercontent.com
serviceEmail: *****@developer.gserviceaccount.com
key: /hexo-project-root/path/to/google-services.pem
viewId: 12345678
dateRange: 30 # (Optional) The period you want to get by Google Analytics page view. Default = 30
expiresDate: 10 # (optional) Expiration date of cache file. Default = 10Google Analytics 설정 페이지를 잘 확인해서 구성한 후에 필요한 정보를 위의 설정에서 바꿔주면 된다.
우선 아래와 같은 사항에 대해서 구성할 때 검토가 필요하다.
- clientId: 는 사용자 인증 정보의
OAuth 2.0 클라이언트 ID값을 의미한다. - serviceEmail: 은 사용자 인증 정보가 아닌
Service Account를 구성하면 생성되는서비스 계정 ID를 의미한다. 작성자가 데이터가 이메일 포맷이라서 용어를 그렇게 사용한 것 같다. 이 것 때문에 엄청 헤맸다. -_- - key: 는 기본 제공되는 것이 아니기 때문에
Service Account 관리페이지에서 프로젝트를 선택하고 키를 생성해 줘야 한다. 이 부분에서도 json 과 p12 포맷이 존재하는데 json 을 이용하는 방식을 플러그인에서 제공하지 않으므로반드시 p12방식으로 선택해서 키를 생성하고 다운로드하도록 한다. 키 변환 명령은 아래에서 다시 설명한다. - viewId: 는
Account Expolorer를 실행해서 표시되는 사이트 정보 밑에 Account 와 같이 표시되는View항목에 설정된 값을 사용하면 된다.
원문에 Google Analytics 설정 관련 참고자료 가 있기는 하지만 나중에 별도의 포스트를 작성해야 할지도 모르겠다.
위의 _config.yml 파일에 설정한 정보 중에서 몇가지는 환경변수로 처리가 가능하기 때문에 아래와 같이 환경변수와 _config.yml 혼용으로 사용해도 된다.
환경변수 설정
$ export GOOGLEAPI_CLIENTID="******.apps.googleusercontent.com"
$ export GOOGLEAPI_EMAIL="*****@developer.gserviceaccount.com"
$ export GOOGLEAPI_KEY="/path/to/google-services.pem"
$ export GOOGLEAPI_ANALYTICS_TABLE="ga:12345678"_config.yml 설정 변경
popularPosts:
googleAnalyticsAPI:
dateRange: 60
expiresDate: 10Avanced Related posts (Morphological Analysis)
기본적인 연관 포스트 목록은 태그 값을 기준으로 하지만, 내부의 링크나 포스트의 키워드들을 기준으로 형태소 분석(Morphological Analysis) 을 기준으로 설정할 수도 있다.
현재 지원되는 언어는 일어와 영어 딱 2개만 지원되고 있다. 개발자가 일본 사람인 듯하니 어쩔 수 없을 듯하며, 엄청 활성화되기 전에는 한글 지원은 요원해 보인다.
- ja
- en
이를 사용하기 위해서는 _config.yml 에 관련 옵션을 설정해 줘야 한다.
popularPosts:
morphologicalAnalysis:
negativeKeywordsList: hexo-rpp-negativewords.txt # (optional) 분석 대상에서 제외할 키워드들을 지정한 파일 경로 지정
limit: 300 # (optional) 분석에 사용할 키워드의 갯수 제한
weight: # (optional)
tagRelevancy: 1.0 # (optional) 태그 연관성 가중치 설정. 기본 값 = 1.0
contentsRelevancy: 1.0 # (optional) 내용의 연관성 가중치 설정. 기본 값 = 1.0제외 키워드 설정 파일은 한 라인에 하나씩 정규식으로 설정할 수 있다.
^.$
^[0-9]+$
^String to exclude from related keywords$
^関連キーワードから除外しておきたい文字列を正規表現で指定する$
^要从相关关键字排除的字符串$
...한국어가 지원되지 않으므로 굳이 이 옵션을 사용할 이유가 없다. 그냥 태그만으로 구성해도 충분하다.
Note
예전에 Solr 검색엔진 관련해서 프로젝트를 수행할 때 한글 형태소 분석 엔진을 설정해서 사용한 적이 있다. 나중에 시간이 좀 되면 형태소 엔진을 Hexo 에 연결해서 활용할 수 있는지 검토해 볼 필요가 있을
듯 하다.
Cache (Improve generation speed)
Hexo 에서 블로그 제너레이션을 할 때 성능 향상을 위해서 캐시 설정을 할 수 있다.
popularPosts:
cache:
path: hexo-popular-related-posts-cached.json캐시로 사용할 파일을 지정해 주면 된다.
Log
로그 정보 표시 여부를 설정할 수 있다.
popularPosts:
log: true # (Optional) true 가 되면 로그가 표시된다. 기본 값 = trueCustomize HTML
직접 설정해 보면 기본으로 지정되는 HTML 이 단순 링크기 때문에 목록 리스트에 대한 HTML 변경을 할 수 밖에는 없으며 popular_posts_json() 헬퍼와 htmlGenerator 레지스터를 사용해야 한다.
- 아티클 템플릿 파일
<%-
htmlGenerator(
popular_posts_json({ maxCount: 5 , ulClass: 'popular-posts' , PPMixingRate: 0.0 , isDate: true , isImage: true , isExcerpt: true})
)
%>- 테마에 처리를 위한 스크립트 파일을 구성해 줘야 한다.
// Examples of helper
hexo.extend.helper.register('htmlGenerator', function(args){
if(!args || !args.json || args.json.length == 0)return "";
var returnHTML = "";
function generateHTML(list){
var ret = "";
ret += " + args.class + "-item\">";
if(list.date && list.date != ""){
ret += ''-date">' + list.date + "";
}
if(list.img && list.img != ""){
ret += ''-img">' + '
'" />' + "";
}
ret += '";
if(list.excerpt && list.excerpt != ""){
ret += ''-excerpt">' + list.excerpt + "
";
}
ret += " ";
return ret;
}
for(var i=0; iif(returnHTML != "")returnHTML = " + args.class + "\">" + returnHTML + "
";
return returnHTML;
}); 위의 스크립트는 기본 제공되는 HTML 에 날짜, 이미지, 타이틀, 발췌 정보 등을 살짝 추가하는 정도기 떄문에 이 스크립트를 자신이 원하는 HTML 구성으로 모두 변경해 주면 된다.
Important
스크립트가 반영될 수 있도록 실행 중인 Hexo Server를 중지하고 Clean & Generate 를 해줘야 반영된다.
위의 샘플을 응용해서 관련 포스트는 포스트 본문의 위/아래에 배치하고, 인기 포스트는 사이드바의 가장 위에 위치하도록 적용하였다.
연관/인기 포스트 생성 샘플
Visitor Counter
pvMeasurementsStartDate 옵션을 추가로 설정하면 포스트에 페이지 뷰 카운트를 설정할 수 있다. 이 부분도 역시 Google Analytics 설정 를 사용한다. 따라서 아래와 같이 기존에 설정해 놓은 부분에 추가해 주면 된다.
- 페이지 뷰 측정 기준일자 설정 추가
- 페이지 뷰 렌더링을 위한 템플릿 파일
popularPosts:
# (optional) Popular posts options
googleAnalyticsAPI:
clientId: ******.apps.googleusercontent.com
serviceEmail: *****@developer.gserviceaccount.com
key: /hexo-project-root/path/to/google-services.pem
viewId: 12345678
dateRange: 30
expiresDate: 10
pvMeasurementsStartDate: 2017/04/01This post's Visitor Counts is <%- popular_posts_pv() %> views.위의 샘플을 응용해서 아래와 같이 포스트 타이틀과 작성일자 및 태그 정보 바로 아래에 위치하도록 조정했다.
포스트 페이지 뷰 카운터 샘플
Ranking Sheet
rangkingSheet 옵션을 추가로 설정하면 페이지 뷰의 랭킹 정보를 생성할 수 있다.이 부분도 역시 Google Analytics 설정 를 사용한다. 따라서 아래와 같이 기존에 설정해 놓은 부분에 추가해 주면 된다.
popularPosts:
# (optional) Popular posts options
googleAnalyticsAPI:
clientId: ******.apps.googleusercontent.com
serviceEmail: *****@developer.gserviceaccount.com
key: /hexo-project-root/path/to/google-services.pem
viewId: 12345678
dateRange: 30
expiresDate: 10
pvMeasurementsStartDate: 2017/04/01
rankingSheet: rankingSheet.txtTrouble Shootings
플러그인에 UTC 시간 처리에 문제가 있어서 교체 함. (2017.04.21)
플러그인 원본 소스에 UTC 시간 처리 문제 소스를 아래와 같이 변경해야 한다.
// 원본 코드
...
if(options.isDate && list.date != ""){
ret.date = moment(list.date._i).format(config.date_format || "YYYY-MM-DD");
...
// 수정 코드
if(options.isDate && list.date != ""){
ret.date = moment(list.date).format('YYYY-MM-DD');
...위의 원본에서는 moment에 ._i 값을 기준으로 처리했는데, 이 처리는 moment가 최초 생성되는 시점의 정보를 반영하는 문제가 있는 것으로 보인다. 결과적으로 모든 일자가 동일하게 호출
일자로 반환되는 문제가 생긴다.
따라서 시간을 제외한 일자 정보만 처리하는 경우는 수정된 코드를 사용해야 게시된 일자을 정확하게 표시할 수 있다.
Conclustion
정리해서 노출시킨 글들이 어떻게 읽혀지고, 누가 읽고 있었는지 등이 궁금해서 시작을 했지만, 상업적인 솔루션이나 회사 또는 물건을 광고하는 것이 아니기 때문에 솔직히 Google Analytics 의 모든 기능을 사용하는 것은 아니다.
단지, 글들에 대한 액세스등이 궁금해서 플러그인을 설정하기는 했지만, 아직도 필요성 대비 설정이 너무 많고 모르는 것이 넘치기 때문에 이렇게까지 설정해서 사용해야 하는지에 대한 의문점이 든다.
아마도 아직은 단순 무식해서 정말 그 효과를 몰라서 그럴지도… ㅠㅠ
References
- Github - hexo-related-popular-posts
- Hexo 다양한 플러그인
- Google Analytics 설정
댓글
댓글 쓰기