chlonolog

web, digital gadgets, and more.

Hexoで使用しているプラグイン一覧 (08/25更新)

※ 2018/08/25 更新しました。

自分のために、現在Hexoで使用しているプラグインを列挙してみました。
package.jsonはこんな感じです。

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.7.1"
  },
  "dependencies": {
    "encodeurl": "^1.0.2",
    "hexo": "^3.7.1",
    "hexo-generator-archive": "^0.1.5",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-feed": "^1.2.2",
    "hexo-generator-index": "^0.2.1",
    "hexo-generator-tag": "^0.2.0",
    "hexo-inject": "^1.0.0",
    "hexo-renderer-ejs": "^0.3.0",
    "hexo-renderer-marked": "^0.3.0",
    "hexo-server": "^0.2.0",
    "jsdom": "^11.12.0"
  },
  "devDependencies": {
    "hexo-autonofollow": "^1.0.1",
    "hexo-deployer-ftpsync": "^0.1.1",
    "hexo-generator-seo-friendly-sitemap": "0.0.21",
    "hexo-html-min-beautify": "0.0.1",
    "hexo-include-markdown": "^1.0.2",
    "hexo-prism-plus": "^1.0.0",
    "hexo-renderer-pandoc": "^0.2.2",
    "hexo-tag-amazon": "^1.0.1",
    "hexo-tag-link-preview": "^1.2.0",
    "hexo-tag-twitter": "^1.0.1"
  }
}

最初の頃は全部--savedependenciesにぶっこんでいたのですが、どれがデフォルトのプラグインでどれが追加したプラグインなのかが分からなくなってしまったため、一旦整理して現在は--save-devdevDependenciesへ追加するようにしています。


コア

hexo

大元。

hexo-server

hexo serverで動くやつ。

hexo-renderer-*

各拡張子ファイルのレンダリングに使っている?


機能追加関連

hexo-generator-archive

最初から入っているもの。
アーカイブ機能を実装するために使われています。
_config.ymlで1ページ中に出力するエントリの件数が設定できます。

archive_generator:
  per_page: 10
  yearly: true
  monthly: true
  daily: false
  order_by: -date

hexo-generator-category

最初から入っているもの。
カテゴリー機能を実装するために使われています。
_config.ymlで1ページ中に出力するエントリの件数が設定できます。

category_generator:
  per_page: 10

hexo-generator-tag

タグ機能を実装するために使われています。
_config.ymlで1ページ中に出力するエントリの件数が設定できます。

tag_generator:
  per_page: 10

hexo-generator-feed

RSSフィードを実装するために使われています。
_config.ymlでいろいろ設定できます。

feed:
  type: atom
  path: atom.xml
  limit: 10
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '

hexo-generator-index

indexページを出力してくれます。
_config.ymlで1ページ中に出力するエントリの件数が設定できます。

index_generator:
  path: ''
  per_page: 10
  order_by: -date

逆にindexページは自分で実装したい場合(トップページにエントリ一覧を出さず、独自のページを出力したい場合)は、テーマ側の_config.ymlに

exclude_generators:
  - index

と指定した上で_source/index.mdを作成してやれば、そちらが反映されるようになります。

hexo-generator-seo-friendly-sitemap

hexo-generator-sitemapではなく、こちらを採用しています。
_config.ymlで詳細が設定できます。

sitemap:
  path: sitemap.xml
  tag: false       # タグ一覧を出力する?
  category: false  # カテゴリ一覧を出力する?

ポスト・ページ・タグ・カテゴリといった複数xmlを出力してくれる点も有能ですが、個人的にはFront-matterに

---
title: ページタイトル
sitemap: false
---

とするとsitemap.xmlに出力されなくなるのが地味に便利だと思います。
Aboutのページや分割したページの2ページ目以降などは、これで弾いています。


Markdown関連

hexo-include-markdown

PHPのinclude()のような感じで、別途準備したMarkdownファイルの内容を指定した場所に差し込むことができます。
source/_template/配下にテンプレートとしたいファイルを作成し、文中に

< !-- md テンプレートにしたいファイル名.md -- >

と書けば読み込んでくれます。
ちょっとした文章を複数ページで使い回す場合に有用。
うちでは、複数エラーページに同じ文章を使用したくて導入しています。

指定したURLの情報を展開し、カード形式に出力してくれるプラグイン。

{% linkPreview https://github.com/minamo173/hexo-tag-link-preview _blank nofollow %}

といった形で記述すると、

と出力してくれます。すばらしく便利。

hexo-tag-twitter

Twitterカードを出力するプラグイン。

{% twitter https://twitter.com/chlono/status/1003122198100389888 %}

といった形で記述すると、

と出力してくれます。

hexo-tag-amazon

Amazonの商品情報を出力するプラグイン。

{% amzn 4041068053 %}

といった形で記述すると、

dele (角川文庫)
本多 孝好2018-05-25
Buy

と出力してくれます。

# hexo-tag-amazon
# https://github.com/monsier-oui/hexo-tag-amazon
# https://affiliate.amazon.co.jp/assoc_credentials/home
amazon_plugin:
  id: [Your Amazon associate ID]
  locale: JP
  accessKey: [Your Amazon Product Advertising API Access key ID]
  accessKeySecret: [Your Amazon Product Advertising API Secret access key]
  generateAlways: false # false -> Generate tag in "hexo generate"

AmazonアソシエイトIDとAmazon Product Advertising APIを必要とするので設置は少々面倒ですが、綺麗に表示してくれる利便性には代えられません。
generateAlways:trueにした状態でhexo serverすると、リロードするたびデータを取りにいきます。
頻繁に実行していると

AWS Access Key ID: XXXXXXXXXX. You are submitting requests too quickly. Please retry your requests at a slower rate.

と怒られてしまいますので、falseにしてgenerate時以外は実行しない方がよさそうです。

hexo-autonofollow

外部リンクに自動でrel="external nofollow"target="_blank"を付加してくれます。

nofollow:
  enable: true
  exclude:
    - exclude1.com
    - exclude2.com

設定で、特定のホストを除外することもできます。

hexo-renderer-pandoc

MarkdownやHTML、LaTeXといったテキストファイルからさまざまな種類の文書へと変換できるコマンドラインツールであるPandocを、Hexoのページ出力時に実行できるようになります。
これの何がうれしいのかというと、拡張Markdownが使えるようになるのです。
実際にできることは、ユーザーズガイドの日本語版を見ていただければ一目瞭然です。

拡張Markdownについては、「Pandocによる拡張Markdown」にあります。
例えばMarkdownでヘッダは

## 1st day - introduction 

と書きます。

Hexoはタイトルの内容から適当なIDをつけてくれるのですが、タイトルに一部の記号が使われていると、その記号を削ったものでIDを生成します。
上の例での場合、付加されるIDは「st-day—introduction」となります。まあそうだろうなと予想はつきますが、非常にもやっとするのも確か。

Pandocを使えば、上のタイトルを

## 1st day - introduction {#first-day-introduction}

と書けるため、直感的なIDをつけることが可能です。
しかも

## [1st day](/hoge/) - introduction

と、タイトル内にリンクを織り交ぜることも可能になります。
このふたつ以外にも、

  • 定義リスト(<dl><dt><dd>)が使えるようになる
  • 引用ブロックの指定に無精ができる(最初の行だけ>をつければよくなる)ようになる
  • テーブル内で改行ができるようになる
  • 脚注機能が使えるようになる

……と、かゆいところに手が届くようになります。

使用にはプラグインのインストールだけでなく、Pandoc本体もインストールしておく必要があります。私はhomebrewでインストールしました。

うちの設定はこんな感じ。リンクは基本的にベタで貼らないので、書いてはありますがコメントアウトしてあります。

pandoc:
  extensions:
    - +hard_line_breaks   # 段落内の全ての改行を、スペースでなく強制改行として解釈する。
#    - +autolink_bare_uris # リンクを<...>で囲まない場合でも、全ての絶対参照URIをリンクに変換する。
  extra:
    tab-stop: 2 # タブをスペースに変換するときの文字数

本当はフィルタを使用したいのですが、Pythonはほとんど触ったことのないへっぽこなので、うまいことスクリプトが動いてくれず頓挫しております……。
本文中の指定した単語を置換するには、一体どう書けばいいんでしょう。ググっても指定したタグの内容を書き換えたりする方法ばかりで、そのものずばりな記事が見つからないんですよね。

hexo-prism-plus

Hexoにデフォルトで採用されているコードハイライトであるhighlight.jsではなく、Prismを使ってくれるようになるプラグイン。
highlight.jsはなぜかよく分からない理由で反映してくれたりしてくれなかったりするので、こちらを導入しました。見た目が好みだし使い勝手もいいしで昔から好きなので、使えるようになって嬉しいです。

適用するためには、_config.ymlにデフォルトで設定されているhighlight:をオフにする必要があります。

highlight:
  enable: false # <- falseにしないとエラーが出ます
  line_number: false
  auto_detect: false
  tab_replace:

# hexo-prism-plus
# https://prismjs.com/
# https://www.npmjs.com/package/hexo-prism-plus
prism_plus:
  enable: true
  vendors:
    base_url: /
    prism:
      - js/prism.min.js
    prism_css:
      - css/prism.min.css

実はCDNから読み込む設定にすることもできます。(というか、配布元的にはそちらを推しているのかな?)

    base_url: https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/
    prism:
      - prism.min.js
      - plugins/line-numbers/prism-line-numbers.min.js
    prism_css:
      - themes/prism-twilight.min.css
      - plugins/line-numbers/prism-line-numbers.min.css

しかしCDNのprism.jsは最小限の言語(markup・css・clike・javascript)しか入っておらず、他の言語もハイライトしたい場合は

    prism:
      - prism.min.js
      - plugins/line-numbers/prism-line-numbers.min.js
      - components/prism-apacheconf.min.js
      - components/prism-bash.min.js
      - components/prism-coffeescript.min.js
      - components/prism-json.min.js
      - components/prism-less.min.js
      - components/prism-markdown.min.js
      - components/prism-perl.min.js
      - components/prism-php.min.js
      - components/prism-python.min.js
      - components/prism-ruby.min.js
      - components/prism-scss.min.js

とコンポーネントを列挙する必要があります。当然HTMLにもmetaタグがずらずらっと並ぶことになりますが、正直あまり美しくないですよね。
ということで、私は本家で全部入りのprism.jsとprism.cssをダウンロードし、ローカルに置いたファイルを読み込むことで対応しています。

{ % raw % }{ % endraw % }と相性が悪いのか、これを入れるとエラーが出るようになりました。すべての記事から該当タグを削除することでエラーは出なくなりましたし、まあトレードオフということで我慢するしかないかな……。

hexo-injectは、これが必要としているため入れています。メンテナンスされていないようですが、とりあえずは動いているのでよしとします。


その他

hexo-deployer-ftpsync

hexo deploy(hexo d)で、/public配下のファイルをFTPサーバ上の本番環境へデプロイできるようになるプラグイン。
差分アップデートにはTransmitが便利!」と以前のエントリで書きましたが、こちらのプラグインをきちんと設定すればFTPアプリを起動する手間が省けます。
ただし処理対象ファイルを確認した上で実行するか否かを選べる分、Transmitの方が安心感はあります。こちらはhexo dしたらぬるっと実行されてしまいますから。

_config.ymlの設定をしっかりしておかないと、サーバ上のファイルが一気に削除されるので注意。

deploy:
  type: ftpsync
  host: [host]
  user: [user_id]
  pass: [password]
  remote: /
  port: 21
  connections: 1
  verbose: true
  ignore:
    - robots.txt
    - /foo
    - /bar
    - .htaccess
    - .htpasswd*
    - .DS_Store

verbose:trueにすると、設定情報と対象ファイルの一覧がターミナルに出力されます。falseだと期待した対象ファイルが処理されたのかどうか分からないため、個人的にはtrueにしておくのがいいと思います。
ignore:の値は段下げだけではなく、リスト形式で書かないと反映されません。しくじって全部削除されました。とほほ。

なお、connections:を1以外にすると、うちの環境では以下のエラーが出ました。

Committing
-------------------------------------------------------------
events.js:165
      throw er; // Unhandled 'error' event
      ^

Error: read ECONNRESET
    at TCP.onread (net.js:602:25)
Emitted 'error' event at:
    at emitErrorNT (internal/streams/destroy.js:64:8)
    at process._tickCallback (internal/process/next_tick.js:114:19)

使用しているFTPサーバの設定の問題なのかな?
1にしたら正常に動作したので、理由がない限り1にしておく方が良さそうです。

hexo-html-min-beautify

いわゆるMinify(圧縮)とBeauty(整形)をひとつにまとめたプラグインです。
これひとつで、

  • HTMLの無駄な改行を削ってすっきりさせる
  • がたがたになっているインデントを綺麗にする
  • HTML内に書いたCSS・JSだけを圧縮する
  • なんなら全部圧縮したままにする

など、きめ細かな設定ができます。

私は圧縮云々というより、テンプレート内に条件分岐を書くとどうしてもできてしまう複数改行を、綺麗に詰める用途で使っています。
設定は以下の通りです。
Beautifyの設定はOnline javascript Beautifierで出力したJSONの内容をそのまま使っているので、コメントは書いていません。Minifyにもオンラインで設定を試せるツールはありますが、出力まではしてくれないので、自分でたっぷりコメントを入れてあります。

画面出力する前にプラグインの処理をが行われているため、「removeComments」をtrueにすると<!-- more -->も削られてしまいます。ご注意を。

html_min_beautify:
  enable: true
  exclude:
  beautify:
    # Online Settings http://jsbeautifier.org/
    # More Options
    # https://github.com/beautify-web/js-beautify/blob/master/README.md
    indent_size: 2
    indent_char: " " 
    max_preserve_newlines: -1
    preserve_newlines: false
    keep_array_indentation: false
    break_chained_methods: false
    indent_scripts: separate
    brace_style: collapse
    space_before_conditional: true
    unescape_strings: true
    jslint_happy: true
    end_with_newline: false
    wrap_line_length: 0
    indent_inner_html: false
    comma_first: false
    e4x: false
  minify:
# see hexo-html-minifier
    # Online Settings http://kangax.github.io/html-minifier/
    # More Options
    # https://github.com/kangax/html-minifier#options-quick-reference)
    caseSensitive: true
    collapseBooleanAttributes: true
    decodeEntities: true
    html5: true
#    includeAutoGeneratedTags: true
    keepClosingSlash: true
    minifyCSS: true             # CSSをMinifyする
    minifyJS: true              # JavaScriptをMinifyする
#    removeComments: true        # コメントを削除 ※消すとmoreが効かなくなるのでNG
    removeEmptyAttributes: true # 空の属性を削除 (例: id="")
    removeEmptyElements: false  # 空のタグを削除 (例: <p></p>)
#    removeOptionalTags: true   # HTML/HEAD/BODY/THEAD/TBODY/TFOOTの終了タグを削除
    removeRedundantAttributes: true
    removeScriptTypeAttributes: true
    removeStyleLinkTypeAttributes: true
#    trimCustomFragments: true
    useShortDoctype: true
    #------------------------------------------------------------
    # 以下、みっつセット
    #   conservativeCollapse / preserveLineBreaks は
    #   collapseWhitespace: true と組み合わせて使用する必要がある
    collapseWhitespace: true    # SCRIPT/STYLE/PRE/TEXTAREA以外のの改行を削除
    conservativeCollapse: true  # 複数のスペースをひとつに置換
    preserveLineBreaks: true    # タグの間に複数の改行が入っていたら1つに置換

使うのをやめたもの

hexo-generator-sitemap

hexo-generator-seo-friendly-sitemapを使うことにしたので外しました。

hexo-generator-robotstxt

_config.ymlに設定を列挙しておくと、robots.txtを出力してくれるプラグイン。
いいなーと思ったのですが、Noindex:が実装されていなかったので導入は見送りました。

hexo-image-sizes

自動で複数サイズの画像を作成してくれるプラグイン。

ローカルでサムネイルを作ることにしたので、必要なくなりました。

hexo-tag-bootstrap

Bootstrapで実装されているlabelやpill、badgeなどといったcssを独自タグとして使用できるプラグイン。

{% row %}
  {% col md-4 xl-4 %} col a {% endcol %} 
  {% col md-6 xl-4 %} col b {% endcol %} 
  {% col md-2 xl-4 %} col c {% endcol %} 
{% endrow %}
{%btn http://www.google.com "Lets visit Google" danger lg outline%}
{%pill test%}
{%pill success Successfull!!!%}

とかできるらしいです。
便利そうですが、文中にタグを使用すること自体がまれなので、現状はリストから外してあります。

hexo-toc

うちの環境でこちらを追加すると、「Hexoのサイドバーに目次を表示する」で使用しているtoc()のリンク先が#undefinedになってしまうため、外しています。
本当は併用したいんだけどなあ。

hexo-browsersync

BrowserSyncを実行するプラグイン。
導入しておくと、ローカル環境でhexo serverしながらファイルを更新するだけでブラウザ側も自動的にリロードしてくれます。
hexo serverで表示したページの後半が切れることがあり(長い記事だと確実に切れる)難儀していたのですが、こいつを外したらあっさり改善しました。お前か……!
ということで、便利に使っていましたが外しました。

NFD対策とかいうもの。
うちは基本的にすべてのファイル名を英数字オンリーで作成しており、スラッグも手動で設定してあるため、不具合動作に遭遇したことはありません。
しばらく外して運用しましたが特に問題は発生しなかったため、本格的に外すことにしました。


その他、運用の工夫

新規ページ作成にhexo newする必要はない

ぶっちゃけ_posts/_draftsフォルダ内にファイルを作るだけなので、普通にMSCODEのエクスプローラーで右クリックしてファイル作成しています。
Front-matterの内容は

---
title: 
date: 
id: 
categories:
  - 
tags:
  - 
description: 
sitemap: false
comments: false
show_meta: false
show_share: false
---

という内容をAlfredのスニペットに登録し、先頭行に展開しています。
同様にhexo publishも使わず、ファイルを手動で_postsへ移動させています。

概要にはひと手間かける

以下のような内容でページを作成した場合、

---
title: ページタイトル
---

本文本文本文本文本文本文本文本文本文本文本文
本文本文本文本文本文本文本文本文本文本文本文
本文本文本文本文本文本文本文本文本文本文本文
本文本文本文本文本文本文本文本文本文本文本文
本文本文本文本文本文本文本文本文本文本文本文
---

何もしなければ、METAタグのdescriptionはこうなります。

<meta name="description" content="本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文">

カオスです。

---
title: ページタイトル
description: 概要として、RSSフィードやMETAタグの"description"に出力したい文章を書いています。
---

本文本文本文本文本文本文本文本文本文本文本文
本文本文本文本文本文本文本文本文本文本文本文
本文本文本文本文本文本文本文本文本文本文本文
本文本文本文本文本文本文本文本文本文本文本文
本文本文本文本文本文本文本文本文本文本文本文
---

こんな風にdescription:を指定することで、

<meta name="description" content="概要として、RSSフィードやMETAタグの"description"に出力したい文章を書いています。">

とスッキリします。よきかな。

Front-matterに独自パラメータを設定して条件設定に使う

Front-matterのヘッダ部分に指定した値は、テンプレート内ではpost.XXXXXという形で取得できます。
オリジナルのパラメータも使えるので、ヘッダ部分で

---
title: ページタイトル
show_meta: false
show_share: false
---

とかしておいて、テンプレート内で

  <% if (post.show_meta != false) { %>
    (投稿時間やカテゴリ・タグなどの出力部分)
  <% } %>

<% if (post.show_share != false) { %>
    (シェアリンクの出力部分)
  <% } %>

とすれば、パラメータによって出力の有無を切り替えることができます。

コメント

© 2018 chlono