t11hi

hene

pug の mixin とか

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>

VuePress から Next.js に移行したため、pug の mixin とか | hene VuePress Blog で確認してください。

content2.pug を呼んだ場合

<!-- Sample2.vue -->

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

VuePress から Next.js に移行したため、pug の mixin とか | hene VuePress Blog で確認してください。

参考