Hexo Plusin Series -- hexo-related-popular-posts 설정하기

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