layouts() AFTER include()

build.js

// Build with layouts() AFTER include()
const fs        = require( 'fs' )
const path      = require( 'path' )

// Metalsmith stuff
const Metalsmith  = require( 'metalsmith' )
const markdown    = require( 'metalsmith-markdownit' )
const layouts     = require( 'metalsmith-layouts' )
const include     = require( 'metalsmith-include')
const inplace     = require( 'metalsmith-in-place' )
const pug         = require( 'metalsmith-pug' )

const config = {
  source: 'source',
  buildPath: '_build'
}

Metalsmith(__dirname)
  .source( config.source )
  .destination( config.buildPath )
  .clean(true)
  .use(markdown({
    html: true,
    xhtmlOut: true,
    typographer: true,
    linkify: true
  }))
  .use(include())
  .use(layouts({
    engine: 'pug',
    pretty: true,
    directory: 'templates',
    pattern: '**/*.html'
  }))
  .build(function (err) {
    if (err) {
      console.log(err)
    } 
    else {
      console.log('Metalsmith complete!\n')
    }
  })

/**
 * _build/hello-world.html

<!-- Begin: hello-world.pug  --><p>(File: <a href="http://head.md">head.md</a>) When viewing hello-world.html, you’ll see this sentence, but no rendered data from head.pug</p>
<p>(<a href="http://hello-world.md">hello-world.md</a>) This file should show the rendered HTML data from head.pug, but it only shows the content from <a href="http://head.md">head.md</a></p>

<p>(File: hello-world.pug) This page includes the content from head.md, but not the rendered data from head.pug</p>
<!-- End: hello-world.pug  -->
*/