Hugo作品集启动器

hugrid — Hugo 作品集模板

作者 aerohub

Hugrid 是一个基于 Hugo 的网格主题，源自 Codrops 的缩略图网格展开预览效果，适合快速搭建作品集、收藏、书签或联系人等条目式页面。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

1 个预览视图

作者提供的预览

查看源码在新标签页打开

作者提供的预览首屏预览

来自项目 README 的原始预览。

目前有 1 张原始预览，可打开完整图片查看设计细节。

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-01查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

基于 Codrops 缩略图网格展开预览效果

响应式网格布局，适配不同屏幕宽度

内容由 data/items.toml 数据文件驱动

内置 Google Analytics 支持

提供 exampleSite 示例站点与配置

MIT 许可，可免费使用、修改与分发

模板详细介绍

Hugrid（Hugo+grid）是一个简单的 Hugo 网格主题，定位为可快速套用的样板，用于展示作品集、收藏、书签、联系人等条目化内容。主题基于 Codrops 的 Thumbnail Grid with Expanding Preview 实现，点击缩略图后展开预览。

主题提供响应式布局与 Google Analytics 支持。内容通过数据文件管理：exampleSite/data/items.toml 用于填写条目信息，exampleSite/config.toml 用于站点配置，复制到 Hugo 站点根目录后即可使用。仓库最近更新时间为 2019 年，采用 MIT 许可。

Hugo作品集启动器

适合你的项目吗？

适用场景

搭建个人作品集网格页面
整理书签或收藏类条目展示
制作联系人卡片式列表
作为 Hugo 网格布局的起步样板

适合人群

使用 Hugo 搭建静态站点的开发者
需要条目式网格展示页面的个人用户
希望以数据文件维护展示内容的项目
接受较早期主题代码、自行维护的站点

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
在 Hugo 站点根目录创建 themes 文件夹并克隆该主题仓库
2
将 exampleSite 中的 config.toml 复制到站点根目录并按需修改
3
将 exampleSite/data 目录复制到站点根目录，编辑 items.toml 填入自己的条目数据
4
运行 hugo server -w 后访问 localhost:1313 预览站点
5
演示图片、字体、图标等第三方素材需按各自许可单独核对

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

允许免费使用、修改、商用和分发该版本代码。
分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

主题基于 Codrops 的 Thumbnail Grid with Expanding Preview 实现，该原始作品另有独立的 Codrops 授权与使用条款；使用本主题时需同时遵守 Codrops 的许可条款，不能仅凭 MIT 许可使用其原始代码/素材。
演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

And there are [Original Codrops Licensing and Terms Of Use](http://tympanus.net/codrops/licensing/).
README 原文

https://github.com/aerohub/hugrid/blob/master/LICENSE.md https://github.com/aerohub/hugrid/blob/master/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-01。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料一般 · 69 / 100
技术栈: Hugo
网站类型: 作品集 · 启动器

这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间: 2019-07-08
截图检查日期: 2026-10-01

目前没有记录演示链接。请依据仓库说明在本地评估；仅凭截图无法确认交互行为。

目录记录的主要技术栈是 Hugo。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: 819c0727f17da74bd9a7773b711b09347c46be1cfb30bd3faca2fe119d284a29

2026-10-01T00:49:24.087Z

来源文件 / 仓库

# Hugrid

Hugrid (Hugo+grid) is a simple grid theme for Hugo. It's a kind of boilerplate to perform anyone or anything quickly. Portfolio, collection, bookmarks, contacts and so on.

# Origin

Hugrid is based on Codrops' [Thumbnail Grid with Expanding Preview](http://tympanus.net/codrops/?p=14530). 

## Demo

- [Demo on themes.gohugo.io](http://themes.gohugo.io/theme/hugrid/)
- [Original demo from Codrops](http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/)

## Features

- Responsive design
- Google Analytics

## Screenshot

![Hugrid screenshot](https://raw.githubusercontent.com/aerohub/hugrid/master/images/screenshot.png)


## Contents

- [Installation](#installation)
- [Getting started](#getting-started)
    - [The config file](#the-config-file)
	- [Data file](#data-file)
    - [Nearly finished](#nearly-finished)
- [Contributing](#contributing)
- [License](#license)
- [Annotations](#annotations)


## Installation

Inside the folder of your new Hugo site run:

    $ mkdir themes
    $ cd themes
    $ git clone https://github.com/aerohub/hugrid

For more information read the official [setup guide](//gohugo.io/overview/installing/) of Hugo.


## Getting started

After installing the theme successfully it requires a just a few more steps to get your site running.


### The config file

Take a look inside the [`exampleSite`](//github.com/aerohub/hugrid/tree/master/exampleSite) folder of this theme. You'll find a file called [`config.toml`](//github.com/aerohub/hugrid/blob/master/exampleSite/config.toml). To use it, copy the [`config.toml`](//github.com/aerohub/hugrid/blob/master/exampleSite/config.toml) in the root folder of your Hugo site. Feel free to change the strings in this theme.

### Data file

Take a look inside the [`exampleSite/data`](//github.com/aerohub/hugrid/tree/master/exampleSite/data) folder of this theme. You'll find a file called [`items.toml`](//github.com/aerohub/hugrid/blob/master/exampleSite/data/items.toml). To use it, copy the [`exampleSite/data`](//github.com/aerohub/hugrid/tree/master/exampleSite/data) folder in the root folder of your Hugo site. Change the strings in the `items.toml` with your data.

### Nearly finished

In order to see your site in action, run Hugo's built-in local server. 

    $ hugo server -w

Now enter `localhost:1313` in the address bar of your browser.


## Contributing

Did you found a bug or got an idea for a new feature? Feel free to use the [issue tracker](//github.com/aerohub/hugrid/issues) to let me know. Or make directly a [pull request](//github.com/aerohub/hugrid/pulls).


## License

This work is licensed under the MIT License. For more information read the [License](//github.com/aerohub/hugrid/blob/master/LICENSE.md).
And there are [Original Codrops Licensing and Terms Of Use](http://tympanus.net/codrops/licensing/).


## Annotations

Thanks 

- to [spf13](//github.com/spf13) for creating Hugo and the awesome community around the project
- to [digitalcraftsman](//github.com/digitalcraftsman) for creating Hugo themes and writing nice READMEs
- to Codrops for original [Thumbnail Grid with Expanding Preview](http://tympanus.net/codrops/?p=14530).

反馈内容错误