Templates | Goffee
Description: The html/template package in Go offers a powerful

Skip to main content

# Templates

The html/template package in Go offers a powerful and secure way to dynamically generate HTML content in web applications. One of its key advantages is the built-in protection against Cross-Site Scripting (XSS) attacks. By default, the package automatically escapes potentially dangerous content, ensuring that user inputs are safely handled and output without the risk of injecting malicious code into web pages.

With separation of logic and presentation of html/template, can maintain cleaner and more modular codebases, where the business logic in Go code remains separate from the HTML structure and design.

## Component based templates​

Goffee implements an easy-to-extend componentized templating system approach in Go using the html/template package. The core defining small components like Button or Dropdown, with components you can nest them to create complete pages. In one application, you can abstracting component logic using responses, reducing redundancy across different pages. The organization of templates and Go code maintain modularity.

In the following graphic we see two example pages `LoginPage` and `HomePage`:

We can see that the two pages share most of the components with some variations. Components like `Navbar` should be able to abstract away its child components.

### Implementation using html/template​

This example define a low-level component, `Button`:

    // components/button.html
    {{define "button"}}
        <button class="button-container">
            <a
                class="button {{if .IsPrimary}}primary{{end}}"
                {{if eq .IsSubmit true}}
                    type="submit"
                {{else}}
                    href="{{.Link}}"
                {{end}}>
                {{.Text}}
            </a>
        </button>
    {{end}}

    // components/button.go
    package components

    type Button struct {
     Text      string
     Link      string
     IsSubmit  bool
     IsPrimary bool
    }

This example define the `Navbar`:

    // components/navbar.html
    {{define "navbar"}}
    <div class="navbar">
        <a class="logo" href="/">My App</a>

        <div class="actions">
            {{template "dropdown" .ProjectsDropdown}}
            {{template "button" .SettingsButton}}
        </div>

    </div>
    {{end}}

    // components/navbar.go
    package components

    type Navbar struct {
     ProjectsDropdown Dropdown
     SettingsButton   Button
    }

We’ve used `define` to define the components and `template` to compose smaller components within larger ones. For more information about how templates works check the oficial documentation html/template.

## Templates structure inside Goffee​

Goffee core includes an initial base of templates along with their basic structures, which can be used by any application. This initial base is organized into three groups:

- Form
- Content
- Page

The groups generally contain the template and structure pair. You can inspect the core code to see the details of the available components. These are inside the "template/components" folder in the core project.

    ├── core
    │   ├── template/
    │	│	├── components/ -------> contains the templates & structures

In the next chapter you will find the details of the templates and components included in the core component templates.

### Custom templates inside Goffee cup​

Templates can be defined inside the `storage/templates` folder of your application. Here you can define any templates and structures you need.

If you use the same filename as a `core` template filename in your application, it will take preference over the `core`. That allow you to change the template of core components in your custom application.