本站主题 Jasmine：基于 Hugo Dream 的个性化改造

@ 吴瀛 Runne

2026年07月01日 · 辽宁 · 2 分钟阅读

Jasmine是我的妻子近一段时间特别喜欢《小茉莉》这首歌，想着让我们的孩子也就叫Jasmine。当我看到Dream主题的demo时，绿色且优雅的设计让我有了灵感，决定基于Dream主题进行个性化改造。Jasmine主题就这样开始做了。

主题概述

Jasmine 是本站使用的 Hugo 主题，基于开源主题 Dream 进行深度定制开发。Dream 主题有着简洁优雅的设计风格和丰富的功能特性。在此基础上，我进行了多项个性化改造，使其更符合本站的定位和需求。

主要修改内容

1. 首页布局重构

对首页进行了全新设计，采用更丰富的视觉层次：

精选文章轮播：左侧大图展示，右侧标题列表，支持自动轮播和手动切换
公告滚动栏：实时展示最新公告信息
分类入口按钮：三个卡片式按钮，快速导航到不同栏目
最新文章列表：按时间顺序展示最新发布的文章

2. 导航栏优化

<!-- themes/jasmine/layouts/partials/nav.html -->
<nav class="home-nav" style="height: 180px;">
  <div class="container">
    <div class="nav-content">
      <!-- Logo 和标题 -->
      <div class="nav-brand">
        <a href="{{ .Site.BaseURL }}" class="logo">
          <img src="/images/webbannertitle.webp" alt="Logo">
        </a>
      </div>
      <!-- 导航菜单 -->
      <ul class="nav-menu">
        {{ range .Site.Menus.main }}
        <li><a href="{{ .URL }}">{{ .Name }}</a></li>
        {{ end }}
      </ul>
    </div>
  </div>
</nav>

导航栏使用图片背景（webbanner01.webp），高度固定为 180px，提供更好的视觉冲击力。

3. 分类与标签页优化

在分类和标签页面添加了置顶文章排序逻辑：

<!-- themes/jasmine/layouts/_default/terms.html -->
{{ range $key, $value := .Data.Terms }}
<div class="term-item">
  {{ range where $value.Pages "Params.top" "true" }}
  <!-- 置顶文章 -->
  <article class="post-card top-post">
    <h3><a href="{{ .Permalink }}">{{ .Title }}</a></h3>
    <p>{{ .Summary }}</p>
  </article>
  {{ end }}
  {{ range where $value.Pages "Params.top" "!=" "true" }}
  <!-- 普通文章 -->
  <article class="post-card">
    <h3><a href="{{ .Permalink }}">{{ .Title }}</a></h3>
    <p>{{ .Summary }}</p>
  </article>
  {{ end }}
</div>
{{ end }}

带有 top: true 标记的文章会优先显示在页面顶部。

4. 响应式设计增强

针对移动端和桌面端进行了差异化设计：

桌面端：双栏布局，精选文章大图展示
移动端：单栏布局，轮播图展示精选内容

5. 深色模式支持

完整的深色模式切换功能，自动适配系统主题：

/* themes/jasmine/static/css/custom.css */
html.dark {
  --bg-color: #1a1a2e;
  --text-color: #e4e4e7;
  --card-bg: #252542;
}

html.dark .card-buttons {
  background: url('/images/webbg.webp') no-repeat center center;
  background-size: cover;
}

主题特色

1. 自定义样式系统

通过 custom.css 文件管理所有自定义样式，便于维护和扩展。

2. 灵活的内容组织

支持多种内容类型和布局方式，满足不同场景需求。

3. 性能优化

使用 WebP 格式图片，减少加载体积
优化 CSS 和 JavaScript 加载策略
响应式图片适配

4. 扩展性强

模块化的模板结构，便于添加新功能和组件。

技术栈

框架：Hugo 0.120+
语言：HTML、CSS、JavaScript
样式：Tailwind CSS + 自定义 CSS
图标：Ionic Icons

结语

Jasmine 主题是对 Hugo Dream 主题的一次全面升级，保留了原主题的优雅设计，同时添加了更多个性化功能。未来我将继续优化和完善，为用户提供更好的浏览体验。 p.s. Jasmine 主题还未在GitHub上开源，我还没有时间去完善可自定义版本和测试，本站作为demo先行发布，后续会发布可自定义版本。

如果你对主题开发感兴趣，欢迎交流探讨！