記事の内容から抜粋を作るにはプラグイン metalsmith-excerpts を使います。このプラグインはとてもシンプルな設計で、記事に最初に現れる <p> 〜 </p> タグを取り出してメタデータ excerpt として設定します。最初の段落で要約を書く執筆の流儀と相性の良いプラグインです。

インストール＆設定

例によって npm でインストールします。

$ npm install metalsmith-excerpts --save
...
└── metalsmith-excerpts@1.2.0 
...
$ 

index.js は 次のようになります。metalsmith-excerpts はオプションがないからと油断せず、実行順序に注意しましょう。このプラグインは metalsmith-collections と組み合わせて使うことがほとんどでしょう。その場合、metalsmith-excerpts は metalsmith-collections の前に実行する必要があります。また、metalsmith-markdown を使用している場合は、その後でなければなりません。

const excerpts = require('metalsmith-excerpts');

Metalsmith(__dirname)

  ...

  .use(markdown())

  ...

  .use(excerpts())

  ...

  .use(collections({
    posts: {

テンプレートでは、抜粋を表示したい部分に excerpt を指定します。HTML をエスケープしないように、{{{ 〜 }}} を使うのを忘れないようにしましょう。

...

{{#each collections.latest}}
  <article>
    <header>
      <h2><a href="{{ this.path }}">{{ this.title }}</a></h2>
    </header>
    <section>
      {{{ this.excerpt }}}
      <div class="detail"><a href="/{{ this.path }}">続きを読む</a></div>
    </section>
  </article>
{{/each}}

...

抜粋の位置を指定したい場合

metalsmith-excerpts がシンプルすぎて、どうも合わないという場合は、metalsmith-better-excerpts を検討しましょう。こちらは、以下のように、<!-- more --> までを抜粋と指定するという、割と良く見かける使い方ができます。

---
title: ○○○について
---
○○○ はあーで、こーで
ここまで抜粋
<!-- more -->
ここから下は全文表示のときに表示する。