Configs

aigisは動作の多くをコンフィグファイル（aigis_config.yml）で制御します。全てのパスはコンフィグファイル（aigis_config.yml）が置かれている場所から相対的に解決されます。

source: (required)

Type Default
String or Array undefined

スタイルガイドを生成するソースとなるファイル（またはディレクトリ）への相対的なパスを指定します。単一の指定と配列による複数指定のどちらも行えます。

Example

ソースとして特定のファイルとディレクトリを指定したい場合には次のように指定します。

source:
  - ./css/style.css
  - ./scss

source_type: (optional)

Type Default
String or Array ['.css', '.sass', '.scss', '.styl']

sourceにディレクトリが指定された場合、aigisはsource_typeに記述されている拡張子のファイルをソースの対象にします。デフォルトで.css .sass .scss .stylの4種類を対象とします。

Example

ソースとするファイルのタイプを減らしたい場合、次のように対象とするタイプだけを指定します。

source_type:
  - .css
  - .less
Markdownからスタイルガイドを生成する

CSSのコメントブロック（/* ~ */）と---で囲まれた設定の記述があれば、どんなファイルからでもスタイルガイドが生成できます。例えば、次のように.mdを指定すればMarkdownファイルからスタイルガイドを生成できます。

source_type: .md

dest: (optional)

Type Default
String './styleguide'

スタイルガイドを出力するフォルダを指定します。指定がない場合、aigis_config.ymlのあるフォルダにstyleguideフォルダを作成して出力されます。

Example

dest: ./path/to/destination

dependencies: (optional)

Type Default
String or Array undefined

スタイルガイドに必要なファイルやディレクトリを指定します。指定されたファイルやディレクトリはスタイルガイドの出力先にコピーされます。

Example

dependencies:
  - ./path/to/css
  - ./path/to/images
  - ./path/to/style.css

template_dir: (optional)

Type Default
String './template'

スタイルガイドの生成に必要なテンプレートファイルが格納されているディレクトリを指定します。このディレクトリにはindex.ejsとlayout.ejsの2つが含まれている必要があります。

template_engineにjadeを指定している場合にはindex.jade layout.jadeを、hbsを指定している場合にはindex.hbs layout.hbsが必要になります。

Example

template_dir: './path/to/template_dir

component_dir: (optional)

Type Default
String './html'

外部ファイルからHTMLをドキュメントコメント内に挿入したいときに使える!![](./path/to/file.html)という構文で、インポートするファイルのパスを解決するときに使われます。

template_engine: (optional)

Type Default
String 'ejs'

スタイルガイドを生成する際に利用するテンプレートエンジンを指定します。aigisでは次の3つのテンプレートエンジンが利用できます。

  • EJS（ejs）
  • Jade（jade）
  • Handlebars（hbs）

このディレクトリには、利用するテンプレートごとに決められた拡張子でindex.xxxというファイルが格納されている必要があります。

Example

Jadeを利用したい場合

template_engine: jade

log: (optional)

Type Default
Boolean false

logがtrueの場合、スタイルガイド生成の際に出力されるファイルの一覧などをコンソールに出力します。

color_palette: (optional)

Type Default
Boolean true

aigisは、スタイルガイドのソースとなるファイルから全ての色を収集し、一覧できるようにcolor.htmlという特別なページを出力します。

サンプル: color.html

カラーパレットが必要ない場合、falseを指定することでカラーパレットの出力を止めることができます。

preview_class: (optional)

Type Default
String 'aigis-preview'

aigisがコードブロック(```htmlなので始まるブロック)からHTMLのプレビューを生成する際に、プレビューの外側の要素につくCSSのクラス名を指定できます。コンポーネントがスタイルガイドの影響を受けないようにスタイルを付けたり、JavaScriptから操作したい場合などに役に立ちます。

プレビューの挿入

例えば、次のようなコードブロックを記述した場合

```html
<button>hoge</button>
```

次のようなHTMLが挿入されます。

<div class="aigis-preview">
  <button>hoge</button>
</div>

output_collection: (optional)

Type Default
String or Array ['category', 'tag']

出力するページのグループを指定します。categoryやtag以外にグルーピングして出力したい項目がある場合はoutput_collectionに追加します。

例えばバージョニングを行っている場合には、コンポーネントの設定に次のようにversionを追加し、output_collectionにversionを追加することでversionの値が同じコンポーネントがグルーピングされて出力されます。

---
name: btn
category:
  - base
  - btn
version: 1
---

output_collection:
  - category
  - version

上記の指定の場合、categoryとversionでまとめた2種類のページが出力されます。

transform: (optional)

Type Default
String or Array ['html', 'ejs', 'jade', 'hbs']

コードブロックに特定のタイプが指定されている場合、aigisはそのコードブロックを実際のHTMLとしてドキュメントに追加します。これによってマークアップの例を示すとともにプレビューの表示も手軽に行なえます。デフォルトではhtml jade ejs hbsのプレビューが有効になっています。

もしプレビューとして表示したくないタイプがある場合には、表示したいタイプだけをtransformに指定します。

transform:
  - html
  - hbs

テンプレートエンジンのコンパイル

ejs jade hbsのコードブロックは、コンポーネントの設定にcompile: trueを指定することで、コードブロックに設定の値を渡してコンパイルを行えます。

---
name: btn
category: btn
compile: true
data:
  value1: hoge
---
```ejs  
<h2><%- name %></h2>
<button><%- data.value1 %></button>
```

上記の場合、次のように値が反映された状態のHTMLが挿入されます。

<div class="aigis-preview">
  <h2>btn</h2>
  <button>hoge</button>
</div>

highlight: (optional)

Type Default
Boolean true

コードブロックのシンタックスハイライトを有効にするかを指定します。別のハイライトライブラリを使う場合ときなどはhighlight: falseとすることでaigisのハイライトをオフにできます。

timestamp_format: (optional)

Type Default
String 'YYYY/MM/DD HH:mm'

スタイルガイドを生成する際、aigisはtimestampという特別な変数をテンプレートに渡します。ドキュメントの更新日を記述したい際などに役にたつかもしれません。

timestamp_formatに指定する形式はMoment.jsのformatを参照してください。