ORIGIN

How to use hexo related popular posts plugin

2020-08-07

Blog Hexo Plugin Install 2 mins457 words

This article was written 1290 days ago. The content of the article may be out of date.

Install

The most convenient way is to use npm to install.

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

Or you can click here to download zip. https://github.com/tea3/hexo-related-popular-posts

Usage

First, add the following popular_posts( {} , post ) helper tag in template file for article.

If you are using PUG, you can use it this way:

1	div!= popular_posts( {} , post )

If you are using EJS, you can use it this way:

1
2
3

<%-
  popular_posts( {} , post )
%>

Since I don’t know the grammar of swig you can search it yourself or refer the code in Next Theme

Switch

option	description	default
maxCount	Maximum count of a list	`5`
ulClass	Class name of element	`'popular-posts'`
PPMixingRate	Mixing ratio of popular posts and related posts	`0.0`(=Related posts only)
isDate	visible the date	`false`
isImage	visible the image	`false`
isExcerpt	visible the excerpt	`false`
PPCategoryFilter	Option to fix category on Popular Posts	`undefined`
PPTagFilter	Option to fix tag on Popular Posts	`undefined`

To use these switches, you can type them in {}

1	popular_posts( {maxCount = 5, ulClass="popular-posts", dsDate = true} , post )

However, if you are using my hexo theme, you just need to set up the _config.yml in the theme directory.

Problem

When I’m using this plugin, I ran into an error say:

1	Unhandled rejection TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received null

Here are the solution. https://dyingdown.github.io/2020/08/07/The-path-argument-must-be-of-type-string-Hexo/

Custom

The reason why I need to custom the plugin code is that I want it to show pictures when my isImage tag is on. And I want it to looks beautiful and neat. So I need to set up a default picture for the article.

Preview of the style of related article

These pictures are default pictures.

So, to make the style more beautiful, flow these steps.

Find the folder hexo-related-popular-posts in node_modules
Open lib/collector.js
Go to line 54 and insert a line of code:
1
eyeCatchImage = "https://s1.ax1x.com/2020/04/25/J6iz9K.jpg"
The value after the = is the link of your image. You can change it to your own favorite picture. I upload my image to a imgchr so I got the url.

Annotate lines from 55 to 63. Like this:

eyeCatchImage = "https://s1.ax1x.com/2020/04/25/J6iz9K.jpg"
// let $ = cheerio.load(post.content)
// if( $("img") && $("img").length > 0){
//     $("img").each(function(i){
//       if( i == 0 ){
//         let imgsrc = $(this).attr("src")
//         eyeCatchImage = imgsrc
//       }
//     })
// }