@phtml/11ty
v2.1.0
Published
Use pHTML with 11ty
Downloads
20
Maintainers
jonathantnealReadme
pHTML Eleventy
pHTML Eleventy lets you use pHTML to process HTML files in Eleventy.
Installation
Available on npm.
npm install @phtml/11ty --save-devOpen up your Eleventy config file (probably .eleventy.js) and use addPlugin:
const phtml11ty = require('@phtml/11ty');
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(phtml11ty);
};Options
Optionally pass in an options object as the second argument to addPlugin to
further customize this plugin pack.
const phtml11ty = require('@phtml/11ty');
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(phtml11ty, {
// {Array|Object|Plugin} plugin or plugins to be used by pthml
use,
// {Boolean} whether relative paths should reference the source or output path
useInputPath
});
};Example
const phtml11ty = require('@phtml/11ty');
const phtmlDoctype = require('@phtml/doctype');
const phtmlSelfClosing = require('@phtml/doctype');
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(phtml11ty, {
// prepend <!doctype html> when a html, head, or body tag is present
use: phtmlDoctype({ safe: true })
});
};Example with Multiple Plugins
The following example uses the Doctype, Self-Closing, and Template,
const phtml11ty = require('@phtml/11ty');
const phtmlDoctype = require('@phtml/doctype');
const phtmlSelfClosing = require('@phtml/self-closing');
const phtmlTemplate = require('@phtml/template');
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(phtml11ty, {
use: [
// prepend <!doctype html> when a html, head, or body tag is present
phtmlDoctype({ safe: true }),
// unwrap <self-closing /> tags
phtmlSelfClosing(),
// pre-compiled templates using <is:template name="tmpl" /> & <as:template name="tmpl" />
phtmlTemplate()
]
});
};Example with Transform Function
The use option accepts an object with a transformFunction function for
accessing template configuration during plugin initialization.
const phtml11ty = require('@phtml/11ty');
const phtmlJsx = require('@phtml/jsx');
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(phtml11ty, {
use: {
transformFunction (template) {
// support JSX in HTML
return phtmlJsx({ data: template.dataCache });
}
});
};