Skip to content

README.md

Latest commit

 

History

History
110 lines (94 loc) · 2.49 KB

README.md

File metadata and controls

110 lines (94 loc) · 2.49 KB

htmlfactory

Very simple tool to statically do templating with your html files.

Advantages

  • Statically compiling your templates into your pages, 0 runtime cost
  • You don't need to learn yet another new templating language, just the ones you already now, html and js:
    • use <fragment src="proxy.php?url=https%3A%2F%2Fgithub.com%2F.%2Ftemplate.html"></fragment> to insert a fragment
    • use <fragment src="proxy.php?url=https%3A%2F%2Fgithub.com%2F.%2Ftemplate.html" my_var="helo"></fragment> to send variables to fragments
    • use ${my_var} inside your fragments to use the variable. (ex. <title>${my_var}</title>)
    • use <any_tag content="fragment"> </any_tag> in your fragment to insert the content of <fragment> tag in your fragment
  • It's not a giant website generation tool with required file names and directory hierarchy, you just compile templates into your pages to avoid repetition

Limitations

  • You can't put fragments directly into the <html> tag, they need to be in <body> or <head>.
  • The output html file will be correct but not formatted, this is how the html.Render() function makes it. A prettier renderer may be added to this project in the future.

Usage

Usage: .\htmlfactory.exe <input_file_or_directory> [options]
Options:
  --help
        Show usage
  --out string
        Path to output directory (default ".")
  --watch
        keep watching for modified files and template them
  1. Write your html files, and where you want to insert a template, just use: <fragment src="proxy.php?url=https%3A%2F%2Fgithub.com%2F.%2Ftemplate.html"></fragment>. example:
<html>
    <body>
        <fragment src="./templates/part.html"></fragment>
    </body>
</html>
  1. Run the tool on your html file
.\htmlfactory.exe ./page.html
  1. This will produce your newly html file, page.compiled.html:
<html>
    <body>
        <p>hey</p>
    </body>
</html>

Features

Variables

In your main file you can have

<html>
    <body>
        <fragment src="./templates/part.html" abc="10"></fragment>
    </body>
</html>

Then in the fragment:

<h1> hello ${abc} </h1>

The result will be

<html>
    <body>
        <h1> hello 10 </h1>
    </body>
</html>

Block replacement

In your main file you can have

<html>
    <body>
        <fragment src="./templates/part.html">
          <p> Hello </p>
        </fragment>
    </body>
</html>

Then in the fragment:

<div content="fragment">
</div>

The result will be

<html>
    <body>
        <div>
          <p> Hello </p>
        </div>
    </body>
</html>