3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-11-09

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

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?