HEXOテーマ「icarus」導入のあれこれ


このブログは、 icarusというテーマを使っています。公式のwiki(※英文)やその他解説記事を参考に、導入にあたってやったことあれこれをまとめました

1. テーマを適応する

icarusのテーマをクローンします。

1
$ git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus

フォルダ名は「icarus」に変えてthemesフォルダに入った状態になっていればOK。
設定などはicarusフォルダ内のconfig.ymlで行います。

※古いテーマと混ざってレイアウト崩れが起きてしまったら

1
2
hexo clean
hexo generate

すると適応されます。

(参考) Hexoのテーマを変更する & プラグインを追加する

2. カテゴリページ、タグページを作る

themes/icarus/config.ymlの一番上にあるmenuにcategoriesとtagsを追加します。
これでヘッダーメニューにCategoriesとTagsの項目が現れます。

1
2
3
4
5
menu:
Home: .
Archives: archives
Categories: categories
Tags: tags

そのままだと普通の固定ページになるので、デモのようなページにしたい場合、
themes/icarus/source/categoriesにできているindex.mdを、themesと同じ階層にあるsourceフォルダ内のcategoriesフォルダ
themes/icarus/source/tagsにできているindex.mdを、themesと同じ階層にあるsourceフォルダ内のtagsフォルダにコピー(元のindex.mdと差し替え)します。

3. サイト内検索を有効にする

検索窓は最初からついているのですが設定しないと使えません。
まずはhexo-generator-json-contentをインストールします。

1
$ npm install -S hexo-generator-json-content

そのあと下記のようにinsight: trueとconfig.ymlを書き換えます。

1
2
search:
insight: true

(参考) Hexoのテーマicarusでサイト内検索を追加する

4. ウィジェットのアーカイブ表示変更

サイドバーのアーカイブは×月2018という表示になります。そのままだとちょっと不自然なので、2018/×となるように、icarus/layout/widget内のarchive.ejsにある <%- list_archives() %>部分を<%- list_archives({format: “YYYY/MM”}) %>と書き換えます

1
2
3
4
5
6
7
8
<% if (site.posts.length) { %>
<div class="widget-wrap">
<h3 class="widget-title"><%= __('widget.archives') %></h3>
<div class="widget">
<%- list_archives({format: "YYYY/MM"}) %>
</div>
</div>
<% } %>

(参考) Hexoのhelper使ってアーカイブリストを表示する

5. 目次を自動作成する

HEXOでは hexo-tocを使って自動で見出しを目次にすることができます。
まず下記でhexo-tocをインストール

1
$ npm install hexo-toc --save

目次を入れたい箇所に下記を追記すればOK。

1
<!-- toc -->

オプションとしてthemes/icarus/config.ymlに下記を追加します。

1
2
3
4
5
6
7
8
9
toc:
maxdepth: 3
class: toc
slugify: transliteration
decodeEntities: false
anchor:
position: after
symbol: '#'
style: header-anchor

すると上記の場合toc~というクラスがあたるので、icarus/source/css/partial内のarticle.styleに追記してスタイルを整えます。class以外のオプションについては参考のサイトが詳しいです。

(参考) HEXOで目次を自動で作成してくれるhexo-tocをインストール

6. その他

ロゴなど大体の設定方法は 公式wikiのこちらのページにあります。その他、chromeのデベロッパーツールで変えたい部分を確認しながら各パーツのstyleファイルをちまちまいじる感じでカスタマイズしてます(ちなみにこのテーマには fontawesomeのアイコンが入ってて便利です)。
プロフィール部分はせっかくスクロールに追従するカードなのでアーカイブとタグページへのリンクを追加しました。

共有 コメント