このブログは、 icarusというテーマを使っています。公式のwiki(※英文)やその他解説記事を参考に、導入にあたってやったことあれこれをまとめました
1. テーマを適応する
icarusのテーマをクローンします。1
$ git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus
フォルダ名は「icarus」に変えてthemesフォルダに入った状態になっていればOK。
設定などはicarusフォルダ内のconfig.ymlで行います。
※古いテーマと混ざってレイアウト崩れが起きてしまったら1
2hexo clean
hexo generate
すると適応されます。
(参考) Hexoのテーマを変更する & プラグインを追加する
2. カテゴリページ、タグページを作る
themes/icarus/config.ymlの一番上にあるmenuにcategoriesとtagsを追加します。
これでヘッダーメニューにCategoriesとTagsの項目が現れます。1
2
3
4
5menu:
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
2search:
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
9toc:
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のアイコンが入ってて便利です)。
プロフィール部分はせっかくスクロールに追従するカードなのでアーカイブとタグページへのリンクを追加しました。