hexo-related-popular-posts プラグイン

https://github.com/tea3/hexo-related-popular-posts
hexo-related-popular-posts プラグインは関連記事や人気の記事一覧を生成するHexo のプラグインです。
freemind テーマで関連記事を表示してみました。
Google Analytics API で収集した情報で人気の記事も表示してみました。

環境

• WSL
• nodejs v13.9.0
• npm 6.13.7
• hexo 4.2.0
• hexo-theme-freemind

構築 - 関連記事

インストール

• hexo-related-popular-posts パッケージ

  $ npm install hexo-related-popular-posts --save

ga-analytics の修正

• コールバック関数関連のエラーを修正

  ./node_modules/ga-analytics/module.js

  //fs.writeFile(sessionFile, JSON.stringify(result));
  fs.writeFile(sessionFile, JSON.stringify(result), function(err) {});

• res がundefined だったらスキップ

  ./node_modules/ga-analytics/bin/ga-analytics

  //if(program.json) {
  if(res === undefined) {
  } else if(program.json) {
  	console.log(res);
  } else {

freemind テーマの設定

• 関連記事の一覧を表示

  ./themes/freemind/layout/_partial/article.ejs

  <!-- related posts -->
  <section id="related_posts">
  <h2 class="title"><%= __('related_posts') %></h2>
  <%- popular_posts( {} , item ) %>
  </section>

• 関連記事の日本語タイトルを設定

  ./themes/freemind/languages/ja_JP.yml

  related_posts: "関連記事"

• スタイルの設定

  ./themes/freemind/source/css/style.css

  .popular-posts {
    padding: 0 !important;
    list-style: none !important;
  }
  
  .popular-posts h3 {
    margin: 0 !important;
    color: #337ab7 !important;
    font-size: 1.0em !important;
    line-height: 1.5em;
    font-weight: normal;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  
  .popular-posts h3:before{
    content: "\f016";
    font-family: FontAwesome;
    padding-right:0.3em;
  }

Hexo の設定

• 「形態素解析」で関連記事を表示する場合

  ./_config.yml

  # Popular Posts
  popularPosts:
    morphologicalAnalysis: 

構築 - 人気の記事

hexo-related-popular-posts の修正

• エラーが出たので修正

  ./node_modules/hexo-related-popular-posts/lib/list-json.js

  if ( Number(inOptions.PPMixingRate) != 1.0 ) {
      // -------------------------------------------
      // Related posts (tag)
      // -------------------------------------------
      if (postData) {
          //if (postData.tags && postData.tags.length > 0) {
          if (postData.tags && postData.tags.length > 0 && postData.tags.each) {
              postData.tags.each((tag) => {

• エラーが出たので修正 (2022-04-14)

  ./node_modules/hexo-related-popular-posts/lib/list-json.js

  // filtering items category
  } else {
      for ( i = 0; i < config.popularPosts.tmp.gaData.length; i++) {
          //if (config.popularPosts.tmp.gaData[i].date != '') {
          if (config.popularPosts.tmp.gaData[i] != && 
              config.popularPosts.tmp.gaData[i].date != && 
              config.popularPosts.tmp.gaData[i].date != undefined && 
              config.popularPosts.tmp.gaData[i].date != '') {

• PV データを必ず取得

  ./node_modules/hexo-related-popular-posts/lib/googleAnalytics.js

  let getPVfromGA = (inHexo) => {
      return new Promise( (resolve, reject) => {
          let gaData
  
          // load google analytics data
          //if (inHexo.config.popularPosts.tmp.isGaUpdate) {
          if (1) {

freemind テーマの設定

• 人気の記事のウィジェットを追加

  ./themes/freemind/layout/_widget/popular_posts.ejs

  <% if (site.posts.length){ %>
  <div class="widget">
    <h4><%= __('popular_posts') %></h4>
    <%-
    popular_posts({maxCount: 10 , ulClass: 'popular-posts' , PPMixingRate: 1.0 , isExcerpt: false})
    %>
  </div>
  <% } %>

• 人気の記事の日本語タイトルを設定

  ./themes/freemind/languages/ja_JP.yml

  popular_posts: "人気の記事"

• 人気の記事のウィジェットを有効化

  ./themes/freemind/_config.yml

  widgets:
  - search
  #- recent_comments
  - recent_posts
  - popular_posts
  - links
  #- category
  #- tagcloud

Hexo の設定

• Google Analytics API の設定

  ./_config.yml

  popularPosts:
    morphologicalAnalysis: 
    googleAnalyticsAPI:
      clientId: ******.apps.googleusercontent.com
      serviceEmail: *****@developer.gserviceaccount.com
      key: /hexo-project-root/path/to/google-services.pem
      viewId: 12345678
      dateRange: 30
      expiresDate: 10  

実行

$ hexo clean
$ hexo g
$ hexo s

利用

記事にタグをつけます。

---
tags:
  - hexo
---