Nuxtでgenerateした時にアスキーアートを埋め込みたい #JavaScript

やったこと

Nuxt.jsでレンダリング時とジェネレート時にdoctypeの下にHTMLを埋め込む。

Hooksを使う

nuxt.config.jsにhooksという機能があるのでそれを使った。

src/plugins/createAsciiArt.js

module.exports = (html) => { 
   const asciiArt = '''アスキーアートを書く'''
   // replaceでdoctype htmlの下に挿入する
   html = html.replace(
     /<!doctype html>/,
     `<!doctype html>\n<!--\n${asciiArt}-->`
   )

   return html
 }

nuxt.config.js

import createAsciiArt.js

export default {
  ...
  hooks: {
    'generate:page': (page) => {
        page.html = createAsciiArt(page.html)
    }
    'render:route': (url, page, { req, res }) => {
        page.html = createAsciiArt(page.html)
    } 
  }
}

これだけで簡単にアスキーアートをページに埋め込むことができます！
hooksの機能を使えば他にも色々と応用できそうですね！