如何在 pug 上實作 vue slot 的功能

slot 是 Vue 非常使用的功能，常常在做一些模組化的開發時都會去使用到，最近在使用 pug 開發一些靜態的頁面時，查看 pug 的官方文件，卻沒有相關的資訊 比較相近的應用就只有 block 與 extend 的語法

但是在使用上卻又一些落差，花了一點時間，尋找答案，發現是可以在 pug 上實作 slot 的

Mixin

mixin layout()
  - var slots = {};

  // general mixin slot
  mixin slot(name)
    - slots[name] = block

  block

  .layout
    if slots['header']
      .header
        - slots['header'](); 
    if slots['body']
      .body
        - slots['body']();
    if slots['footer']
      .body
        - slots['footer']();

使用方式

+layout()
  +slot('header')
    | header
  +slot('body')
    | body
  +slot('footer')
    | footer

參考連結

• Multiple blocks in jade mixins?