Updated:
テクニカルブログ

hexoのテーマを決定する

前回までのまとめ

前回、hexoアプリケーションのテーマを選んで良さそうなものを利用しようとしたらうまく動かなかったところで終わりました。

今回は各ディレクトリの_config.ymlについて調べていきたいと思います。

テーマごとの_config.ymlの違いについて

デフォルトのテーマであるlandscapeは、theme/landscapeにある_config.ymlでテーマに依存した設定を行っていました。アプリケーションとしてはそうあるべきだと思います。

見た目が気に入って利用しようとしたhexo-theme-aomoriはアプリケーション直下の_config.ymlに設定してくれと書いてありました。違いは一体なんでしょうか。

hexo config

configを出力するコマンドnpx hexo configを試してみましょう。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
$ npx hexo config
INFO  Validating config
{
  title: 'Hexo',
  subtitle: '',
  description: '',
  author: 'John Doe',
  language: 'en',
  timezone: '',
  url: 'http://example.com',
  root: '/',
  permalink: ':year/:month/:day/:title/',
  permalink_defaults: null,
  pretty_urls: { trailing_index: true, trailing_html: true },
  source_dir: 'source',
  public_dir: 'public',
  tag_dir: 'tags',
  archive_dir: 'archives',
  category_dir: 'categories',
  code_dir: 'downloads/code',
  i18n_dir: ':lang',
  skip_render: null,
  new_post_name: ':title.md',
  default_layout: 'post',
  titlecase: false,
  external_link: { enable: true, field: 'site', exclude: '' },
  filename_case: 0,
  render_drafts: false,
  post_asset_folder: false,
  relative_link: false,
  future: true,
  highlight: {
    enable: true,
    auto_detect: false,
    line_number: true,
    tab_replace: '',
    wrap: true,
    hljs: false
  },
  prismjs: {
    enable: false,
    preprocess: true,
    line_number: true,
    tab_replace: ''
  },
  default_category: 'uncategorized',
  category_map: null,
  tag_map: null,
  date_format: 'YYYY-MM-DD',
  time_format: 'HH:mm:ss',
  updated_option: 'mtime',
  per_page: 10,
  pagination_dir: 'page',
  theme: 'landscape',
  server: {
    port: 4000,
    log: false,
    ip: undefined,
    compress: false,
    header: true,
    cache: false
  },
  deploy: { type: '' },
  ignore: null,
  meta_generator: true,
  keywords: null,
  index_generator: { per_page: 10, order_by: '-date', path: '' },
  include: null,
  exclude: null,
  archive_generator: { per_page: 10, yearly: true, monthly: true, daily: false },
  category_generator: { per_page: 10 },
  tag_generator: { per_page: 10 },
  marked: {
    gfm: true,
    pedantic: false,
    breaks: true,
    smartLists: true,
    smartypants: true,
    modifyAnchors: 0,
    autolink: true,
    mangle: true,
    sanitizeUrl: false,
    headerIds: true,
    anchorAlias: false,
    lazyload: false,
    prependRoot: false,
    postAsset: false,
    external_link: { enable: false, exclude: [], nofollow: false }
  }
}

表示された内容は、アプリケーション直下の_config.ymlの内容ですね。

しかし、ドキュメントには以下のように説明がありました。

_config.yml

1
2
3
4
5
theme: "my-theme"
theme_config:
  bio: "My awesome bio"
  foo:
    bar: 'a'

themes/my-theme/_config.yml

1
2
3
4
bio: "Some generic bio"
logo: "a-cool-image.png"
  foo:
    baz: 'b'

Resulting in theme configuration:

1
2
3
4
5
6
7
8
{
  bio: "My awesome bio",
  logo: "a-cool-image.png",
  foo: {
    bar: "a",
    baz: "b"
  }
}

本来は各ディレクトリの設定内容が反映される、しかし、重複している場合はアプリケーショントップの_config.ymlを優先する、ということだと思います。

他のテーマは確かにそうなっていました。たまたま見た目が気に入ったテーマが他と動きが異なるだけのようです。

原因ははっきりわかりませんが、一旦ここで終わりにしたいと思います。自分でテーマを作るときにでもまた調査したいと思います。

利用するテーマを決定する

aomoriを諦めて、他のテーマを眺めていると、やはりTOPページがカードタイプのテーマがいいなと思いました。

するとなかなか良さそうなテーマが見つかりました。PHANTOMという名前です。

デモ https://www.codeblocq.com/assets/projects/hexo-theme-phantom/

github https://github.com/klugjo/hexo-theme-phantom

phantomのインストール

早速インストールします。READMEに書いてある通り実施します。

1
2
3
4
5
6
7
$ cd themes
$ git clone https://github.com/klugjo/hexo-theme-phantom.git
Cloning into 'hexo-theme-phantom'...
remote: Enumerating objects: 166, done.
remote: Total 166 (delta 0), reused 0 (delta 0), pack-reused 166
Receiving objects: 100% (166/166), 596.45 KiB | 753.00 KiB/s, done.
Resolving deltas: 100% (60/60), done.

次に必要なnpmパッケージをインストールします。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$ npm install --save hexo-renderer-scss
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported

> node-sass@4.14.1 install /Users/user/github/business-book-reviews/business_blog/node_modules/node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.14.1/darwin-x64-83_binding.node
Download complete  ⸩ ⠋ :
Binary saved to /Users/user/github/business-book-reviews/business_blog/node_modules/node-sass/vendor/darwin-x64-83/binding.node
Caching binary to /Users/user/.npm/node-sass/4.14.1/darwin-x64-83_binding.node

> node-sass@4.14.1 postinstall /Users/user/github/business-book-reviews/business_blog/node_modules/node-sass
> node scripts/build.js

Binary found at /Users/user/github/business-book-reviews/business_blog/node_modules/node-sass/vendor/darwin-x64-83/binding.node
Testing binary
Binary is fine
+ hexo-renderer-scss@1.2.0
added 353 packages from 201 contributors and audited 544 packages in 28.474s

18 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

動作確認

起動してみます

1
2
3
4
$ npx hexo server
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

ブラウザでlocalhost:4000にアクセスします。

hexoのテーマ phantom

なかなかいいのではないでしょうか。一旦このテーマで新しいアプリケーションを作っていきます。

まとめ

新しいアプリケーションのテーマを決めることができました。_config.ymlの謎が解けずに悔しいですが、またの機会にチャレンジしたいと思います。

次回は、同じサーバー上で2つのhexoアプリケーションを動作させるための設定を行っていきたいと思います。