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
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 | <%- |
Since I don’t know the grammar of swig you can search it yourself or refer the code in Next Theme
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.
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/
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.
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:
1 | eyeCatchImage = "https://s1.ax1x.com/2020/04/25/J6iz9K.jpg" |
All done. Refresh your sever.