Hugo主题开发：区块与浅色主题的实现

在Hugo主题开发中，如何有效地组织内容结构和实现灵活的样式选择是关键。本文将重点介绍如何在Hugo主题中实现“区块”（Block）的概念，以及如何为主题添加一个浅色（Light）主题模式，以满足不同用户的视觉偏好。

理解Hugo中的“区块”（Block）

在Hugo的主题布局中，“区块”通常指的是可复用的、逻辑上独立的页面组件。这些组件可以通过局部模板（Partials）来实现。局部模板允许我们将复杂的HTML结构分解成小的、易于管理的单元，并在多个布局文件中引用它们。

例如，我们可以将网站的页眉、页脚、导航栏、侧边栏等设计成独立的局部模板。

创建局部模板: 在themes/<your-theme>/layouts/partials/目录下创建文件。例如，创建一个名为header.html的局部模板：

{{/* themes/<your-theme>/layouts/partials/header.html */}}
<header>
    <div class="container">
        <div class="site-title">
            <a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
        </div>
        {{ partial "navigation.html" . }}
    </div>
</header>

再创建一个navigation.html局部模板：

{{/* themes/<your-theme>/layouts/partials/navigation.html */}}
<nav>
    <ul>
        {{ range .Site.Menus.main }}
            <li><a href="{{ .URL }}">{{ .Name }}</a></li>
        {{ end }}
    </ul>
</nav>

在基础布局中引用局部模板: 在你的基础布局文件（如themes/<your-theme>/layouts/_default/baseof.html）中，使用{{ partial "partial-name.html" . }}来调用它们：

<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
<head>
    {{/* ... head content ... */}}
    <title>{{ .Title }} - {{ .Site.Title }}</title>
    {{/* ... link to CSS ... */}}
</head>
<body>
    {{ partial "header.html" . }}
    <main>
        {{ block "main" . }}
        {{ end }}
    </main>
    {{ partial "footer.html" . }}
</body>
</html>

通过这种方式，我们可以将复杂的页面结构分解成可管理的“区块”，提高了代码的复用性和可维护性。

实现浅色（Light）主题

添加浅色主题通常涉及到CSS变量（CSS Variables）和JavaScript的配合，或者通过切换CSS类来实现。这里我们以CSS变量的方式为例，因为它更具灵活性。

1. 使用CSS变量定义颜色方案

在你的主CSS文件（例如themes/<your-theme>/static/css/style.css）中，使用CSS变量来定义颜色。

/* themes/<your-theme>/static/css/style.css */
:root {
    /* 浅色主题默认值 */
    --background-color: #ffffff;
    --text-color: #333333;
    --primary-color: #007bff;
    --header-footer-bg: #f8f9fa;
    --border-color: #dee2e6;
}

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

header, footer {
    background-color: var(--header-footer-bg);
    color: var(--text-color);
    padding: 1rem;
}

a {
    color: var(--primary-color);
}

/* ... 其他样式 ... */

2. 创建深色主题（可选）

你也可以定义一个深色主题，或者允许用户选择。通常，我们会创建一个.dark-theme类，并在其中覆盖CSS变量。

/* 在同一个CSS文件中或单独的dark-theme.css文件中 */
body.dark-theme {
    --background-color: #1a1a1a;
    --text-color: #e0e0e0;
    --primary-color: #66b3ff;
    --header-footer-bg: #2c2c2c;
    --border-color: #444444;
}

3. 使用JavaScript切换主题

要实现主题的切换，通常需要一段JavaScript代码。这段代码可以监听用户操作（如点击按钮）或利用浏览器提供的prefers-color-scheme媒体查询。

使用localStorage保存用户偏好:

// themes/<your-theme>/static/js/theme-switcher.js
document.addEventListener('DOMContentLoaded', (event) => {
    const themeToggleBtn = document.getElementById('theme-toggle');
    const body = document.body;

    // 尝试从localStorage加载主题
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
        body.classList.add(savedTheme);
    } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
        // 如果没有保存的主题，并且系统偏好为深色，则应用深色主题
        body.classList.add('dark-theme');
    }

    // 切换主题的事件监听器
    if (themeToggleBtn) {
        themeToggleBtn.addEventListener('click', () => {
            if (body.classList.contains('dark-theme')) {
                body.classList.remove('dark-theme');
                localStorage.setItem('theme', 'light'); // 可以命名为'light'或移除类
            } else {
                body.classList.add('dark-theme');
                localStorage.setItem('theme', 'dark-theme');
            }
        });
    }
});

在baseof.html中引入JavaScript:

<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
<head>
    {{/* ... */}}
    {{/* Link to CSS */}}
    {{ $styles := resources.Get "css/style.css" | minify | fingerprint }}
    <link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}">
    {{/* Optional: Link to theme-switcher.js if not inlined */}}
    {{ $themeScript := resources.Get "js/theme-switcher.js" | minify | fingerprint }}
    <script src="{{ $themeScript.RelPermalink }}" integrity="{{ $themeScript.Data.Integrity }}" defer></script>
</head>
<body class=""> {{/* Initial class can be set by JS */}}
    {{ partial "header.html" . }}
    <main>
        {{ block "main" . }}
        {{ end }}
    </main>
    {{ partial "footer.html" . }}
</body>
</html>

在header.html或footer.html中添加切换按钮:

{{/* themes/<your-theme>/layouts/partials/header.html */}}
<header>
    <div class="container">
        <div class="site-title">
            <a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
        </div>
        {{ partial "navigation.html" . }}
        <button id="theme-toggle" aria-label="切换主题">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
            </svg>
        </button>
    </div>
</header>

（注意：上面的SVG是一个简单的太阳/月亮切换图标，你需要根据实际情况调整。）

通过结合CSS变量和JavaScript，我们可以为Hugo主题提供灵活的主题切换功能，让用户能够根据自己的喜好选择浅色或深色模式，提升用户体验。