Hexoでtheme(テーマ)を自作する時に使えるコード集

ページング

Hexoで記事の一覧件数を制御するのに、hexo-generator-archiveやhexo-generator-categoryが用意されています。

初めてテーマカスタマイズする時はこのプラグインを使ってページングを表示するのかと思っていたのですが、標準でヘルパー関数が用意されていました。

下記のコードでページングが表示できます。

<%- paginator(options) %>

Hexoのヘルパー関数のpaginatorの項目にオプションの一覧があるので、合わせて御覧ください。

Canonicalタグ生成

hexo-auto-canonicalをインストールして、テーマのheadタグ内で下記を記述するとcanonicalタグを表示することができます。

<%- autoCanonical(config, page) %>

サイトマップ生成

hexo-generator-sitemapをインストールして、_config.yml内に下記の記述を追加します。

sitemap:
  path: sitemap.xml
  tag: false // タグ一覧を含めるか
  category: false // カテゴリー一覧を含めるか

これで/sitemap.xmlにアクセスするとサイトマップが生成されているので、Search Consoleなどに送信したりすることができます。

Feed生成

hexo-generator-feedをインストールして、_config.yml内に下記の記述を追加します。

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '

その後テーマ内の、headタグ内に下記を記述することでフィードを生成して、フィードのリンクを指定することができます。

<% if (config.feed){ %>
  <link rel="alternate" href="<%= url_for(config.feed.path) %>" title="<%= config.title %>" type="application/atom+xml">
<% } %>

カテゴリーのスラッグ設定

Hexoでは標準でWordPressにあるようなカテゴリーごとのスラッグを設定することができません。

そこで自分で設定ファイルを用意して、テーマから読み込むことでスラッグの他、カテゴリー固有のタイトルや説明文も表示することができます。

HexoでカテゴリーのスラッグでURLは英数字で日本語名を表示する方法」で、実装方法を書いたので読んでみてください。

カテゴリーに関連したタグの表示

指定したカテゴリーがついた記事のタグを取得することで、関連タグとして表示することができます。

標準では関連タグというものが存在しません。

下記の記事で紹介した方法を使ってタグを取得して、テーマ内の使いたいところに記述してみてください。

Hexoでカテゴリーに関連したタグの一覧を取得する方法

この記事を書いた人

コウジ

TypeScriptとVue.jsが好きなフリーランスのフロントエンドエンジニアです。
フロントのHTML・CSS・JavaScriptの設計実装をメインに、RubyとNodeでサーバーサイドやってたりもします。

Web開発の仕事依頼

フリーランスのエンジニアとしてWeb開発の仕事をお引き受けしています。

依頼の検討をしていただきます際はポートフォリオサイトの事業・実績ページをご覧いただき、お問い合わせよりメールや各種SNSよりご連絡ください。

仕事の相談をする
基礎から学ぶ Vue.js