Eleventy環境構築
Eleventyとは
- 静的サイトジェネレーター
- SPAではなくHTMLを生成するタイプ
インストール
npm install @11ty/eleventy
# or
yarn add @11ty/eleventy
.eleventy.js設定
/**
* eleventy config file.
*/
const markdown = require("markdown-it")
const headinglevel = require("./plugin/heading-level-plugin")
// markdown-it config
const md = markdown({
html: true,
breaks: false,
linkify: false
})
.use(headinglevel)
.use(require("markdown-it-anchor").default)
.use(require("markdown-it-table-of-contents"), {'includeLevel': [2, 3]})
module.exports = (eleventyConfig) => {
eleventyConfig.setLibrary("md", md)
eleventyConfig.addLayoutAlias('default', 'layouts/default.njk')
eleventyConfig.addPassthroughCopy("site/**/*.gif")
eleventyConfig.addPassthroughCopy("site/**/*.png")
eleventyConfig.addPassthroughCopy("site/**/*.jpg")
eleventyConfig.addPassthroughCopy("site/**/*.svg")
eleventyConfig.addPassthroughCopy("site/**/*.pdf")
return {
dir: {
input: "site",
output: "dist",
}
}
}
markdownライブラリのカスタマイズ
- Markdownの
#で生成されるHxタグを一段階ずつレベルを下げたい（H1タグにはTitleを入れたいので）
-
markdown-itのレンダリングをカスタマイズするプラグインを作成すればよい
/**
* markdown-itのHnタグのレベルを一段階下げるプラグイン
*/
module.exports = (md) => {
// original rules
const originalHeadingOpen = md.renderer.rules.heading_open
const originaHeadingClose = md.renderer.rules.heading_close
// tag covert rules
const convertTable = {
'h1': 'h2',
'h2': 'h3',
'h3': 'h4',
'h4': 'h5',
'h5': 'h6',
'h6': 'h6',
}
// override rules
md.renderer.rules.heading_open = (tokens, idx, options, env, render) => {
tokens[idx].tag = convertTable[tokens[idx].tag]
return originalHeadingOpen != null ? originalHeadingOpen.apply(this, arguments) : render.renderToken(tokens, idx, options, env, render)
}
// override rules
md.renderer.rules.heading_close = (tokens, idx, options, env, render) => {
tokens[idx].tag = convertTable[tokens[idx].tag]
return originaHeadingClose != null ? originaHeadingClose.apply(this, arguments) : render.renderToken(tokens, idx, options, env, render)
}
}
const markdown = require("markdown-it")
const headinglevel = require("./plugin/heading-level-plugin")
// markdown-it config
const md = markdown({...})
.use(headinglevel)
デフォルトテンプレートを指定
-
site/_data/layout.jsに↓のように指定
module.exports = "default"
-
.eleventy.jsで指定したテンプレートのエイリアスか、テンプレートへのパスを指定する
参考資料