/farm-plugin-html-template

This plugin is used to dynamically replace variables injected into HTML.

Primary LanguageJavaScriptApache License 2.0Apache-2.0

farm-plugin-html-template

NPM Version

This plugin is used to dynamically replace variables like ${var}$ injected into HTML.

Installation

npm install -D @jstors/farm-plugin-html-template 
# or
yarn add  -D @jstors/farm-plugin-html-template
#or 
pnpm install -D @jstors/farm-plugin-html-template

Usage

Configuration

Note that if you want to replace the variables correctly, you must define them correctly inside the configured data.

If there is no match in the data field for the variable you defined, then it won't be replaced.

import farmPluginHtmlTemplate from '@jstors/arm-plugin-html-template';
import { defineConfig } from "@farmfe/core";

export default defineConfig({
  // plugin configuration
  plugins: [
    ["@jstors/farm-plugin-html-template",
     {
      template: path.resolve(__dirname, 'index.html'),
      data: {
        title: 'Hello World',
        description: 'This is a description',
        keywords: 'html, template, farm'
      }
    }]
  ],
});

HTML Template

  • pre-conversion
<!-- .... -->
<title>${title}$</title>
<meta name="description" content="${description}$">
<link rel="stylesheet" href="${css_link}$">
<!-- ... -->
  • converted
<!-- .... -->
<title>Hello World</title>
<meta name="description" content="${description}$">
<link rel="stylesheet" href="${css_link}$">
<!-- ... -->

Options

  • template: The path to the HTML file that will be used as a template.
  • data: An object containing the variables that will be injected into the HTML file.