Templates — Layout & List Page

The base layout and the bookmarks page with add form and delete buttons.

templates/layout.html

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

templates/list.html

{{define "title"}}{{.Title}}{{end}}

{{define "content"}}
<h1>Bookmarks ({{.Count}})</h1>

<form class="add-form" method="POST" action="/bookmarks">
    <input type="text" name="title" placeholder="Title" required>
    <input type="url" name="url" placeholder="https://example.com" required>
    <button type="submit">Add</button>
</form>

<ul>
{{range .Bookmarks}}
    <li>
        <a href="{{.URL}}">{{.Title}}</a>
        <small>{{.CreatedAt | formatTime}}</small>
        <form class="delete-form" method="POST" action="/bookmarks/{{.ID}}/delete">
            <button type="submit" class="delete-btn" title="Delete">✕</button>
        </form>
    </li>
{{else}}
    <li>No bookmarks yet.</li>
{{end}}
</ul>
{{end}}

💻 Run locally

Copy the code above and run it on your machine

© 2026 ByteLearn.dev. Free courses for developers. · Privacy