ダディ伯爵が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/ ★ココ
/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) {
%>
<% }
} %>
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]';
%>
<% } %>
<% if (post.next){
var nextTitle = post.next.title || '[no title]';
%>
<% } %>
<% } %>
2-4.HEXOディレクトリ\themes\indigo\layout\archive.ejs ★部分を日本語化します。
<% if(i > 0){%>
<% } %>
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 {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
+ 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設定 」へ戻りましょう。
カテゴリ:GCP独自ドメインSSLブログが無料で使える【GAE×Hexo】
合わせて読みたい