# pug の mixin とか

pug を使った開発の際に、 include 先に変数(短いテキストなど)を渡していた。

いろいろ変更していると、htmldiv で囲んだものなど)も渡したくなったので試してみた。

# Layout ファイル

# block

  • block content のように block を宣言できる
    • 下記のように宣言することによって、継承した先で、content の中身を自由に変更できる
  • p footer content のようにブロックの中に書いた部分は初期値となる
    • ブロックの中身は、継承した先で変更できる
//- _layout.pug

html
  head
    title Sample

  body
    block content
    block footer
      p footer content

# Layout ファイルを継承したファイル

# extend

  • 継承
  • extend _layout.pug のように書くと、ファイルを継承できる
    • _layout.pugcontent のようなブロック名を宣言しておくと、extend したファイルで、block の中身をいじれる

# include

  • 共通の部分を作れる
    • 作ったファイルを読み込んで、好きな場所で表示することができる
  • 複数ページで同じ内容を表示する場合に便利 

# mixin

  • 今回のような複数ページで同じような内容を表示する場合に便利
  • +mixin名 で呼べる
  • mixin テスト('ほげほげ') みたいに宣言すれば、ほげほげ のような値も渡せる

# 例 1

//- content1.pug

extend _layout.pug

mixin contentTxt
  h2 タイトルタイトル
  p テキストテキスト

block content
  include includes/_content.pug

# 例 2

//- content2.pug

extend _layout.pug

mixin contentTxt
  h3 たいとるたいとるたいとる
  p てきすとてきすとてきすと

block content
  include includes/_content.pug

block footer
  p ふったー

# include されるファイル

  • include されるファイルは、 includes ディレクトリに入れておくのが一般的
  • mixin contentTxt は、+contentTxt で呼べる
  • 下記のように、include した先でも呼べる
//- includes/_content.pug

div
  +contentTxt

# 結果

# content1.pug を呼んだ場合

<!-- Sample1.vue -->

<template lang="pug">
  div
    p ----- ここから -----
    include content1.pug
    p ----- ここまで -----
</template>

----- ここから -----

Sample

タイトルタイトル

テキストテキスト

footer content

----- ここまで -----

# content2.pug を呼んだ場合

<!-- Sample2.vue -->

<template lang="pug">
  div
    p ----- ここから -----
    include content2.pug
    p ----- ここまで -----
</template>

----- ここから -----

Sample

たいとるたいとるたいとる

てきすとてきすとてきすと

ふったー

----- ここまで -----

# 参考