【HEXO入門】3.hexoのカスタマイズをしてみた

最新記事

オンライン受験（試験監督：英語）がとても便利！！

【2026年最新】PMP更新を「6年分」まとめて実施！最短5日で60PDU無料獲得し、約6千円節約する手順。

PMI認定資格「PMP（Project Management Professional）」を受験し合格しました

【2026年最新】GCP認定資格「Professional Cloud Architect」を受験するための勉強方法

マルチクラウドにおける踏み台サーバについて

マルチクラウドにおけるVPNネットワーク相互接続について

ダディ伯爵がGCPで独自ドメインSSL対応ブログを無料で簡単に立ち上げた方法を分かりやすく解説します。
本記事では「hexoのカスタマイズ」について記載します。
↓コードの部分の表示がindigoだとうまく表示されたのにmateryだおかしくなってしまいました。
　現在、回避方法を確認中。。

GAE開発環境へのHEXOインストールについては「GCP独自ドメインSSLブログが無料で使える（3）HEXO環境構築」をご確認ください。

注意HEXOテーマ「indigo」での手順となっています。違うテーマを選択される際は、適宜、読み替えてください。

1.「/（スラッシュ）有」で統一する

ワンポイントGAE上で「/（スラッシュ）なし」で終わるディレクトリ（URL）は制御が難しいため「/（スラッシュ）有」で統一する必要があります。 「/（スラッシュ）なし」を「/（スラッシュ）あり」にリンク修正が必要な個所は以下の3ファイルです。

1-1.HEXOディレクトリ＼_config.yml

以下の★部分に「/（スラッシュ）」を追加します。

  source_dir: source
  public_dir: public
  tag_dir: tags/★ココ
  archive_dir: archives/★ココ
  category_dir: categories/★ココ

1-2.HEXOディレクトリ＼themes＼indigo＼_config.yml

ハンバーガーアイコンをクリックした際に出てくるメニューのリンク先をすべて「/（スラッシュ）有」にします。

menu:
  home:
    text: HOME
    url: /
  book:
    text: 記事一覧
    url: /archives/　★ココ
  th-list:
    text: カテゴリ一覧
    url: /categories/　★ココ
  tags:
    text: タグ一覧
    url: /tags/　★ココ

1-3.HEXOディレクトリ＼themes＼indigo＼_partial＼tags-bar.ejs

/tags/と/categories/のリンクの末尾が「/（スラッシュ）なし」となっている個所を修正します。
変更前：<a href="<%= url_for('/' + type) %>"
変更後：<a href="<%= url_for('/' + type) %>/"

    

        <%= __('tag.all') %>
        <%

2.「日本語表記」で統一する

ワンポイントHexoテーマ「indigo」開発者が中華系の方のようで「_config.yml」で「language: ja」とするだけでは「日本語表記」に変わらない箇所が数か所残ってしまうため個別対応が必要です。 変更が必要な個所は以下の通り。

2-1.HEXOディレクトリ＼themes＼indigo＼layout＼_partial＼post＼toc.ejs

★部分を日本語化します。

<% if(theme.toc){
    var topic = toc(post.content, {
            class: 'post-toc',
            list_number: theme.toc.list_number
        })
    if(topic) {
%>
    

        

            
目次
　★ココ
            <%- topic %>
        
    
<% }
} %>

2-2.HEXOディレクトリ＼themes＼indigo＼layout＼_partial＼paginator.ejs`

★部分を日本語化します。

<% if (page.total > 1){ %>

    

    <%- paginator({
        prev_text: '前へ',　★ココ
        next_text: '次へ'　★ココ
    }) %>
    

<% } %>

2-3.HEXOディレクトリ＼themes＼indigo＼layout＼_partial＼post＼nav.ejs

★部分を日本語化します。

<% if (post.prev || post.next){ %>

  <% if (post.prev){
    var prevTitle = post.prev.title || '[no title]';
    %>
    

      
        
前へ
　★ココ
        
<%=prevTitle %>
      
    
  <% } %>

  <% if (post.next){
      var nextTitle = post.next.title || '[no title]';
    %>
    

      
        
次へ
　★ココ
        
<%=nextTitle %>
      
    
  <% } %>

<% } %>

2-4.HEXOディレクトリ＼themes＼indigo＼layout＼archive.ejs

★部分を日本語化します。

        <% if(i > 0){%>