Skip to main content

Echo Template Partials

Introduction​

When building web applications with Echo (a high-performance, minimalist Go web framework), you'll often find yourself repeating certain UI components across multiple pages. For instance, navigation bars, footers, and sidebars typically appear on most pages of your application. Instead of duplicating this HTML in every template, Echo allows you to use template partials - reusable template fragments that can be included in multiple template files.

Template partials help maintain the DRY (Don't Repeat Yourself) principle, making your codebase more maintainable and less prone to errors. When you need to update a component, you only need to modify it in one place rather than across multiple files.

Understanding Template Partials​

Template partials are essentially smaller template files that can be included within larger template files. In Echo (which commonly uses Go's standard html/template package), partials enable modular template architecture.

Basic Concepts​

  • Partials: Small, reusable template fragments
  • Inclusion: The process of embedding a partial within a template
  • Scoping: Understanding how data is passed to partials

Creating Your First Partial​

Let's start by creating a simple example. We'll create a header partial that will be reused across multiple pages.

Directory Structure​

First, let's set up a recommended directory structure:

views/
  ├── layouts/
  │   └── main.html
  ├── partials/
  │   ├── header.html
  │   └── footer.html
  └── pages/
      ├── home.html
      └── about.html

Creating a Header Partial​

Create a file called header.html in the partials directory:

html
{{define "header"}}
<header>
  <nav>
    <div class="logo">My Awesome Website</div>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>
{{end}}

Similarly, create a footer.html file:

html
{{define "footer"}}
<footer>
  <p>&copy; {{.Year}} My Awesome Website. All rights reserved.</p>
  <div class="social-links">
    <a href="#">Twitter</a>
    <a href="#">GitHub</a>
    <a href="#">LinkedIn</a>
  </div>
</footer>
{{end}}

Including Partials in Templates​

Now, let's create a main layout template that includes these partials:

html
{{define "main"}}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{.Title}} - My Awesome Website</title>
  <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
  {{template "header" .}}
  
  <main>
    {{template "content" .}}
  </main>
  
  {{template "footer" .}}

  <script src="/static/js/main.js"></script>
</body>
</html>
{{end}}

And then create a page template (e.g., home.html):

html
{{define "content"}}
<div class="container">
  <h1>Welcome to My Awesome Website</h1>
  <p>This is the homepage content.</p>
</div>
{{end}}

Configuring Echo to Use Templates with Partials​

To use templates with partials in Echo, you need to configure the template renderer. Here's an example of how to do it:

go
package main

import (
	"html/template"
	"io"
	"time"

	"github.com/labstack/echo/v4"
)

// Template renderer
type Template struct {
    templates *template.Template
}

// Implement the echo.Renderer interface
func (t *Template) Render(w io.Writer, name string, data interface{}, c echo.Context) error {
    return t.templates.ExecuteTemplate(w, name, data)
}

func main() {
    e := echo.New()
    
    // Initialize template renderer
    renderer := &Template{
        templates: template.Must(template.ParseGlob("views/**/*.html")),
    }
    e.Renderer = renderer
    
    // Define routes
    e.GET("/", func(c echo.Context) error {
        data := map[string]interface{}{
            "Title": "Home",
            "Year":  time.Now().Year(),
        }
        return c.Render(200, "main", data)
    })
    
    e.GET("/about", func(c echo.Context) error {
        data := map[string]interface{}{
            "Title": "About Us",
            "Year":  time.Now().Year(),
        }
        return c.Render(200, "main", data)
    })
    
    // Serve static files
    e.Static("/static", "static")
    
    e.Logger.Fatal(e.Start(":8080"))
}

Passing Data to Partials​

You may need to pass specific data to your partials. By default, partials inherit the data context from their parent template. However, you can also pass specific data to a partial:

html
{{template "header" .HeaderData}}

Where .HeaderData is a field in your main data structure. Alternatively, you could pass the entire data context:

html
{{template "header" .}}

Advanced Partial Techniques​

Nested Partials​

You can include partials within other partials:

html
{{define "sidebar"}}
<aside>
  <h2>Quick Links</h2>
  {{template "quicklinks" .}}
  <h2>Recent Posts</h2>
  {{template "recentposts" .}}
</aside>
{{end}}

Conditional Partials​

You can conditionally include partials:

html
{{if .User.IsAdmin}}
  {{template "adminPanel" .}}
{{end}}

Dynamic Partials​

You can dynamically select which partial to use:

html
{{template (printf "%sView" .ViewType) .}}

This would look for a template named based on the value of .ViewType - for instance, if .ViewType is "table", it would render "tableView".

Practical Example: A Blog with Partials​

Let's build a simple blog structure using partials:

Template Structure​

views/
  ├── layouts/
  │   └── main.html
  ├── partials/
  │   ├── header.html
  │   ├── footer.html
  │   ├── post-card.html
  │   └── sidebar.html
  └── pages/
      ├── home.html
      ├── post.html
      └── about.html

post-card.html Partial​

html
{{define "post-card"}}
<article class="post-card">
  <h2><a href="/post/{{.ID}}">{{.Title}}</a></h2>
  <div class="post-meta">
    <span class="date">{{.FormattedDate}}</span>
    <span class="author">By {{.Author}}</span>
  </div>
  <p class="excerpt">{{.Excerpt}}</p>
  <a href="/post/{{.ID}}" class="read-more">Read more</a>
</article>
{{end}}

home.html (Using the post-card partial)​

html
{{define "content"}}
<div class="container">
  <h1>Latest Blog Posts</h1>
  
  <div class="posts-container">
    {{range .Posts}}
      {{template "post-card" .}}
    {{end}}
  </div>
  
  <div class="pagination">
    {{if .HasPrevPage}}
      <a href="?page={{.PrevPage}}">Previous</a>
    {{end}}
    
    {{if .HasNextPage}}
      <a href="?page={{.NextPage}}">Next</a>
    {{end}}
  </div>
</div>

{{template "sidebar" .}}
{{end}}

Echo Handler for the Homepage​

go
e.GET("/", func(c echo.Context) error {
    page, _ := strconv.Atoi(c.QueryParam("page"))
    if page < 1 {
        page = 1
    }
    
    postsPerPage := 5
    offset := (page - 1) * postsPerPage
    
    // Fetch posts from the database (simplified example)
    posts, totalPosts := fetchPosts(offset, postsPerPage)
    
    totalPages := (totalPosts + postsPerPage - 1) / postsPerPage
    
    data := map[string]interface{}{
        "Title":       "Blog Homepage",
        "Posts":       posts,
        "CurrentPage": page,
        "HasPrevPage": page > 1,
        "PrevPage":    page - 1,
        "HasNextPage": page < totalPages,
        "NextPage":    page + 1,
        "Year":        time.Now().Year(),
    }
    
    return c.Render(http.StatusOK, "main", data)
})

Best Practices for Template Partials​

  1. Keep partials focused: Each partial should have a single responsibility.
  2. Name partials descriptively: Use names that clearly indicate what the partial does.
  3. Organize by function: Group related partials in subdirectories when your application grows.
  4. Consider performance: Be mindful that excessive use of partials can impact template compilation time.
  5. Cache template compilation: In production, compile templates once at startup.
  6. Test partials: Make sure your partials work with various data inputs.

Common Pitfalls and Troubleshooting​

Undefined Variable in Partial​

If you encounter "undefined variable" errors, make sure you're passing the correct data context to your partial.

html
<!-- Incorrect -->
{{template "userProfile" }}

<!-- Correct -->
{{template "userProfile" .User}}

Template Not Found​

If you get "template not found" errors, ensure that:

  1. The template file exists in the expected location
  2. The template name in the {{define "name"}} matches what you're trying to include
  3. All template files are being loaded correctly

Summary​

Echo template partials are a powerful feature that allows you to:

  • Create reusable UI components
  • Maintain a DRY (Don't Repeat Yourself) codebase
  • Organize your templates in a modular way
  • Create consistent layouts across your web application

By breaking your templates into logical partials, you create a more maintainable view layer that's easier to update and extend over time. Partials help separate concerns in your templates and make your codebase more organized.

Additional Resources​

Exercises​

  1. Create a complete blog layout using partials for header, footer, sidebar, and content area.
  2. Implement a dynamic navigation partial that highlights the current page.
  3. Create a reusable form partial that can be used for different types of forms.
  4. Build a comment section partial that can be included in various content pages.
  5. Implement breadcrumb navigation as a partial that adapts based on the current page hierarchy.

If you spot any mistakes on this website, please let me know at [email protected]. I’d greatly appreciate your feedback! :)