Hexoサイドバーに関連記事を表示｜hexo-related-popular-posts導入手順

概要

本記事では、Hexoブログのサイドバーに関連記事一覧を表示する方法について解説していきます。

というのもブログを始めたばかりだと、訪問者が1記事読んで離脱してしまうのが定番のあるあるですよね（- -;

回遊率を上げる手段として、関連記事ウィジェットの設置はかなり効果的です。

ここではhexo-related-popular-postsプラグインの導入からCSSデザイン、よくあるエラー対処までセットで紹介していきます！

これでサイドバーから関連記事に飛んでもらえるようになります。
それではやっていきましょう！

目次

実装手順

1.プラグインをインストール

簡単に関連記事一覧を実装するために必要なhexo-related-popular-postsをインストール

コマンド

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

github.com公式ページ

2.任意個所に下記の記載を追加する

関連記事を追加する場所に下記を追加する。

site\themes\light\layout\_partial\sidebar.ejs

1
<%- popular_posts({ max: 5,  isExcerpt: true }, page) %>

sidebar.ejs

自分の場合はサイドバーに表示したいのでsidebar.ejsに追記してます。
  • オプションの意味
    • max：記事の最大表示件数
    • isExcerpt：記事の概要を表示

他にもいろいろなオプションがあります。
ここでは紹介しませんが、下記のサイト様がわかりやすく説明してます。
良ければご確認ください。

photo-tea.com参考ページ

googleSearchConsoleから閲覧数が多い記事を取得して、 人気記事の一覧を自動生成することもできるらしい（- -b)

3.CSSを記載する

そのままだと味気ないので、いい感じにCSSを設定する

site\themes\light\source\css\_partial\sidebar.styl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
.related-posts
  padding: 10px

  h3 
    padding 5px 10px
    font-size 1em
    border-bottom 1px solid color-border
    font-weight normal

  .popular-posts
    list-style: none;
    padding: 0;
    margin-top: 10px;

    .popular-posts-item 
      margin-bottom: 15px;
      padding: 12px 15px;
      background: #f7f7f7;
      border-radius: 8px;
      transition: background 0.2s ease;
      border: 1px solid #e0e0e0;

      .popular-posts-title 
        h3
          margin: 0;
          font-size: 14px;
          border-left: none;
          padding-left: 0;

        a
          text-decoration: none;

        a:hover
          text-decoration: underline;

      .popular-posts-excerpt
        font-size: 12px;
        padding-top:10px
        h2
          display:none

sidebar.styl

自分の場合はサイドバーのstylファイルに実装したので、 通常のCSSとは少し違う構造となってます。

確認

hexoのサーバを起動すると、関連記事が5件表示されていると思います！

完成

各サイトによってレイアウトが違うと思うので、あくまで上記の画像はご参考程度にご確認ください

注意

サーバ起動時に–draftsオプションを付けると下記のようなエラーが出ることがあります。
hexo cleanを叩けば一時的に消えますが、何度も再起動をすると復活します。
テストした感じ影響はなさそうなので放置してますが、解決方法わかる方いましたらどこかにひっそり書いていただけるととても助かります（- -;

謎のエラー

1
2
[hexo-related-popular-posts] error:  Because the post's path has been changed, the link can not be created successfully. Please remove the cache with the following command.
$ hexo clean

締め

記事内では簡単そうに書いてますが、かなり苦労しました。
sidebarが表示されず色々な方の記事を確認したり、、、
スタイルが崩れてCSSを大幅に見直したり、、、

苦労はしましたが、結果的に実装できてよかったです！

サイドバーが少し華やかになるだけで結構サイトの見た目もよくなった気がします。
もう少しレイアウトを整えてもいいかなと思いますが、個人的には結構満足してますので、それはまた別の機会に（^^!

今回は以上となります。
他にもいろいろHexo関連の記事を書いているので、良かったら見ていってください！
お疲れさまでした！

エンジニアリング
ブログ, Hexo, エンジニアリング