基于 hugo-coder 改造,保留简洁博客外观并增加个人展示相关配置
hugo-coder-portfolio — Hugo 作品集模板
作者 naro143
基于 hugo-coder 改造的 Hugo 主题,在简洁博客外观上增加了个人展示与社交分享相关的配置项,适合搭建个人作品集或自我介绍型站点。
看看你的网站会是什么样
浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。
目前有 1 张原始预览,可打开完整图片查看设计细节。
截图用于了解视觉与布局,交互效果请以实际项目为准。
值得关注的模板亮点
从已有项目资料中,快速了解它的特点。
通过 params 配置作者名、职位信息、描述、关键词与头像
社交链接以数组形式配置,可指定图标与权重,未设图标时显示文字
支持多语言,可为每种语言单独覆盖标题、作者、描述、关键词与菜单
内置 Disqus 评论与 Twitter、Facebook、Hatena、Line、LinkedIn 分享开关
模板详细介绍
hugo-coder-portfolio 是作者 naro143 在 hugo-coder 基础上改造的 Hugo 主题,仓库采用 MIT 许可。主题定位偏向个人展示:README 说明其改动目的是让站点能更多地介绍作者本人,具体改动清单放在 exampleSite 的 FeaturesOfCoderPortfolio 文章中,仓库本身没有逐条罗列。
配置层面,主题通过 config.toml 的 params 提供作者名、职位信息、站点描述、关键词、头像路径、页脚内容、固定栏文案、是否隐藏版权与致谢、自定义 CSS、移动端菜单居中、RTL 支持等选项;社交链接以 params.social 数组定义,可指定名称、图标与权重,未设置图标时显示文字。主题支持多语言模式,可为每种语言单独覆盖标题、作者、描述、关键词与菜单,并可通过 langseparator 分隔菜单与语言选择器。
功能方面,主题内置 Disqus 评论(设置 disqusShortname 后全站文章启用,单篇可通过 disable_comments 关闭),底部提供 Twitter、Facebook、Hatena、Line、LinkedIn 的分享开关,并支持为社交分享设置默认缩略图。构建演示站点需要 less 与 uglifycss,README 给出 make build、hugo server、make demo 等命令。仓库最后更新于 2021 年,README 未声明兼容的 Hugo 版本范围,使用前建议自行核对当前 Hugo 版本的兼容性。
适合你的项目吗?
适用场景
- 搭建以自我介绍和作品展示为主的个人站点
- 在简洁博客基础上增加作者信息与社交分享入口
- 需要中英或多语言切换的个人主页与博客
- 使用 Disqus 作为评论系统的 Hugo 站点
适合人群
- 使用 Hugo 构建静态站点的开发者
- 希望站点兼顾博客与个人作品集展示的用户
- 需要多语言菜单与语言选择器的个人站点
- 接受通过 config.toml 集中配置主题参数的使用者
上手与定制指南
结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。
- 1
将仓库克隆到 Hugo 项目的 themes/coder-portfolio 目录,并在 config.toml 中设置 theme = "coder-portfolio"
- 2
构建演示或生成压缩 CSS 需要预先安装 less 与 uglifycss,可执行 npm install -g less uglifycss
- 3
完整可用的配置示例位于仓库 exampleSite 目录下的 config.toml
- 4
启用评论需设置 disqusShortname,单篇文章可通过 disable_comments: true 关闭
- 5
仓库最后更新于 2021 年,README 未声明兼容的 Hugo 版本范围,使用前建议核对当前 Hugo 版本
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供;担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- 构建或运行演示站点前,需先安装 less 与 uglifycss 工具(可通过 npm install -g less uglifycss 安装),否则无法完成 CSS 构建与演示。
- 启用评论功能需在配置中填写 Disqus 的 shortname,即依赖第三方 Disqus 服务;未配置时评论不可用。
- 一旦设置 disqusShortname,全站所有文章默认启用 Disqus 评论,需逐篇通过 disable_comments 关闭。
- 构建流程假定已安装 NodeJS/NPM,并依赖其全局安装 less 与 uglifycss,属于额外的外部工具链要求。
- 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据
Permission is hereby granted, free of charge
许可证原文
It is necessary to have `less` and `uglifycss` installed to build and run the demo.
README 原文
disqusShortname = "yourdiscussshortname" # Enable or disable Disqus.
README 原文
Add the following line to your config, ```disqusShortname = "yourdiscussshortname"``` When this is set, all posts are disqus enabled
README 原文
https://github.com/naro143/hugo-coder-portfolio/blob/master/LICENSE.mdhttps://github.com/naro143/hugo-coder-portfolio/blob/master/README.mdIt is necessary to have `less` and `uglifycss` installed to build and run the demo. Assuming that already have NodeJS/NPM installed
README 原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-10-01。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料一般 · 64 / 100
- 技术栈
- Hugo
- 网站类型
- 作品集
这个分数如何计算
本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2021-12-09
- 截图检查日期
- 2026-10-01
目前没有记录演示链接。请依据仓库说明在本地评估;仅凭截图无法确认交互行为。
目录记录的主要技术栈是 Hugo。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
已完成服务器许可规则与 AI 来源核对;未经过人工编辑审核。
查看当时使用的来源资料
SHA-256: 94e091a4f45d657b25269a4ff856263a9a3f5b5b3fc3e7a5c2b8b44868ad0fbb
2026-10-01T00:47:59.184Z
来源文件 / 仓库---------------------------
This theme is created based on [hugo-coder](https://github.com/luizdepra/hugo-coder).
I made it possible to tell yourself more by my change.
Please see [FeaturesOfCoderPortfolio](https://github.com/naro143/hugo-coder-portfolio/blob/master/exampleSite/content/posts/FeaturesOfCoderPortfolio.md) in the post about the change.
Have questions or suggestions? Feel free to [open an issue on GitHub](https://github.com/naro143/hugo-coder-portfolio/issues/new) or [ask me on Twitter](https://twitter.com/naro143).
---------------------------
A simple and clean blog theme for Hugo.

## How to use this theme
To use `hugo-coder-portfolio` go through the following steps.
### Download
Clone this repository into your Hugo project.
```
git clone https://github.com/naro143/hugo-coder-portfolio themes/coder-portfolio
```
### Configuration
Add the following lines to your `config.toml`.
```toml
baseurl = "http://www.example.com" # Hostname (and path) to the root.
title = "Yusuke Ishimi" # Site title.
theme = "coder-portfolio" # Set the theme.
languagecode = "en" # The site’s language code used to generate RSS.
defaultcontentlanguage = "en" # The default content language.
paginate = 20 # Default number of pages per page in pagination.
pygmentsstyle = "b2" # Color-theme or style for syntax highlighting.
pygmentscodefences = true # Enable code fence background highlighting.
pygmentscodefencesguesssyntax = true # Enable syntax guessing for code fences without specified language.
pygmentsUseClasses = true # new add
disqusShortname = "yourdiscussshortname" # Enable or disable Disqus.
[params] # theme parameters
author = "Yusuke Ishimi" # Author's name.
info = "WEB AND APPS ENGINEER" # Author's job title or info.
description = "Yusuke Ishimi's personal website" # Site description.
keywords = "blog,developer,personal" # Site keywords.
avatarurl = "images/avatar.jpg" # Contain the path of the optionnal avatar in the static folder.
footercontent = "Enter a text here." # Add footer content
fixedbarContent = "Do you want to know me more private?→" # Add fixedbar content
fixedbarContentAfter = "Thank You! Please share it if you like it→" # Add fixedbar content after click
# Whether you want to hide copyright and credits in the footer.
hideCredits = false
hideCopyright = false
# Custom CSS
custom_css = []
# Alignment of Mobile Menu items
itemscentered = true
# RTL support
rtl = false
# Bottom sns share
snsShare = true # new add
# Popular sns share
# if you want add sns. please message!
enableTwitterShare = true # new add
enableFacebookShare = true # new add
enableHatenaShare = true # new add
enableLineShare = true # new add
enableLinkedInShare = true # new add
thumbnail = "images/tn.png" # default sns thumbnail
# Multilanguage mode
langseparator = "|" # Separates menus from language selectors when site is multilingual.
# Social links
[[params.social]]
name = "Github"
icon = "fab fa-github"
weight = 1
url = "https://github.com/naro143/"
[[params.social]]
name = "Twitter"
icon = "fab fa-twitter"
weight = 2
url = "https://twitter.com/naro143/"
[[params.social]]
name = "LinkedIn"
icon = "fab fa-linkedin"
weight = 3
url = "https://www.linkedin.com/in/naro143/"
[[params.social]]
# If icon is not set, Text is displayed.
name = "LinkedIn"
weight = 4
url = "https://www.linkedin.com/in/naro143/"
# Menu links
[[menu.main]]
name = "Blog"
weight = 1
url = "posts"
[[menu.main]]
name = "About"
weight = 2
url = "about"
```
You can look at full working [`config.toml`](https://github.com/naro143/hugo-coder-portfolio/blob/master/exampleSite/config.toml) inside the [exampleSite](https://github.com/naro143/hugo-coder-portfolio/tree/master/exampleSite) folder.
#### Multilingual mode
To use multilingual mode, the configuration above needs to be extended by parameters for the specific languages.
Each `language` section overrides default site's parameters when that language is chosen.
```toml
[params]
langseparator = "|" # separates menus from language selectors.
[languages]
[languages.en]
languagename = "English" # The language name to be displayed in the selector.
title = "Yusuke Ishimi"
# You can configure the theme parameter for each language.
[languages.en.params]
author = "Yusuke Ishimi"
info = "WEB AND APPS ENGINEER"
description = "Yusuke Ishimi's personal website"
keywords = "blog,developer,personal"
[languages.en.menu] # It is possible to change the menu too.
[[languages.en.menu.main]]
name = "About"
weight = 1.0
url = "about"
[[languages.en.menu.main]]
name = "Blog"
weight = 2.0
url = "posts"
[languages.ja]
languagename = "Japanese"
title = "石見 優丞"
[languages.ja.params]
author = "石見 優丞"
description = "石見 優丞のサイト"
keywords = "blog,developer, ブログ, エンジニア"
info = "WEBとアプリのエンジニア"
[languages.ja.menu]
[[languages.ja.menu.main]]
name = "石見とは"
weight = 1.0
url = "ja/about"
[[languages.ja.menu.main]]
name = "ブログ"
weight = 2.0
url = "ja/posts"
```
It is possible to force Hugo to render all default language content under the language code with `defaultContentLanguageInSubdir = true`.
In this case, remember to update your menus URLs (i.e. `/en/about/`).
### Build & Test
It is necessary to have `less` and `uglifycss` installed to build and run the demo.
Assuming that already have NodeJS/NPM installed, run `npm install -g less uglifycss`.
To update or generate the minified CSS file:
```
make build
```
To build your site and test, run:
```
hugo server
```
To preview the exampleSite, run
```
make demo
```
The above command copies current state of the theme to exampleSite/themes and starts hugo with hugo serve -D (Go does not support Symlink directories)
### Disqus
Add the following line to your config, ```disqusShortname = "yourdiscussshortname"``` When this is set, all posts are disqus enabled
You can disable comments for a post by adding the following to your page meta data: ```disable_comments: true```.
## License
Coder is licensed under the [MIT license](https://github.com/naro143/hugo-coder-portfolio/blob/master/LICENSE.md).
## Author
[Yusuke Ishimi](https://github.com/naro143)
## Contributors
## Special Thanks
- All contributors, for every PR and Issue reported.
看看同类模板
对比同技术栈与用途的模板,找到更适合的视觉与内容结构。

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 · 作品集
