基于 Hugo 的简洁博客主题,原版作者为 Asuka Suzuki
anglesladder — Hugo 博客模板
作者 chaomifan
Angel's Ladder 是一个基于 Hugo 的简洁博客主题,此仓库为在原版基础上做中文社交与分类定制的版本。
看看你的网站会是什么样
浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。
目前有 1 张原始预览,可打开完整图片查看设计细节。
截图用于了解视觉与布局,交互效果请以实际项目为准。
值得关注的模板亮点
从已有项目资料中,快速了解它的特点。
支持响应式布局、分页、标签、Disqus 评论与源码高亮
社交链接改为微博、微信、简书、邮件,移除 Twitter、Facebook 等
页尾增加文字分类链接,首页与列表页文章带简介
主题色通过 LESS 文件修改,默认色为 #29abe2
模板详细介绍
Angel's Ladder 是一个面向 Hugo 的博客主题,原版由 Asuka Suzuki 开发,本仓库由 chaomifan(Ethan)在原版基础上做了个性化修改。原版特性包括简洁设计、响应式布局、分页、标签、Disqus 评论、源码高亮和 Google Analytics。
定制部分集中在中文使用场景:调整标题栏社交账户参数,加入微博、微信、简书、邮件,去掉 Twitter、Facebook 等国外社交账户;在页尾增加文字分类链接;为首页和列表页的文章增加简介(summary)。主题配置通过 config.toml 完成,可设置副标题、社交链接、分类链接、头像、版权声明、Disqus shortname 与 Google Analytics 跟踪 ID 等参数;未填写的可选参数对应区块会隐藏。
主题颜色通过编辑 layouts/static/theme.less 后编译为 theme.css 修改,默认色为 #29abe2;其他样式改动写在 layouts/static/custom.css。仓库最近更新时间为 2017 年,README 的安装说明基于当时的 Hugo 用法,未说明与新版 Hugo 的兼容情况。
适合你的项目吗?
适用场景
- 用 Hugo 搭建个人中文博客
- 需要微博、微信、简书等国内社交入口的站点
- 希望首页和列表页展示文章摘要的博客
- 通过 config.toml 参数控制社交链接、头像与版权显示
适合人群
- 使用 Hugo 并接受手动编辑 config.toml 的用户
- 以中文写作、面向国内读者的个人博客作者
- 需要 Disqus 评论与 Google Analytics 的站点
上手与定制指南
结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。
- 1
将仓库克隆到 Hugo 站点的 themes 目录,目录名使用 angels-ladder
- 2
用主题内的 web_config/config.toml 替换站点原有 config.toml
- 3
本地预览命令为 hugo server -t angels-ladder -D -w
- 4
修改主题色需编辑 layouts/static/theme.less 并编译为 theme.css
- 5
仓库最后更新于 2017 年,与新版 Hugo 的兼容性需自行验证
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供;担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- Disqus 评论为可选外部服务:需在 config.toml 中填写 disqusShortname 才能启用,未填写则隐藏评论区,使用前需自行注册 Disqus 账号。
- Google Analytics 为可选外部服务:需填写 Google Analytics 跟踪 ID 才会启用统计,未填写则跳过分析,使用前需自行注册账号。
- ShareThis 分享按钮为可选外部服务:需填写 ShareThis 发布者密钥才会显示,未填写则隐藏,使用前需自行注册账号。
- 安装需从 GitHub 克隆仓库到 Hugo 站点的 themes 目录,并将目录名设为 angels-ladder,依赖 Git 与 Hugo 环境。
- 安装步骤要求用主题内的 web_config/config.toml 替换站点原有 config.toml,会覆盖现有配置,需自行备份与调整。
- 修改主题色需自行使用外部 LESS 编译器将 theme.less 编译为 theme.css,主题本身不提供编译工具。
- 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据
Permission is hereby granted, free of charge
许可证原文
disqusShortname = "Ethan's PMbook"
README 原文
analytics = "UA-XXXXXXXX-X"
README 原文
shareThis = "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
README 原文
git clone https://github.com/chaomifan/anglesladder.git "angels-ladder"
README 原文
mv web_config/config.toml path/to/yoursite/config.toml
README 原文
https://github.com/chaomifan/anglesladder/blob/master/LICENSE.mdhttps://github.com/chaomifan/anglesladder/blob/master/README.mdThen compile the LESS file by using [one of LESS compilers](http://leafo.net/lessphp/editor.html),
README 原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-10-02。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料一般 · 68 / 100
- 技术栈
- Hugo
- 网站类型
- 博客
这个分数如何计算
本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2017-05-02
- 截图检查日期
- 2026-10-02
已收录演示链接。请用你的内容与屏幕尺寸检查;有演示不代表表单、认证或支付已经可用。
目录记录的主要技术栈是 Hugo。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
已完成服务器许可规则与 AI 来源核对;未经过人工编辑审核。
查看当时使用的来源资料
SHA-256: 398593998b07ab07f79df960ac7cd86cacff4569e422fa08105caaae425fe06e
2026-10-02T17:16:48.281Z
来源文件 / 仓库# Angel's Ladder 个性化配置
## Overview
Angel's Ladder is a simple blog theme for Hugo.
* Simple and clean design
* Responsive design
* Pagination
* Tagging
* Disqus
* Source code highlighting
* Google Analytics
个性化部分:
* 修改标题栏中 社交账户的配置参数,增加 微博,微信,简书,邮件,去除不常用的 Twitter、Facebook等国外社交账户
* 在页尾增加文字分类链接
* 增加首页文章简介(summary)
* 增加列表页文字简介(summary)
## Screenshot

## Installation
将文件 Clone 到 hugo 的 themes 文件夹
```
cd themes
git clone https://github.com/chaomifan/anglesladder.git "angels-ladder"
```
使用皮肤文件夹中的 config.toml 文件 替换原本的 config 文件 (path/to/yoursite 是你 hugo 生成的网站存放路径)
````
mv web_config/config.toml path/to/yoursite/config.toml
````
预览效果(path/to/yoursite 是你 hugo 生成的网站存放路径)
````
cd path/to/yoursite
hugo server -t angels-ladder -D -w
````
## Configuration (config.toml)
**贴上我修改过的配置文件**
````
baseurl = "http://chaomifan.github.io/"
languageCode = "en-us"
title = "Ethan's PMbook"
theme = "angels-ladder"
disqusShortname = "Ethan's PMbook"
[params]
subtitle = "信心是黑暗中的灯塔,任何时候都不能丢"
about = "#"
weibo = "http://www.baidu.com"
wechat = "htttp://www.baidu.com"
jianshu = "http://www.jianshu.com/users/f5820a96231b/timeline"
github = "http://www.baidu.com"
mail = "mailto:[email protected]"
guifan = "/categories/产品规范/"
fenxi = "/categories/产品分析/"
jiqiao = "/categories/技巧分析/"
yanjiu = "/categories/技术研究/"
profile = "/images/ethan.png"
copyright = "Written by Ethan,转载请注明出处,谢谢!"
````
**原版皮肤中关于配置文件的修改说明**
To take full advantage of the features in this theme, you can add variables to your site config file.
The following is the example configuration.
````
baseurl = "http://tanksuzuki.com/"
languageCode = "ja"
title = "TANKSUZUKI.COM"
disqusShortname = "tanksuzuki"
[Params]
subtitle = "I would like to be a layer 3 switch."
facebook = "https://facebook.com/foobar"
twitter = "https://twitter.com/foobar"
github = "https://github.com/foobar"
showsRSS = true
profile = "/images/profile.png"
copyright = "Written by Asuka Suzuki"
analytics = "UA-XXXXXXXX-X"
shareThis = "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
````
Details of each parameter are as follows.
| Parameter | Required | Comment |
| :--- | :--- | :--- |
| baseurl | yes | Enter the title of your site. |
| languageCode | yes | Enter the language code of HTML. Example: en, ja. |
| title | yes | Enter the title of your site. |
| disqusShortname | no | Enter the short name of the disqus. If you do not enter, disqus section is hidden. |
| subtitle | no | Enter the subtitle of your site. If you do not enter, subtitle is hidden. |
| facebook | no | Enter the URL of Facebook. If you do not enter, the link is hidden. |
| twitter | no | Enter the URL of Twitter. If you do not enter, the link is hidden. |
| github | no | Enter the URL of Github. If you do not enter, the link is hidden. |
| showsRSS | no | Enter true to show the URL of RSS. If you enter false or nothing, the link is hidden. |
| profile | no | Enter the path to the profile image. If you do not enter, profile section will be hidden. |
| copyright | no | Enter the copyright notice. If you do not enter, copyright display is hidden. |
| analytics | no | Enter the tracking ID of Google analytics. If you do not enter, the analysis will be skipped. |
| shareThis | no | Enter the publisher key of ShareThis. If you do not enter, the ShareThis buttons are hidden.
## Style Customization
To change the theme color, edit the `layouts/static/theme.less`.
Then compile the LESS file by using [one of LESS compilers](http://leafo.net/lessphp/editor.html),
and replace the content of `layouts/static/theme.css` with the compiled CSS.
The default theme color is `#29abe2`.
Please change the favorite color.
````
/* Theme color
--------------------------------------------------*/
@color: #29abe2;
````
For original styles, please edit the `layouts/static/custom.css`.
## License
Open sourced under the [MIT license](https://github.com/tanksuzuki/angels-ladder/blob/master/LICENSE.md).
## Author
* 原作者:Asuka Suzuki
* 修改:Ethan
## 参考文档
1. gohugo.io/content/summaries/
2. www.gohugo.org/theme/angles-ladder/
## Contact
[点此给我发邮件](mailto:[email protected]) :)
看看同类模板
对比同技术栈与用途的模板,找到更适合的视觉与内容结构。

hugo-PaperMod
PaperMod 是 Hugo 生态里知名度较高的主题之一,定位很明确:给博客和轻量作品集站点提供一套干净、响应式的阅读界面。
Hugo · 作品集

LoveIt
❤️A clean, elegant but advanced blog theme for Hugo 一个简洁、优雅且高效的 Hugo 主题
Hugo · 博客

hugo-coder
A minimalist blog theme for hugo.
Hugo · 博客

blowfish
Personal Website & Blog Theme for Hugo
Hugo · 博客

hugo-paper
🪺 A simple, clean, customizable Hugo theme
Hugo · 博客

hextra
Hextra 是一个 Hugo 主题,定位在文档站与博客之间:既提供侧边栏导航、目录、面包屑、分页这类文档站结构,也能承载博客内容。
Hugo · 文档
