Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

pHTML Eleventy pHTML

NPM Version Build Status Support Chat

pHTML Eleventy lets you use pHTML to process HTML files in Eleventy.

Installation

Available on npm.

npm install @phtml/11ty --save-dev

Open 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 });
      }
  });
};

About

Use pHTML with 11ty

Resources

License

Releases

No releases published

Packages

No packages published