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