Hugo 主题

Hugo 新闻

一个现代的、响应式的 Hugo 主题，适用于新闻和媒体网站。使用 Tailwind CSS 和 Alpine.js 构建。

作者：Taylor Ondrey
GitHub 星星：0
更新日期：2025-01-11
许可证：MIT
标签：博客响应式

下载

Hugo 新闻主题

一个现代的、响应式的 Hugo 主题，专为新闻和媒体网站设计。使用 Tailwind CSS 和 Alpine.js 构建。

Hugo News Theme Screenshot

功能

🎨 使用 Tailwind CSS 的现代设计
🔍 内置搜索功能
📱 完全响应式
🏷️ 支持类别、标签和作者
🖼️ 带有大图的特色文章
🔄 动态类别浏览
👥 作者资料
🔍 使用 Fuse.js 的搜索功能
⚡ 最小化 JavaScript，加载速度快
🎨 整洁的排版和间距
📊 Google Analytics 4 集成

安装

git submodule add https://github.com/professionalaf/hugo-news themes/hugo-news

更新你的 hugo.toml 配置文件

theme = "hugo-news"

配置

Google Analytics

该主题包含对 Google Analytics 4 (GA4) 的内置支持。要启用跟踪

从你的 Google Analytics 帐户获取你的 GA4 衡量 ID (格式: G-XXXXXXXXXX)
将其添加到你网站的配置文件中

googleAnalytics = "G-XXXXXXXXXX"  # Replace with your GA4 measurement ID

分析代码将

仅在提供有效的衡量 ID 时加载
尊重用户隐私设置和 Cookie 同意
异步加载，以免影响页面性能
跟踪页面浏览量和基本的用户交互

如果你不想进行分析，只需将 googleAnalytics 参数注释掉

# googleAnalytics = "G-MEASUREMENT_ID"

基本配置

hugo.toml 配置示例

baseURL = 'https://example.org/'
languageCode = 'en-US'
title = 'My Hugo News Site'

[taxonomies]
  category = "categories"
  tag = "tags"
  author = "authors"

[outputs]
  home = ["HTML", "RSS", "JSON"]

[[menus.main]]
name = "Home"
url = "/"
weight = 10

[[menus.main]]
name = "Categories"
url = "/categories"
weight = 20

[[menus.main]]
name = "Tags"
url = "/tags"
weight = 30

内容结构

content/
├── _index.md
├── articles/
│   ├── first-post.md
│   └── second-post.md
├── authors/
│   ├── _index.md
│   └── john-doe/
│       ├── _index.md
│       └── avatar.jpg
└── categories/
    └── _index.md

文章前言

---
title: "Article Title"
date: 2024-01-01
author: "Author Name"
categories: ["Category1", "Category2"]
tags: ["tag1", "tag2"]
featured_image: "path/to/image.jpg"
description: "Article description"
---

作者前言

---
title: "Author Name"
bio: "Author biography"
avatar: "author-image.jpg"
social:
  twitter: "twitterhandle"
  linkedin: "linkedinprofile"
---

评论系统

该主题包含两种类型的评论系统

静态评论

静态评论永久存储在站点的 data 目录中。它们对所有用户可见，并且在会话之间持续存在。要添加静态评论

在 data 目录中创建一个 JSON 文件，格式为：YYYY-MM-DD-{文章目录名称}-comments.json
使用此结构

{
  "comments": [
    {
      "name": "Author Name",
      "content": "Comment text",
      "date": "YYYY-MM-DDTHH:mm:ss-05:00",
      "isStatic": true
    }
  ]
}

动态评论

动态评论存储在用户的浏览器 localStorage 中。这些评论

仅对创建它们的用户可见
在页面刷新后持续存在，但仅在同一浏览器中
不与其他用户共享
如果用户清除其浏览器数据，则会被清除

动态评论由主题的 JavaScript 自动处理，不需要任何设置。

开发

要求

Hugo 扩展版本 (>= 0.116.0)
Node.js (用于 Tailwind CSS 开发)

贡献

Fork 该存储库
创建你的功能分支 (git checkout -b feature/amazing-feature)
提交你的更改 (git commit -m '添加惊艳的功能')
推送到该分支 (git push origin feature/amazing-feature)
打开一个 Pull Request