fractal のテンプレートをpugにする

fractalの導入は下記記事にまとめました。
Fractal デザインスタイルガイド 導入

fractalのコンポーネントは基本Handlerbarsファイルなのですが、
pugファイルで利用したい場合の変更箇所をまとめました。

ファイル構成（hbs）

guide
 ├── src
 │    ├── components
 │    │    ├── header.hbs
 │    │    └── _preview.hbs
 │    │
 │    └── docs
 │         └── index.md
 │
 ├── fractal.js
 └── package.json

fractal-pug-adapterのインストール

fractal-pug-adapterというパッケージをインストールし、fractal.jsに下記2行を追加することでpugファイルを利用できるようになります。（参考）

$ npm i @rsm/fractal-pug-adapter
もしくは
$ yarn add @rsm/fractal-pug-adapter

/* Fractalのインスタンスの作成とエクスポート */
const fractal = module.exports = require('@frctl/fractal').create();

/* Pugテンプレートの利用 */
fractal.components.engine('@rsm/fractal-pug-adapter');
fractal.components.set('ext', '.pug');

hbsファイルをpugファイルに変更

hbsファイルをpugに変更。_preview.hbsを利用している場合は、{{{ yield }}} やpathの記述を下記のようにすることで表示できるようになります。

doctype html
html(lang="ja")
  head
    meta(charset="utf-8")
    meta(content="IE=edge", http-equiv="X-UA-Compatible")
    meta(name="viewport", content="width=device-width, initial-scale=1")
    link(media='all', rel='stylesheet', href=path('/css/○○.css'))

  body
    .preview
      != yield

ファイル構成（pug）

guide
 ├── src
 │    ├── components
 │    │    ├── header.pug
 │    │    └── _preview.pug
 │    │
 │    └── docs
 │         └── index.md
 │
 ├── fractal.js
 └── package.json

参考

@rsm/fractal-pug-adapter