https://github.com/jstors/farm-plugin-html-template

This plugin is used to dynamically replace variables injected into HTML.
https://github.com/jstors/farm-plugin-html-template

Last synced: 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/jstors/farm-plugin-html-template
• Owner: jstors
• License: apache-2.0
• Created: 2024-05-02T15:34:02.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-07-19T01:43:11.000Z (6 months ago)
• Last Synced: 2024-07-19T10:14:25.281Z (6 months ago)
• Language: JavaScript
• Size: 1.54 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-farm - `farm-plugin-html-template`
• awesome-farm - `farm-plugin-html-template`

README

        
# farm-plugin-html-template

![NPM Version](https://img.shields.io/npm/v/%40jstors%2Ffarm-plugin-html-template)

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

## Installation

```bash

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.

```javascript

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`

```html

${title}$

```

- `converted`

```html

Hello World

```

## 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.