以网格视图展示博客文章列表
hexo-theme-lattice — Hexo 博客模板
作者 aispin
Lattice 是一个 Hexo 博客主题,以网格视图展示文章列表,由 AOTU Labs 创建并维护,采用 MIT 许可。
看看你的网站会是什么样
浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。
目前有 1 张原始预览,可打开完整图片查看设计细节。
截图用于了解视觉与布局,交互效果请以实际项目为准。
值得关注的模板亮点
从已有项目资料中,快速了解它的特点。
支持 Disqus 与多说两种评论系统
支持 Google Analytics、百度统计与 busuanzi 统计
提供 pimg 与 tag_cfg 两个自定义标签
内置 Lunr 客户端全文搜索,默认支持英文与简体中文
模板详细介绍
Lattice 是一个面向 Hexo 的博客主题,核心特点是用网格视图(grid view)展示博客文章列表。主题由 AOTU Labs 创建并维护,仓库最后更新于 2016 年。
主题内置多项可配置能力:评论方面支持 Disqus 与多说(Duoshuo);统计方面支持 Google Analytics、百度统计以及 busuanzi(用于在每篇文章显示 pv 与 uv);代码高亮提供 normal、night、eighties、blue、bright 等主题可选;还支持自定义 Logo、文章封面与文章资源目录。
主题提供两个自定义标签:pimg 用于快速插入文章内容图片,图片需放入 post.img_dir 指定的目录;tag_cfg 用于在文章中读取站点配置字段。图片展示使用 Fancybox。菜单数据放在 Hexo 站点的 _data 目录中。主题借助 hexo-generator-lunr 插件实现客户端全文搜索。
语言方面,英文与简体中文是默认语言,可在 languages 目录添加翻译,并在站点 _config.yml 中切换默认语言。开发环境要求 Hexo 3.0+ 与 Node 4.0+,README 明确说明不兼容 Node 6.0+。
适合你的项目吗?
适用场景
- 使用 Hexo 搭建个人博客并希望以网格布局呈现文章
- 需要为中文读者提供多说评论与百度统计的博客站点
- 希望通过自定义标签在文章中快速插入图片与读取站点配置
适合人群
- 使用 Hexo 3.0+ 且运行在 Node 4.x 环境的博客作者
- 偏好网格视图文章列表的 Hexo 用户
- 需要中英文双语界面与客户端全文搜索的站点
上手与定制指南
结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。
- 1
通过 git clone 将仓库克隆到 themes/lattice 目录,并在站点 _config.yml 中将 theme 设为 lattice
- 2
需要 Hexo 3.2.0 或以上版本;开发环境要求 Node 4.0+,README 说明不兼容 Node 6.0+
- 3
Disqus、Google Analytics、百度统计在站点配置中填写,多说、busuanzi、代码高亮主题、Logo 与文章封面在主题配置中设置
- 4
使用 pimg 标签前需将图片放入 post.img_dir 指定的目录,alt 文本中的空格需替换为 %20
- 5
全文搜索依赖 hexo-generator-lunr 插件,需在站点配置中设置 lunr 的 field 与 path
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供;担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- 使用该主题需先安装 Hexo 3.2.0 或更高版本,属于对宿主框架的版本要求。
- 开发环境要求 Node 4.0 及以上,但明确不兼容 Node 6.0 及以上版本,需在 Node 4.x 环境使用。
- 多说评论系统主要面向中文站点,非中文站点使用该功能意义有限。
- 启用多说评论的管理员功能时,user_id 不能为空,需前往 dev.duoshuo.com 获取用户 ID。
- 客户端全文搜索依赖额外的 hexo-generator-lunr 插件,需自行安装并在站点配置中设置 lunr 的 field 与 path。
- 使用 pimg 标签插入图片前,必须先把图片放入 post.img_dir 指定的目录,否则无法正常引用。
- pimg 标签的 alt 文本中不能使用空格,必须将空格替换为 %20。
- 文章图片展示依赖第三方 Fancybox 组件,其自身许可与使用条件需另行确认。
- 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据
Permission is hereby granted, free of charge
许可证原文
**Install Hexo 3.2.0 or above.**
README 原文
- Node 4.0+ (But not compatible with 6.0+
README 原文
`Duoshuo` is a comment system specially for Chinese.
README 原文
# user_id must NOT be null when admin_enable is true!
README 原文
`Lattice` uses the 'hexo-generator-lunr' plugin to implement client-side full text search.
README 原文
To use 'pimg', you should put your images into the folder defined in `post.img_dir`.
README 原文
Note: Don't use space charaters in the `alt text` field, replace any space charaters with `%20` if you have to.
README 原文
https://github.com/aispin/hexo-theme-lattice/blob/master/LICENSEhttps://github.com/aispin/hexo-theme-lattice/blob/master/README.md`Lattice` uses [Fancybox] to showcase your photos in your posts.
README 原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-10-02。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料一般 · 56 / 100
- 技术栈
- Hexo
- 网站类型
- 博客
这个分数如何计算
本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2016-06-24
- 截图检查日期
- 2026-10-02
目前没有记录演示链接。请依据仓库说明在本地评估;仅凭截图无法确认交互行为。
目录记录的主要技术栈是 Hexo。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
已完成服务器许可规则与 AI 来源核对;未经过人工编辑审核。
查看当时使用的来源资料
SHA-256: 272f46ded8951c041eb45f2b4aebc922c8b2fa1d4e1cbd406e0e79f7d90646f6
2026-10-02T15:09:01.344Z
来源文件 / 仓库
# Lattice
The best hexo theme for showing blog posts in grid view, created and maintained by [AOTU Labs](//aotu.io).
It's named `Lattice`.
[Preview](//aotu.io/)

## Installation
### Install
``` bash
$ git clone https://github.com/o2team/hexo-theme-lattice.git themes/lattice
```
**Install Hexo 3.2.0 or above.**
### Enable
Modify `theme` setting in `_config.yml` to `lattice`.
### Update
``` bash
cd themes/lattice
git pull
```
## Features
### Disqus
In your hexo site's configuration (not the theme's configuration).
```yml
# disqus
disqus_shortname: "your disqus shortname"
```
### Duoshuo
`Duoshuo` is a comment system specially for Chinese.
In the theme's configuration:
```yml
# Make duoshuo show UA
# user_id must NOT be null when admin_enable is true!
# you can visit http://dev.duoshuo.com get duoshuo user id.
duoshuo:
shortname: aotu
ua_enable: true
admin_enable: false
user_id: 0
#admin_nickname: ROOT
```
### Google Analytics
In your hexo site's configuration,
```yml
google_analytics: "your GA ID"
```
### Baidu Analytics
For Chinese, in your hexo site's configuration,
```
baidu_analytics: "your BA ID"
```
### busuanzi
`busuanzi` is a lighweight analytics plugin, use it to display `pv` and `uv` on every post.
In the theme's configuration,
```yml
busuanzi: true
```
### Code highlight theme
In the theme's configuration,
```yml
# Code Highlight theme
# Available value:
# normal | night | eighties | blue | bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal
```
### Custom Logo
In the theme's configuration, you can specify your own logo picture.
```yml
logo:
url: img/logo-square-120.png
```
### Custom Post Cover and Post Asset Folder
In the theme's configuration,
```yml
post:
cover: post-default.png
img_dir: img/post/
```
### Fancybox
`Lattice` uses [Fancybox] to showcase your photos in your posts.
```

```
### Custom Tag - `pimg`
`pimg` means `post image`, it's a custom tag for you inserting your post's content image quickly.
To use 'pimg', you should put your images into the folder defined in `post.img_dir`.
```
{% pimg imageName [alt text] [JSONImageAttibutes] %}
```
Note: Don't use space charaters in the `alt text` field, replace any space charaters with `%20` if you have to.
For example,
```
{% pimg post-aotu.jpg "An%20Sentence%20WithSpace" '{"title":"hello","class":"test_img"}' %}
```
### Custom Tag - 'tag_cfg'
`tag_cfg` let your access to your site's configuration in your posts.
For example, we can insert the config's description field into a post.
```
{% tag_cfg description %}
```
### Menu
Place your menu data into the `_data` folder of your hexo site.
[Example menu data](https://github.com/o2team/o2team.github.io/blob/hexo/source/_data/menu.yml)
### Lunr (Lattice Specially)
`Lattice` uses the 'hexo-generator-lunr' plugin to implement client-side full text search.
In your hexo site's configuration,
```yml
# lunr
lunr:
field: all
path: assets/lunr/
```
For more details about [hexo-generator-lunr](o2team/hexo-generator-lunr)
## Languages
English and Simplified Chinese are the default languages of the theme. You can add translations in the `languages` folder and change the default language in blog's `_config.yml`.
``` yml
language: zh-CN
```
## Development
### Requirements
- Hexo 3.0+
- Node 4.0+ (But not compatible with 6.0+)
[Hexo]: http://hexo.io/
[Fancybox]: http://fancyapps.com/fancybox/
[Font Awesome]: http://fontawesome.io/
[Aotu.io]: https://aotu.io/
看看同类模板
对比同技术栈与用途的模板,找到更适合的视觉与内容结构。

hexo-theme-matery
A beautiful hexo blog theme with material design and responsive design.一个基于材料设计和响应式设计而成的全面、美观的Hexo主题。
Hexo · 博客

hexo-theme-cactus
:cactus: A responsive, clean and simple theme for Hexo.
Hexo · 博客

hexo-theme-volantis
A Wonderful Theme for Hexo.
Hexo · 博客

hexo-theme-aurora
Hexo Theme Aurora 是一款以极光色彩和渐变 UI 为核心的 Hexo 博客主题,整体走未来感路线。 它的首页采用杂志式网格布局,文章列表与精选区域层次分明,视觉上更接近个人媒体站点而非传统博客。
Hexo · 博客

hexo-theme-Claudia
Claudia 是一款为 Hexo 设计的博客主题,主打简洁外观与易配置。 它支持自动跟随设备深色模式,并在 README 中宣称拥有 90+ 的 Lighthouse 评分,适合追求轻量与性能的博客作者。
Hexo · 博客

hexo-theme-A4
A hexo theme that looks like an A4 paper.(一个类A4纸张质感的hexo博客主题。 )
Hexo · 博客
