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

技術メモWEB
HEXO


このブログは、 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のアイコンが入ってて便利です）。
プロフィール部分はせっかくスクロールに追従するカードなのでアーカイブとタグページへのリンクを追加しました。

共有 コメント