HexoのテーマをNexTに変更した

投稿日

HexoのテーマをNexTに変更してみた。いろいろいじったところを忘れないようにメモしておく。

テーマをインストールする

1
git clone https://github.com/next-theme/hexo-theme-next themes/next

上記を叩いて最新版(投稿時点で8.0.0-rc.4)をコピーして、_config.ymlのtheme: Nlviをtheme: NexTに変更した。細かいところを除けば、これだけで動くようになり簡単で良かった。

メニューを整備する

1
hexo new page "tags"

まずはタグを表示するためのページが無かったので上記を叩いてページを作成した。できたフォルダ内のindex.mdにtype: "tags"を書き足して完了。

あとはNexTのほうの_config.ymlのmenu:周辺をいじって

を表示するようにした。

検索できるようにする

公式ページのサーチの設定仕方を見つつLocal Searchをインストールした。これまたあっさり動くようなって大変便利になった。

アイコン類を揃える

アバター用アイコンが必要になったのでサクッと作って配置した。ついでにFavicon用の画像も必要だったので適当に作って配置した。

SNSへのリンクを表示する

NexTのほうの_config.ymlのsocial:からTwitterとInstagramをアクティブにした。メールアドレスは迷ったけど別に要らないかなと。

さくらインターネットのWebフォントを有効にする

まずは_layout.njkの</head>の直前に

1
<script defer src="//webfonts.sakura.ne.jp/js/sakurav3.js"></script>

を追加した。

次にbase.stylのFont families.の辺りを

1
2
3
4
5
6
// Font families.
$font-family-chinese      = "PingFang SC", "Microsoft YaHei";
$font-family-japanese     = "Hiragino Maru Gothic W4 JIS2004", "BIZ UDPGothic";

$font-family-base         = $font-family-japanese, sans-serif;
$font-family-base         = get_font_family('global'), $font-family-japanese, sans-serif if get_font_family('global');

のように変更した。$font-family-japaneseの追加をした感じ。

最後にmain.stylの最後に

1
2
3
body {
  font-feature-settings: "palt" 1;
}

を追加して完了、のはず。

見た目を調整する

1
2
3
4
5
6
.posts-expand .post-meta {
  color: $grey-dark;
  font-family: $font-family-posts;
  font-size: $font-size-smallest;
  margin: 3px 0 20px 0;
  text-align: center;

post-header.stylに含まれる.post-metaのmarginのbottomを60pxから20pxに調整した。投稿日と投稿文の間が狭くなり小さい画面でも情報量が多くなったはずだ。

できなくなったこと

分かっている限りで1つだけあって、数式の表示が今のところできていない。設定すればできる感じなのでまた後日。

まとめ

他にも細々といじった気がするけど覚えてないので以上で。更に細かくいじりたいところは少しあるけど、とりあえずこれでアップロードしよう。おかしいところとかを見つけたらコンタクトなどからこっそり教えてください。

それでは。