Salin dan Bagikan

Hugo Theming: Panduan Membuat dan Kustomisasi Tema

Theming adalah aspek penting dalam pengembangan website Hugo yang memungkinkan Anda create reusable designs dan maintain consistency across pages. Hugo menyediakan sistem theming yang flexible yang memungkinkan Anda mengorganisasi templates, assets, dan configurations dalam packages yang dapat di-reuse. Panduan ini akan membahas cara membuat, kustomisasi, dan manage themes di Hugo.

Hugo themes adalah collections dari templates, static files, dan configurations yang menentukan tampilan website. Dengan understanding yang baik tentang Hugo theming system, Anda dapat create beautiful designs yang flexible dan maintainable.

Arsitektur Tema Hugo

Struktur Direktori Tema

themes/
└── my-theme/
    ├── theme.toml              # Theme metadata
    ├── LICENSE
    ├── README.md
    ├── assets/                 # Theme assets
    │   ├── css/
    │   └── js/
    ├── layouts/               # Theme templates
    │   ├── _default/
    │   │   ├── baseof.html
    │   │   ├── list.html
    │   │   └── single.html
    │   ├── index.html
    │   ├── 404.html
    │   └── partials/
    │       ├── head.html
    │       ├── header.html
    │       └── footer.html
    ├── static/                # Static files
    │   ├── images/
    │   └── favicon.ico
    ├── i18n/                  # Internationalization
    │   ├── en.yaml
    │   └── id.yaml
    └── config/
        └── _default/          # Theme configurations
            ├── config.toml
            └── params.toml

Theme.toml

# themes/my-theme/theme.toml
name = "My Custom Theme"
license = "MIT"
licenselink = "https://github.com/username/hugo-theme/blob/master/LICENSE"
description = "A clean and modern Hugo theme for blogs and documentation"
homepage = "https://github.com/username/hugo-theme"
features = [
    "Responsive design",
    "Dark mode support",
    "Syntax highlighting",
    "Multi-language support",
    "Search functionality",
]
min_version = "0.110.0"

[author]
    name = "Your Name"
    homepage = "https://yourwebsite.com"

[original]
    author = "Original Author"
    homepage = "https://originalauthor.com"

Menggunakan Tema

Install Tema dari Repository

# Clone tema ke themes folder
git clone https://github.com/username/hugo-theme-name themes/hugo-theme-name

# Sebagai submodule
git submodule add https://github.com/username/hugo-theme-name themes/hugo-theme-name

Konfigurasi Tema

# hugo.toml
theme = ["hugo-theme-name"]

[params]
  theme_color = "#3498db"
  description = "My website description"

Override Tema

Hugo’s lookup order memungkinkan Anda override templates dari theme:

layouts/
├── _default/
│   ├── baseof.html          # Override theme
│   └── single.html          # Override theme
├── partials/
│   ├── header.html         # Override theme
│   └── footer.html         # Override theme
└── index.html              # Override theme

Membuat Tema Custom

Langkah 1: Setup Struktur Tema

mkdir -p themes/my-custom-theme/{assets/{css,js},layouts/{_default,partials},static/{images,fonts},i18n}

Langkah 2: Base Template

{{!-- themes/my-custom-theme/layouts/_default/baseof.html --}}
<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ .Title }} | {{ .Site.Title }}</title>
    {{ partial "head.html" . }}
</head>
<body class="{{ .Kind }}{{ if .IsHome }} home{{ end }}">
    {{ partial "header.html" . }}
    
    <main>
        {{ block "main" . }}{{ end }}
    </main>
    
    {{ partial "footer.html" . }}
</body>
</html>

Langkah 3: Single Post Template

{{!-- themes/my-custom-theme/layouts/_default/single.html --}}
{{ define "main" }}
<article class="post">
    <header class="post-header">
        <h1>{{ .Title }}</h1>
        <div class="meta">
            <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "2 January 2006" }}</time>
            {{ with .Params.categories }}
                <span class="categories">
                    {{ range . }}{{ . }}{{ end }}
                </span>
            {{ end }}
        </div>
    </header>
    
    {{ with .Params.image }}
        <div class="featured-image">
            <img src="{{ . }}" alt="{{ $.Title }}">
        </div>
    {{ end }}
    
    <div class="content">
        {{ .Content }}
    </div>
    
    <footer class="post-footer">
        {{ partial "author-box.html" . }}
        {{ partial "share-buttons.html" . }}
    </footer>
</article>
{{ end }}

Langkah 4: Homepage Template

{{!-- themes/my-custom-theme/layouts/index.html --}}
{{ define "main" }}
<section class="hero">
    <h1>{{ .Site.Title }}</h1>
    {{ with .Site.Params.description }}
        <p class="subtitle">{{ . }}</p>
    {{ end }}
</section>

<section class="latest-posts">
    <h2>Latest Posts</h2>
    <div class="posts-grid">
        {{ range first 6 (where .Site.RegularPages "Section" "posts") }}
            {{ partial "post-card.html" . }}
        {{ end }}
    </div>
</section>
{{ end }}

Theme Inheritance

Multiple Themes

Hugo mendukung multiple themes dengan fallback:

# hugo.toml
theme = ["my-custom-theme", "another-theme"]

Partial Override dengan Cascade

Child themes dapat override partials dari parent themes:

themes/
├── parent-theme/
│   └── layouts/partials/foo.html
└── child-theme/
    └── layouts/partials/foo.html  # This will be used

Theme Parameters

Konfigurasi Parameters

# themes/my-theme/config/_default/params.toml
[author]
  name = "Theme Author"
  email = "author@example.com"

[branding]
  logo = "/images/logo.png"
  title = "My Theme"

[colors]
  primary = "#3498db"
  secondary = "#2ecc71"
  accent = "#e74c3c"

[features]
  dark_mode = true
  search = true
  syntax_highlighting = true

[seo]
  twitter_handle = "@themeauthor"
  og_image = "/images/og-image.png"

Akses Parameters di Templates

{{ with .Site.Params.author }}
    <p>Written by {{ .name }}</p>
{{ end }}

{{ with .Site.Params.branding }}
    <img src="{{ .logo }}" alt="{{ $.Site.Title }}">
{{ end }}

Theme Assets

CSS Structure

/* themes/my-theme/assets/css/main.css */
:root {
    --primary-color: {{ .Site.Params.colors.primary | default "#3498db" }};
    --secondary-color: {{ .Site.Params.colors.secondary | default "#2ecc71" }};
    --text-color: #333;
    --bg-color: #fff;
}

body {
    color: var(--text-color);
    background: var(--bg-color);
    font-family: system-ui, sans-serif;
}

JavaScript Setup

// themes/my-theme/assets/js/main.js
document.addEventListener('DOMContentLoaded', () => {
    // Theme toggle
    const themeToggle = document.getElementById('theme-toggle');
    if (themeToggle) {
        themeToggle.addEventListener('click', toggleTheme);
    }
    
    // Search functionality
    const searchInput = document.getElementById('search');
    if (searchInput) {
        searchInput.addEventListener('input', handleSearch);
    }
});

Theme Internationalization

i18n Files

# themes/my-theme/i18n/en.yaml
- id: read_more
  translation: "Read More"

- id: published_on
  translation: "Published on"

- id: by_author
  translation: "By"

- id: search_placeholder
  translation: "Search..."

# themes/my-theme/i18n/id.yaml
- id: read_more
  translation: "Baca Selengkapnya"

- id: published_on
  translation: "Dipublikasikan pada"

- id: by_author
  translation: "Oleh"

- id: search_placeholder
  translation: "Cari..."

Theme Features

Dark Mode

{{/* themes/my-theme/layouts/partials/theme-toggle.html */}}
<script>
const theme = localStorage.getItem('theme');
if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    document.documentElement.classList.add('dark');
}
</script>

<button id="theme-toggle" aria-label="Toggle dark mode">
    <svg class="sun-icon">...</svg>
    <svg class="moon-icon">...</svg>
</button>

<script>
document.getElementById('theme-toggle').addEventListener('click', () => {
    document.documentElement.classList.toggle('dark');
    localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
});
</script>

Search Functionality

// themes/my-theme/assets/js/search.js
class Search {
    constructor() {
        this.index = null;
        this.initialize();
    }
    
    async initialize() {
        const response = await fetch('/index.json');
        this.index = await response.json();
    }
    
    search(query) {
        if (!this.index) return [];
        const results = this.index.filter(item => 
            item.title.toLowerCase().includes(query.toLowerCase())
        );
        return results;
    }
}

Theme Distribution

GitHub Repository Structure

hugo-theme-name/
├── theme.toml
├── LICENSE
├── README.md
├── exampleSite/
│   ├── config.toml
│   ├── content/
│   └── static/
├── assets/
├── layouts/
├── static/
├── i18n/
└── config/

README.md untuk Theme

# Hugo Theme Name

Description of the theme.

## Features

- Feature 1
- Feature 2
- Feature 3

## Installation

```bash
git clone https://github.com/username/hugo-theme-name themes/hugo-theme-name

Configuration

Add to hugo.toml:

theme = "hugo-theme-name"

[params]
  param1 = "value1"

Preview


## Best Practices

### Theme Development Guidelines

Use consistent file structure yang follows Hugo conventions. Provide comprehensive configuration options through params. Include example site untuk demonstration. Test dengan berbagai Hugo versions. Document all features dan parameters. Provide internationalization support.

### Performance Considerations

Minimize CSS dan JavaScript bundles. Use lazy loading untuk images. Implement proper caching strategies. Optimize assets dengan compression.

### Accessibility

Follow WCAG guidelines untuk accessibility. Include proper ARIA labels. Ensure color contrast compliance. Support keyboard navigation.

## Kesimpulan

Hugo theming system provides powerful mechanisms untuk create reusable dan maintainable designs. Dengan understanding tentang theme structure, inheritance, dan customization options, Anda dapat create themes yang professional dan flexible.

## Artikel Terkait

- [Tutorial Hugo Templating: Memahami Layouts, Templates, dan Partial](/tutorial-hugo-templating-layouts-templates-partial/)
- [Integrasi Tailwind CSS dengan Hugo](/integrasi-tailwind-css-hugo/)
- [Hugo Custom Output Formats: JSON, AMP, dan Custom Output](/hugo-custom-output-formats/)
- [Hugo Multilingual: Membuat Website Multi Bahasa](/hugo-multilingual/)

Link Postingan : https://www.tirinfo.com/hugo-theming/

Editor : Hendra WIjaya

Publisher : Tirinfo

Read : 5 minutes.

Update : 4 February 2026