Hugo博客

anglesladder — Hugo 博客模板

作者 chaomifan

Angel's Ladder 是一个基于 Hugo 的简洁博客主题,此仓库为在原版基础上做中文社交与分类定制的版本。

看看你的网站会是什么样

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

1 个预览视图
作者提供的预览
作者提供的预览首屏预览

来自项目 README 的原始预览。

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

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

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

值得关注的模板亮点

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

01

基于 Hugo 的简洁博客主题,原版作者为 Asuka Suzuki

02

支持响应式布局、分页、标签、Disqus 评论与源码高亮

03

社交链接改为微博、微信、简书、邮件,移除 Twitter、Facebook 等

04

页尾增加文字分类链接,首页与列表页文章带简介

05

主题色通过 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博客

适合你的项目吗?

适用场景

  • 用 Hugo 搭建个人中文博客
  • 需要微博、微信、简书等国内社交入口的站点
  • 希望首页和列表页展示文章摘要的博客
  • 通过 config.toml 参数控制社交链接、头像与版权显示

适合人群

  • 使用 Hugo 并接受手动编辑 config.toml 的用户
  • 以中文写作、面向国内读者的个人博客作者
  • 需要 Disqus 评论与 Google Analytics 的站点

上手与定制指南

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

  1. 1

    将仓库克隆到 Hugo 站点的 themes 目录,目录名使用 angels-ladder

  2. 2

    用主题内的 web_config/config.toml 替换站点原有 config.toml

  3. 3

    本地预览命令为 hugo server -t angels-ladder -D -w

  4. 4

    修改主题色需编辑 layouts/static/theme.less 并编译为 theme.css

  5. 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 原文

Then compile the LESS file by using [one of LESS compilers](http://leafo.net/lessphp/editor.html),

README 原文
https://github.com/chaomifan/anglesladder/blob/master/LICENSE.mdhttps://github.com/chaomifan/anglesladder/blob/master/README.md

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

![](https://github.com/chaomifan/anglesladder/blob/master/screenshot/1.png?raw=true)  


## 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])   :)


反馈内容错误

看看同类模板

对比同技术栈与用途的模板,找到更适合的视觉与内容结构。