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

<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
---