从零编写的 Hugo 主题,面向作品集或博客类网站
phlogiston — Hugo 作品集模板
作者 RedMike
Phlogiston 是一个基于 Hugo 的简洁作品集/博客主题,强调可覆盖的局部模板与自定义代码区块,方便按个人用途扩展。
看看你的网站会是什么样
浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。
目前有 1 张原始预览,可打开完整图片查看设计细节。
截图用于了解视觉与布局,交互效果请以实际项目为准。
值得关注的模板亮点
从已有项目资料中,快速了解它的特点。
响应式设计,部分布局使用 flexbox
提供可覆盖的 partial 模板,便于插入自定义 HTML/JS
支持通过配置为所有页面引入自定义 CSS 与 JS
集成 Disqus 评论与 Google Analytics
侧边栏支持 Markdown 描述、图片与社交图标
模板详细介绍
Phlogiston 是一个从零编写的 Hugo 主题,面向作品集或博客类网站,定位是提供一个便于按自身需求修改的起点。主题采用响应式设计,部分布局使用 flexbox 实现。
在扩展方式上,它提供可覆盖的 partial 模板:可以在自己的站点中创建 layouts/partials/sidebar-extra.html 向侧边栏描述下方插入自定义 HTML/JS,创建 layouts/partials/front-header.html 在首页导航栏下方插入自定义内容。config.toml 中还可通过 Params.customCss 与 Params.customJs 数组为每个页面引入自定义 CSS 或 JS 文件,支持本地路径和外部 URL,重复配置即可引入多个文件。
侧边栏支持通过 Image120、Image240 指定图片,Description 支持 Markdown;socialIcons 数组可添加社交图标,但需要自行引入 FontAwesome 或类似图标库。导航栏由 Navbar 开关控制,NavbarCategories 决定菜单中显示哪些分类,FrontPageCategories 决定首页展示哪些分类。Disqus 评论通过 Hugo 原生集成,只需在 config.toml 设置 disqusShortname;同时提供 Google Analytics 集成。
主题仓库最后更新于 2017 年,README 未说明当前 Hugo 版本的兼容情况,也未提供演示站点或更详细的使用文档。安装方式为在 Hugo 站点的 themes 目录下克隆该仓库。
适合你的项目吗?
适用场景
- 搭建个人作品集或博客站点
- 需要在页面中嵌入自定义统计或可视化代码的站点
- 希望以现成主题为基础进行二次修改的 Hugo 用户
- 使用 Disqus 作为评论系统的静态站点
适合人群
- 熟悉 Hugo 并愿意自行调整模板的用户
- 需要按自身用途扩展局部模板的开发者
- 以文字与少量图片为主的作品集或博客
上手与定制指南
结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。
- 1
需先安装 Hugo,然后在站点的 themes 目录下克隆该仓库
- 2
评论功能需在 config.toml 中设置 disqusShortname
- 3
社交图标需自行引入 FontAwesome 或类似图标库
- 4
自定义 CSS/JS 通过 Params.customCss 与 Params.customJs 配置
- 5
仓库最后更新于 2017 年,使用前建议核对与当前 Hugo 版本的兼容性
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供;担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- 社交图标功能需自行引入 FontAwesome 或类似图标库,主题本身不包含图标资源。
- 启用评论功能需在 config.toml 中设置 disqusShortname,即依赖 Disqus 第三方评论服务。
- 使用 Google Analytics 集成需自行配置该外部统计服务。
- 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据
Permission is hereby granted, free of charge
许可证原文
Text-based social icons ([FontAwesome](https://fontawesome.com) or similar required)
README 原文
Disqus is integrated with Hugo natively, and only requires that you set
README 原文
https://github.com/RedMike/phlogiston/blob/master/LICENSE.mdhttps://github.com/RedMike/phlogiston/blob/master/README.mdGoogle Analytics integration
README 原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-10-03。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料较少 · 53 / 100
- 技术栈
- Hugo
- 网站类型
- 作品集
这个分数如何计算
本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2017-10-05
- 截图检查日期
- 2026-10-03
目前没有记录演示链接。请依据仓库说明在本地评估;仅凭截图无法确认交互行为。
目录记录的主要技术栈是 Hugo。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
审核声明: [email protected] · 2026-10-04
查看当时使用的来源资料
SHA-256: a876f2c526e7d78572be94b1c170bdf2f00cca2403e55ae3cb1a18aea2bb3a22
2026-10-03T22:41:57.307Z
来源文件 / 仓库# Phlogiston [](https://travis-ci.org/RedMike/phlogiston) Phlogiston is a simple website template built for portfolio/blog websites. Its main goal is to provide a good base to start off from for user modifications that correspond to your own use cases. This theme was created from scratch, with responsiveness and modern HTML features in mind.  ## Features * Responsive design, partially implemented using flexbox * Override-able partial templates for extending with custom elements * Disqus integration for comments * Google Analytics integration * Text-based social icons ([FontAwesome](https://fontawesome.com) or similar required) ## Installation Download and install [Hugo](https://gohugo.io/overview/installing/) and run (if on Linux): ```sh $ mkdir themes $ cd themes $ git clone https://github.com/RedMike/phlogiston ``` ## Disqus integration Disqus is integrated with Hugo natively, and only requires that you set ```toml disqusShortname = "short-name" ``` in your config.toml file. ## Configuration There are a number of custom parameters available in config.toml, as well as partial templates that can be overriden. ### Global ```toml [[Params.customCss]] url = "/css/custom.css" [[Params.customCss]] url = "https://example.com/custom.css" [[Params.customJs]] url = "/js/custom.js" [[Params.customJs]] url = "https://example.com/custom.js" ``` The above options allow you to include custom CSS or JS to your site. These will be included on every page. Repeat the elements in order to include multiple. ### Sidebar ```toml Image120 = "/link/to/image" Image240 = "/link/to/bigger/image" ``` The above options control the image displayed on the sidebar. Omitting them stops the image from displaying. ```toml Description = """Your description here, in *Markdown*.""" ``` The above option controls the description underneath the site name. This supports all Markdown elements. `layouts/partials/sidebar-extra.html` can be created in your own website in order to add custom HTML/JS to the sidebar, below the description. ```toml [[Params.socialIcons]] iconClass = "fa fa-github-square" url = "https://github/Example" ``` The above option allows you to add social icons to the bottom of your sidebar. Create multiple elements to add multiple icons. You will have to import FontAwesome, or similar services, to your site in order to use this. ### Navbar ```toml Navbar = true ``` The above option enables a built-in top navigational menu with links to categories of posts. ```toml NavbarCategories = ["post", "project"] ``` The above option allows you to control which categories show up in the menu. ### Front Page ```toml FrontPageCategories = ["post"] ``` The above option allows you to control which categories are shown on the main page. `layouts/partials/front-header.html` can be created in your own website in order to add custom HTML/JS to the top of the home page, below the navbar. ## License This theme is released under the MIT license.
看看同类模板
对比同技术栈与用途的模板,找到更适合的视觉与内容结构。

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

Congo
Congo 是一款为 Hugo 设计的现代内容主题,核心定位是让内容本身成为页面焦点。 它基于 Tailwind CSS 3.0 构建,整体布局完全响应式,视觉风格干净且克制,没有多余装饰。
Hugo · 博客

toha
Toha 是一款面向个人作品集场景的 Hugo 主题,以极简设计和响应式布局为核心,适合用来搭建个人主页、作品展示或技术博客。
Hugo · 作品集

hugo-profile
A highly customizable and mobile first Hugo template for personal portfolio and blog.
Hugo · 作品集

hugo-theme-introduction
Minimal, single page, smooth-scrolling theme for Hugo static site generator.
Hugo · 作品集

hugo-theme-console
hugo-theme-console 是一款以系统终端为灵感的极简 Hugo 主题,基于 Terminal CSS 构建,整体视觉干净利落,强调快速加载与响应式布局。
Hugo · 作品集
