Hugo作品集

phlogiston — Hugo 作品集模板

作者 RedMike

Phlogiston 是一个基于 Hugo 的简洁作品集/博客主题,强调可覆盖的局部模板与自定义代码区块,方便按个人用途扩展。

看看你的网站会是什么样

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

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

来自项目 README 的原始预览。

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

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

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

值得关注的模板亮点

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

01

从零编写的 Hugo 主题,面向作品集或博客类网站

02

响应式设计,部分布局使用 flexbox

03

提供可覆盖的 partial 模板,便于插入自定义 HTML/JS

04

支持通过配置为所有页面引入自定义 CSS 与 JS

05

集成 Disqus 评论与 Google Analytics

06

侧边栏支持 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作品集

适合你的项目吗?

适用场景

  • 搭建个人作品集或博客站点
  • 需要在页面中嵌入自定义统计或可视化代码的站点
  • 希望以现成主题为基础进行二次修改的 Hugo 用户
  • 使用 Disqus 作为评论系统的静态站点

适合人群

  • 熟悉 Hugo 并愿意自行调整模板的用户
  • 需要按自身用途扩展局部模板的开发者
  • 以文字与少量图片为主的作品集或博客

上手与定制指南

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

  1. 1

    需先安装 Hugo,然后在站点的 themes 目录下克隆该仓库

  2. 2

    评论功能需在 config.toml 中设置 disqusShortname

  3. 3

    社交图标需自行引入 FontAwesome 或类似图标库

  4. 4

    自定义 CSS/JS 通过 Params.customCss 与 Params.customJs 配置

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

Google Analytics integration

README 原文
https://github.com/RedMike/phlogiston/blob/master/LICENSE.mdhttps://github.com/RedMike/phlogiston/blob/master/README.md

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

[![Build Status](https://travis-ci.org/RedMike/phlogiston.svg?branch=master)](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.

![screenshot](https://raw.githubusercontent.com/RedMike/phlogiston/master/images/screenshot.png)


## 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.
反馈内容错误

看看同类模板

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