2025-11-26

【Hexo】サイドバーに関連記事一覧を実装する（テーマ：light）

概要

今回はブログのサイドバーに関連記事一覧を実装したので、やり方を残します。

Hexoでは便利なプラグインを使うことで簡単に実装可能です。
ただ自分の場合、他の方のやり方を真似しても想定通りに実装できなかったりしたので、そういった方の参考になると嬉しいです。

手順

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

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

コマンド

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

公式ページ
https://github.com/tea3/hexo-related-popular-posts

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

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

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

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

sidebar.ejs

自分の場合はサイドバーに表示したいのでsidebar.ejsに追記してます。

オプションの意味
- max：記事の最大表示件数
- isExcerpt：記事の概要を表示

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

参考ページ
https://photo-tea.com/p/hexo-related-popular-posts/

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

3.CSSを記載する

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

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

.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関連の記事を書いているので、良かったら見ていってください！
お疲れさまでした！

概要

目次

手順

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

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

3.CSSを記載する

確認

注意

締め