Color scheme

JHP Templates

JamsEDU turns each .jhp file into static .html during the build. All <script> blocks without attributes are treated as JHP blocks and processed at compile time on the machine running the builder. They are never sent to the browser. If you need a script tag to reach the browser as actual front end JavaScript, add at least one attribute to it such as <script type="text/javascript"> and JHP will leave it alone.

JHP blocks are where you set page variables, pull in shared templates from your templateDir (see Configuration), use conditionals, buffer output, and emit values into your markup. The rest of the file is ordinary HTML with JHP directives mixed in where needed.

Shape of a typical page

A common pattern is an opening script block that sets constants and includes your head and header templates, followed by your visible page content, and then a closing script that includes the footer. Variables declared with const or let in any JHP block are available to templates and to later $echo calls on the same page.


        <script>
            const title = 'Home';
            const description = 'Welcome';
            $include('./templates/header.html');
        </script>

        <h1>Welcome</h1>
        <p>Page body.</p>

        <script>
            $include('./templates/footer.html');
        </script>
    

Paths inside $include('…') are resolved relative to the current .jhp file. A page under features/ would typically reach shared templates with $include('../templates/header.html'), while a page at the project root would use $include('./templates/header.html'). Keep this consistent so includes stay predictable when you move files around.

Partials and shared templates

Reusable fragments like your site header, footer, head wrapper, and navigation typically live under your template directory (templateDir in your configuration). These can be plain .html files or .jhp files if they need their own processing logic. The .jhp extension simply tells JamsEDU to process the file through JHP rather than treating it as a static asset. Each page includes the pieces it needs, so you edit shared markup in one place and every page that references it picks up the change on the next build.

Built in directives

JHP provides a set of $ functions that are available inside any JHP script block. Below are the most commonly used directives. For the full list of available directives and advanced usage, see the JS Hypertext Preprocessor (JHP) documentation.

$echo(content)
Outputs content directly into the compiled page at the point where it is called.
$include(path)
Inlines another file and processes it within the current context. Paths are relative to the file containing the call. Use it for layout wrappers and any shared fragment you want on multiple pages.
$define(key, value)
Defines a true constant. Displays an error if you attempt to redefine it in any context.
$if(condition) / $elseif(condition) / $else() / $end()
Conditional blocks that let you show or hide sections of markup based on variables or expressions. Every conditional chain must end with $end().

Example of feeding a value into markup:


        <script>
            const title = 'About us';
        </script>
        <title><script>$echo(title);</script></title>
    

Example of conditional blocks:


        <script>
            const status = 'draft';

            $if(status === 'published');
        </script>

        <p>This article was published and is available to all readers.</p>

        <script>
            $elseif(status === 'draft');
        </script>

        <p class="notice">This article is still a draft and may change before publishing.</p>

        <script>
            $else();
        </script>

        <p class="warning">This article has been archived and may contain outdated information.</p>

        <script>
            $end();
        </script>
    

Full JHP documentation

JHP is maintained as its own project separate from JamsEDU. If you want to dive deeper into its full syntax, advanced features, and processing internals, you can find everything in the JHP repository.