pHTML Eleventy lets you use pHTML to process HTML files in Eleventy.
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);
};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
});
};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 })
});
};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()
]
});
};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 });
}
});
};