Write code on your website

Write any part of a page as HTML with Halo’s code, turn a block into code to change what it draws, and give the website its own header, footer and styles.

Blocks cover most of a website. When you want something they don't draw, write it as code: HTML and CSS, with Halo’s code in double braces for the values and lists that come from your website and your data. It’s the same code Halo Data’s Code charts use, in the same editor.

Nothing in code ever runs. Halo draws it as HTML and CSS and leaves out scripts, onclick and other event attributes, javascript: links, frames and forms. The editor says when something you wrote will be left out.

Add a Code block

Choose Add a block, then Code. Write in the editor beside the page, and the preview changes as you type.

<section class="band">
  <div class="wrap">
    <h2 class="d h-xl">Events</h2>
    <ul>
      {{#each (entries "events" sort="startDate" limit=3) as |event|}}
        <li><a href="{{event.url}}">{{event.title}}</a>, {{formatDate event.startDate}}</li>
      {{else}}
        <li>No events yet.</li>
      {{/each}}
    </ul>
  </div>
</section>

• {{site.name}}, {{page.title}} and, on an entry’s page, {{entry.title}} and its fields read the website.

• {{#each}} repeats for every item, {{#if}} draws something only sometimes, and helpers such as formatNumber, sort and where do the rest. Helpers and values under the editor lists them all, and a click puts one in.

• {{value "visitors" "total" format="compact"}} reads one of the website’s data sources, as figures do.

• Pictures in the block’s settings come from your library: name one, then show it with {{image media.name}}. Code shows pictures from your library only.

Turn a block into code

Choose a block and Edit as code (the </> button). It becomes a Code block that draws exactly what the block drew, with its pictures, its figures from Halo Data and its lists from collections still live. Change anything from there. Undo brings the block back. Forms, search boxes, maps and reports stay as they are, since they need Halo to answer them.

Write a whole page as code

In a page’s settings, Write this page as code. The page becomes code that places each of its blocks with {{block "id"}}, so it looks just as it did, and then it’s yours: put blocks side by side, wrap them, write HTML between them. Forms and reports placed this way still work. A collection’s Page layout has the same for every entry’s page, where {{entry}} reads the entry.

Your own header, footer and styles

Code in the sidebar holds what the whole website shares:

• Header and Footer replace Halo’s navigation and footer. {{navigation}} and {{footer}} put Halo’s back where you want them.

• Styles is CSS for every page. Use the tones’ colors as var(--fg), var(--bg) and var(--accent).

• Partials are pieces of code any code on the website includes with {{> name}}, so a card is written once.

Save, then publish. If code can’t be drawn when you publish, the checks say where, and readers get Halo’s own header, footer or blocks rather than a broken page.