IT►Software

Hexoの基本的なプラグインとカスタマイズ

Hexoの設定とカスタマイズについて。一般的なブログを作成する場合に必要なプラグインについて紹介。

目次#

Hexoの設定#

公式サイト：Configuration | Hexo

画像ファイルの配置場所#

デフォルトではsourceディレクトリ直下か、source/imagesなどのディレクトリを作成してそこに配置する。

別の選択肢として、post_asset_folderという変数をtrueにすると記事ごとに画像ファイルなどの保存ディレクトリを自動的に作成する。

post_asset_folder: true

作成されるディレクトリ名はhexo new post XXXのように生地ファイルの名称と同じ。

関連：HexoのPostに画像を置く | SAUCER blog

とりあえず現状としてはsource/imagesというディレクトリを作成してそこに配置している。

目次に関する設定#

目次の挿入はhexo-tocというプラグインです。おそらく最初からインストールされているはず。

記事を作成する際に、目次を挿入したい位置に<!– toc –>と 書くとその部分に目次が挿入されます。

設定は_config.ymlに記載。

_config.yml
toc:
  maxdepth: 3
  class: toc
  slugify: uslug
  decodeEntities: false
  anchor:
    position: after
    symbol: '#'
    style: header-anchor

重要なのはslugifyという項目は見出しの文字列を変換する方法を指定するオプション。
URLエンコード（uslag）と音訳（transliteration）の二種類（デフォルトはuslaug）。

音訳を選ぶと例えば「見出し」が”midasi”の様に変換される。

詳細：GitHub - bubkoo/hexo-toc: 📖 Insert a markdown TOC before posts be rendered.

エラーとその対策#

上記のプラグインをインストールする際、下記のメッセージが表示されるケースがあります。

npm WARN deprecated [email protected]: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
+ [email protected]
added 67 packages from 72 contributors and audited 5845 packages in 17.872s
found 17 vulnerabilities (4 low, 13 moderate)
  run `npm audit fix` to fix them, or `npm audit` for details

メッセージにある様に、詳細を確認したい場合はnpm audit、自動修正を試みる場合はnpm audit fixです。

$ npm audit fix
added 10 packages from 17 contributors and updated 1 package in 8.537s
fixed 4 of 17 vulnerabilities in 5845 scanned packages
  13 vulnerabilities required manual review and could not be updated

実際に実行すると、脆弱性のうち、4つは自動修復下画の頃は手動で対処しろというメッセージが表示されます。
ローカルマシン上で使う限り、無視しても問題はないはず。

サイトマップ#

サイトマップのジェネレーターをインストール。

$ npm install hexo-generator-sitemap --save

詳細：hexojs/hexo-generator-sitemap: Sitemap generator for Hexo.

設定ファイルに下記を追加。

_config.yml
sitemap:
    path: sitemap.xml
    template: ./sitemap_template.xml

テンプレートとして./sitemap_template.xmlというファイルを用意する。pluginのページのsitemap.xmlをコピーする。

hexo-generator-sitemap/sitemap.xml at master · hexojs/hexo-generator-sitemap · GitHub

RSSフィード#

公式：GitHub - hexojs/hexo-generator-feed: Feed generator for Hexo.

RSSフィードのジェネレーターをインストールします。

$ npm install hexo-generator-feed

設定に問題がないか、http://localhost:4000/atom.xmlにアクセスして確認する。

参考：HexoのRSSフィードプラグインを使ってみる

OGP#

OGP用のヘルパーは用意されているので、テーマが対応していれば特に問題ない。

titleやdescriptionが適切に設定してある必要あり。

コンテンツディレクトリの_config.ymlもしくは各テーマの_configにSNSアカウントのIDをセットしておくと埋め込まれる。

_config.yml
theme_config:
    (省略)
    twitter: your_twitter_id
    google_plus: your_google_plus_id

参考：HexoでOpen Gragh Protocolの設定をする | エンジニアっぽいことを書くブログ

補助ツール#

hexo admin#

jaredly/hexo-admin: An Admin Interface for Hexo

ブラウザで記事を書くツール。ローカルマシン上で使用してもいいし、サーバー上にインストールしてもいい。

$ npm install --save hexo-admin

hexo sでサーバーを起動して、http://localhost:4000/adminにアクセスすると管理画面が表示される。

プログの記事一覧から編集したい記事を選んで、鉛筆のマークのアイコンをクリックすると編集画面が開く。編集すると記事は自動保存される。

編集画面の右上のボタンでPublish/Unpubulishを切り替えることも可能。

適切に設定していればデプロイもメニューからできるようです。

その他#

テーマの設定値の上書き#

コンテンツディレクトリ直下の_config.ymlに以下のようにtheme_configというキー名のあとに記載する。

theme_config:
    google_analytics: XX-XXXXXX

theme/テーマ名のディレクトリにある設定ファイルを直接編集してもいいが、git submoduleで追加している場合は避けたほうが良い((デプロイ手段の設定に依存))。

独自タグの作成#

HexoのMarkdownを拡張する | Hello New World

参考リンク#