Lewati ke konten
Kembali ke Blog
Hugo Theming Web Design

Hugo Theming: Panduan Membuat dan Kustomisasi Tema

Hendra Wijaya
· · 7 menit baca

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" . }}

&lt;main&gt;
    {{ block &quot;main&quot; . }}{{ end }}
&lt;/main&gt;

{{ partial &quot;footer.html&quot; . }}
</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 }}
    &lt;div class=&quot;featured-image&quot;&gt;
        &lt;img src=&quot;{{ . }}&quot; alt=&quot;{{ $.Title }}&quot;&gt;
    &lt;/div&gt;
{{ end }}

&lt;div class=&quot;content&quot;&gt;
    {{ .Content }}
&lt;/div&gt;

&lt;footer class=&quot;post-footer&quot;&gt;
    {{ partial &quot;author-box.html&quot; . }}
    {{ partial &quot;share-buttons.html&quot; . }}
&lt;/footer&gt;
</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 = "[email protected]"

[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 =&gt; 
        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



git clone https://github.com/username/hugo-theme-name themes/hugo-theme-name
</code></pre>
<h2>Configuration</h2>
<p>Add to hugo.toml:</p>
<pre><code class="language-toml">theme = &quot;hugo-theme-name&quot;

[params]
  param1 = &quot;value1&quot;
</code></pre>
<h2>Preview</h2>
<p><img alt="Theme Preview" src="preview.png" /><br />
```</p>
<h2>Best Practices</h2>
<h3>Theme Development Guidelines</h3>
<p>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.</p>
<h3>Performance Considerations</h3>
<p>Minimize CSS dan JavaScript bundles. Use lazy loading untuk images. Implement proper caching strategies. Optimize assets dengan compression.</p>
<h3>Accessibility</h3>
<p>Follow WCAG guidelines untuk accessibility. Include proper ARIA labels. Ensure color contrast compliance. Support keyboard navigation.</p>
<h2>Kesimpulan</h2>
<p>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.</p>
<h2>Artikel Terkait</h2>
<ul>
<li><a href="/tutorial-hugo-templating-layouts-templates-partial/">Tutorial Hugo Templating: Memahami Layouts, Templates, dan Partial</a></li>
<li><a href="/integrasi-tailwind-css-hugo/">Integrasi Tailwind CSS dengan Hugo</a></li>
<li><a href="/hugo-custom-output-formats/">Hugo Custom Output Formats: JSON, AMP, dan Custom Output</a></li>
<li><a href="/hugo-multilingual/">Hugo Multilingual: Membuat Website Multi Bahasa</a></li>
</ul>

Ditulis oleh

Hendra Wijaya
Artikel Sebelumnya Integrasi Telegram dengan Platform Lain: Cross-Channel Strategy Artikel Selanjutnya Telegram Security dan Privacy: Melindungi Channel dan Data Pengguna

Artikel Terkait

Data-Driven Content di Hugo: JSON, YAML, dan CSV Integration

Februari 4, 2026

Hugo RSS dan Sitemap: Otomasi Feed dan SEO

Februari 4, 2026

Hugo Debugging dan Development Tools: Panduan Lengkap

Februari 4, 2026

Tinggalkan Komentar

Email tidak akan ditampilkan.