hexoのカスタマイズをしてみた


ダディ伯爵が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) %>/"

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) {
%>
    
<% }
} %>

2-2.HEXOディレクトリ\themes\indigo\layout_partial\paginator.ejs

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

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

<% } %>

2-3.HEXOディレクトリ\themes\indigo\layout_partial\post\nav.ejs

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


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

<% } %>

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

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

        <% if(i > 0){%>
<% } %>

<%=dt.format('YYYY年MM月')%>

 ★ココ
<% } %>

2-5.HEXOディレクトリ_config.yml

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

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY年MM月DD日 ★ココ
time_format: HH時mm分ss秒 ★ココ

## 3.「_config.yml」のカスタマイズ

`HEXOディレクトリ\_config.yml`でダディ伯爵が編集した個所は以下の通り。
```yml: HEXOディレクトリ\_config.yml
(前略)

highlight:
  enable: true
  line_number: false ★ココ(行番号を表示しない)
  auto_detect: false
  tab_replace:

(中略)

 permalink: :title/ ★ココ(記事のパスを設定)

(中略)

 post_asset_folder: true ★ココ(記事毎に画像フォルダ作成)

(後略)

4.CSSのカスタマイズ

4-1.CSSのカスタマイズ

CSSのカスタマイズには主に以下の3点のファイルを修正します。

  • HEXOディレクトリ\themes\indigo\source\css\_partial\variable.less
    文字フォント、カラー等が定義されていますので、適宜、編集します。

  • HEXOディレクトリ\themes\indigo\source\css\_partial\layout.less
    menuの位置等が定義されていますので、適宜、編集します。

  • HEXOディレクトリ\themes\indigo\source\css\style.less
    H1~H6用のCSS等が定義されていますので、適宜、編集します。

ワンポイント既に作成済みのCSSを流用したい場合は「HEXOディレクトリ\themes\indigo\source\css\」に「custom.less」という任意のファイル名で作成して「style.less」から読み込ませるという方法も可能です。「style.less」の最終行に「@import "custom";」というように追加すれば「custom.less」を読み込んでくれます。

4-2.アイコン集(fontawesome)を利用する

などのようなアイコン(fontawesome)を使用する場合は「HEXOディレクトリ\themes\indigo\layout_partial\head.ejs」ファイルに以下の★の行を追加する

     ★ココ

5.その他

ダディ伯爵は、以下のファイルを編集し、メニュー、ヘッダー、フッターのレイアウト変更しました。

  • HEXOディレクトリ\themes\indigo\layout\_partial\menu.ejs
    ハンバーガーアイコンをクリックしたら出るメニュー

  • HEXOディレクトリ\themes\indigo\layout\_partial\header.ejs
    ヘッダアイコン等のカスタマイズ

  • HEXOディレクトリ\themes\indigo\layout\_partial\footer.ejs
    フッターのカスタマイズ

6.記事の文字数を表示する【 hexo-wordcountカスタマイズ 】

①「hexo-wordcount」をインストール
HEXOディレクトリにてnpm i --save hexo-wordcountコマンドを実行

daddy_trevia ~/hexo $ npm i --save hexo-wordcount
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.8 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.8: wanted &#123;&quot;os&quot;:&quot;darwin&quot;,&quot;arch&quot;:&quot;any&quot;&#125; (current: &#123;&quot;os&quot;:&quot;linux&quot;,&quot;arch&quot;:&quot;x64&quot;&#125;)

+ hexo-wordcount@6.0.1
added 1 package from 1 contributor and audited 6957 packages in 7.63s
found 3 vulnerabilities (2 low, 1 moderate)
  run `npm audit fix` to fix them, or `npm audit` for details

HEXOディレクトリ\node_modules\hexo-wordcount\index.jsファイルがCN、EN用のコードとなっているのでJA用に変更

HEXOディレクトリ\themes\indigo\layout\_partial\post.ejsファイルに★部分を追記

<div class="post-meta">
    <%- partial('post/date', {date_format: config.date_format}) %>
        <%- partial('post/category') %>
            <%- partial('plugins/page-visit') %>
                目安時間 約<%= min2read(post.content) %>分(<%= wordcount(post.content) %>語)★ココ
                </div>

なお、開発環境での動作確認、本番環境への適用手順は「hexoの使い方」と同じです。
hexo server」コマンドで開発環境での動作確認を行い、問題がなければ、「hexo generate」コマンドと「gcloud app deploy」コマンドで本番環境へ適用し動作確認しましょう。
コンテンツがある程度出来上がった方は、「GCP独自ドメインSSLブログが無料で使える(4)独自ドメインSSL設定」へ戻りましょう。


 Previous
hexoのテーマの選び方 hexoのテーマの選び方
ダディ伯爵がGCPで独自ドメインSSL対応ブログを無料で簡単に立ち上げた方法を分かりやすく解説します。本記事では「hexoのテーマの選び方」について記載します。 カテゴリ:HEXO入門合わせて読みたい hexoのテーマの選び方 hex
2019年05月14日
Next 
hexoの使い方 hexoの使い方
ダディ伯爵がGCPで独自ドメインSSL対応ブログを無料で簡単に立ち上げた方法を分かりやすく解説します。本記事では「hexoの使い方」について記載します。 カテゴリ:HEXO入門合わせて読みたい hexoのテーマの選び方 hexoの使い
2019年05月13日
  TOC