--
:
--
:
--
Homepage-Creators-one
最后更新于:
Homepage-Creators-one
写在前面
自己最终决定还是不折腾个人主页了，仅仅记录下优秀的个人主页。
自己还是喜欢别人第一眼看到的是我的博客首页。
软件位置
官网：
https://github.com/iWangJiaxiang/Homepage-Creators
2025.9.7下载-Homepage-Creators-个人主页-王嘉祥
背景
个人主页存放一些什么东西呢？
- 个人站点：2个博客（teek和zola-theme-jiaxiang.wang-one）
- 个人信息：微信、邮箱、cnb仓库
- 开源项目：vitepress-theme-teek-one、typora-theme-one、zola-theme-jiaxiang.wang-one、Homepage-Creators-one
部署
🔥 预览
| 站点名称 | 站点地址 |
|---|---|
| 王嘉祥 个人主页 | https://www.jiaxiang.wang |
ℹ️ 简介
Homepage Creators 是一款适用于 Zola 的个人主页主题，风格接近 Apple，美观大气。
本主题使用简单，只需修改config.toml文件即可动态调整内容。无需像上游仓库一样修改 HTML 内容，极大降低用户的心智负担。
🔌 功能
特色功能
已完成所有功能移植
- 基本功能
- 移动端自适应
- 动画滚动
- AVIF / WebP自适应
- 动态更新底部年份
- 访问量统计（Umami 或自定义）
- 内容板块
- 导航菜单
- 首屏板块
- 作者板块
- 事件板块
- 产品板块（独立）
- 产品板块（清单）
- 日常运营
- 置顶通知
- 合规
- ICP备案
- 公安备案
📝 快速上手
本章节助你快速运行自己的主页网站，如果打算正式使用本主题，请参阅正式使用章节，能获得更好的主题版本更新体验
免费静态页面托管服务
（1）GitHub Pages
- Fork 本仓库。
- 确保仓库已经包含
.github/workflows/deploy.yml文件，无需额外配置。 - 在仓库的 Actions 页面启用
Build GH Pages工作流，然后手动触发构建。 - 提交更改后，GitHub Actions 将自动构建并部署到
gh-pages分支，等待完成。 - 在您的 GitHub 仓库中，进入 Settings -> Pages，在 Source 下拉菜单中选择
gh-pages分支并保存。 - 部署完成后，您可以通过
https://<your-username>.github.io/<repository-name>访问您的站点。 - 参考定制主页章节，定制个人主页
（2）CloudFlare Pages
- Folk 本仓库
- 登录 Cloudflare 并进入 Pages 页面。
- 点击 Create a project 按钮。
- 选择 Connect to Git，然后授权 Cloudflare 访问您的 GitHub 仓库。
- 在仓库列表中选择您的
Homepage-Creators仓库。 - 配置构建设置：
- Framework preset: 选择
None。 - Build command 构建命令: 输入
zola build。 - Build output directory 构建输出: 输入
public。 - 添加环境变量
UNSTABLE_PRE_BUILD，填写asdf plugin add zola https://github.com/salasrod/asdf-zola && asdf install zola $ZOLA_VERSION && asdf global zola $ZOLA_VERSION - 添加环境变量
ZOLA_VERSION，填写0.20.0 - 如果这里遇到问题，请参考官方文档
- 点击 Save and Deploy 按钮，Cloudflare Pages 将开始构建和部署您的站点。
- 部署完成后，您可以通过 Cloudflare 提供的域名访问您的站点，或者绑定自定义域名。
- 参考定制主页章节，定制个人主页
本地部署
参考官方说明安装 Zola 命令行工具
将本仓库克隆到本地
1git clone --depth=1 https://github.com/iWangJiaxiang/Homepage-Creators进入本地仓库
1cd Homepage-Creators运行预览命令，然后在浏览器打开提示的预览地址
1zola serve此时您应该成功访问到博客网站啦
参考官方资料进一步并定制您的主页
参考定制主页章节，根据需要修改
config.toml配置文件内容，您需要对 TOML 格式有基本的了解。根据需要将自己的图片素材放到
static/img文件夹
正式使用
本章节提供的方案和直接修改本仓库代码的最大区别就是内容隔离。基于 Zola 博客框架的机制，将本仓库的代码安装为主题，这样主题更新和用户自己的修改将完全隔离，能够长期使用，避免产生技术债务。
正式使用时，假定你已经对 Zola 框架和 Git Submodule 具备基础的了解，具体操作步骤如下：
本地安装 Zola 命令行工具，参考官方说明
使用
zola命令行本地初始化一个新的网站，也就是你的个人主页，并初始化为 Git 仓库。命令格式为zola init <site name>将本主题仓库作为 Git Submodule 安装在你的网站
1git submodule add -b main https://github.com/iWangJiaxiang/Homepage-Creators themes此时，你的仓库应该自动创建了
themes/Homepage-Creators文件夹下载本仓库内容
1git submodule update --init此时，
themes/Homepage-Creators文件夹应该具有内容了配置新网站使用本主题，修改
config.toml文件的属性theme = "Homepage-Creators"参考定制主页章节，根据需要修改
config.toml配置文件内容，您需要对 TOML 格式有基本的了解。
之后，你的个人主页网站就可以作为一个单独的 Git 仓库维护管理了。
如果需要更新主题，只需要更新 Git Submodule 的分支/标签/代码即可。
💖定制主页
定制过程十分简单！无需改一行代码，因为我已经对板块进行模块化抽取，你只需要：
- 将使用到的图片素材并存放在
static/img文件夹（最费时且最难的工作其实是图片制作……） - 修改
config.toml文件，配置板块、文字内容和引用的图片 - 运行
zola serve命令，本地预览主页，支持实时刷新
要进行主页定制，你需要对 Zola 框架具有基本的了解，例如理解项目结构和配置文件，这些内容十分简单，只需要通读一遍即可。
基础配置
在 config.toml 文件中可以对网站信息进行设置，说明如下
1[extra.site]
2# 建站年份，用于底部版权内容生成
3start_year = 2024
4# 网站 Logo
5logo = "/img/logo.webp"
6# 导航栏 Logo，留空则默认为网站 Logo
7nav_logo = "/img/logo.webp"
8# 联系邮箱
9mail = "contact@example.com"
10# ICP 备案号
11compliance_icp = "ICP备XXXXXXXX号"
12# 公安备案号
13compliance_security = "公网安备0000000000号"
14# 公安备案链接
15compliance_security_link = "https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=0000000000"
16
17[extra.other]
18# 是否启用 AVIF 图片格式转换，大幅降低图片尺寸
19avif_enable = true
导航菜单
在 config.toml 文件中可以对顶部导航栏和通知的内容进行设置，说明如下
1[extra.nav]
2
3# 导航栏下方弹出通知
4[extra.nav.message]
5enable = true
6# support inline html
7text = "🎉 访问作者博客"
8url = "https://blog.jiaxiang.wang"
9
10# 中间导航栏配置
11[extra.nav.center]
12menus = [
13 # 设置 internal = true，url 为文字的表示内部导航，页面滑动到特定板块的区域
14 { name = "主页", url = "主页", internal = true},
15 { name = "主题", url = "主题", internal = true},
16 { name = "博客", url = "博客", internal = true},
17 { name = "媒体", url = "媒体", internal = true},
18 # 设置 internal = true，url 为链接的表示外部跳转
19 { name = "项目", url = "https://blog.jiaxiang.wang/tags/project/", internal = false},
20]
21
22# 右侧导航栏配置
23[extra.nav.right]
24menus = [
25 { name = "作者博客", url = "https://blog.jiaxiang.wang", internal = false},
26 { name = "作者 Github", url = "https://github.com/iWangJiaxiang", internal = false},
27]
内容板块
你可以根据需求对板块进行灵活定制，除了顶部导航栏之外，页面的任何板块都是模块化组件，可以无限自定义顺序、数量，随心所需，做你所想！
板块的使用十分简单，将板块的配置代码粘贴在 config.toml 的最后部分，也就是 [extra.other] Section 的后面即可。配置代码的第一行统一为 [[extra.index.widgets]]，[[ ]]在 Toml 语法中表示数组的意思
板块的顺序和添加的顺序一致，也就是说，你可以在 config.toml 文件中通过复制粘贴调整代码顺序以达到控制页面展示顺序的目的。
如果有疑惑的地方，最快的方法是参考本项目的 config.toml 文件，相信你会有所收获。
目前支持的模块化组件如下：
模块化组件板块：首屏内容
配置代码
1[[extra.index.widgets]]
2# 重要，不要修改
3type = "header"
4[extra.index.widgets.value]
5title_1 = "大标题1"
6title_2 = "大标题2"
7bio_1 = "这行描述有<span class=\"inline-word\">高亮文字</span>"
8bio_2 = "另一行描述"
9# “了解更多”按钮的链接
10about_url = "https://blog.jiaxiang.wang/about/"
11# 右侧的图片
12cover = "/img/logo.svg"
13# 下面是“了解更多”按钮旁边的小按钮，可根据需求增删，通常放社交媒体链接
14[[extra.index.widgets.value.links]]
15class_icon = " icon-github-line"
16url = "https://github.com/iWangJiaxiang"
17[[extra.index.widgets.value.links]]
18class_icon = " icon-github-line"
19url = "https://github.com/iWangJiaxiang"
截图（仅展示比较美观的效果，可能和配置代码内容无关）
模块化组件板块：作者介绍
配置代码
1[[extra.index.widgets]]
2# 重要，不要修改
3type = "author"
4[extra.index.widgets.value]
5# 姓名
6name = "站长"
7# 头像，图片放在 /static/img 文件夹，此处格式开头为：/img/
8avatar = "/img/logo01.webp"
9title = "Team leader, architect,"
10# 个人介绍或者个人的想法
11bio = "站长的介绍有点短哦~"
截图（仅展示比较美观的效果，可能和配置代码内容无关）
模块化组件板块：产品单页
可用来展示个人项目、作品、成果等
配置代码
1[[extra.index.widgets]]
2# 重要，不要修改
3type = "product-single"
4[extra.index.widgets.value]
5# 文字内容根据实际需要修改
6tip = "主页"
7title = "个人主页<br>正式开源"
8bio_1 = "像本页面一样，呈现美轮美奂<span class=\"inline-word\">效果</span>"
9bio_2 = "轻松配置，快速构建你的<span class=\"inline-word\">个人主页</span>"
10# 产品大图，图片放在 /static/img 文件夹，此处格式开头为：/img/
11img = "/img/homepage-single.avif"
12# 产品按钮列表
13[[extra.index.widgets.value.links]]
14# 样式，支持 primary-button 和 second-link 两种
15class = "primary-button"
16# 链接
17url = "https://github.com/iWangJiaxiang/Homepage-Creators"
18# 显示名称
19name = "立刻获取源代码"
20[[extra.index.widgets.value.links]]
21class = "second-link"
22url = "https://github.com/iWangJiaxiang"
23name = "开发者主页"
截图（仅展示比较美观的效果，可能和配置代码内容无关）
模块化组件板块：产品列表
用于展示一系列内容
配置代码
1[[extra.index.widgets]]
2# 重要，不要修改
3type = "product-list"
4[extra.index.widgets.value]
5# 文字内容根据实际需要修改
6title = "媒体"
7bio = "为互联网共享精神添砖加瓦"
8[[extra.index.widgets.value.items]]
9# 产品 logo，图片放在 /static/img 文件夹，此处格式开头为：/img/
10logo = "/img/internet.svg"
11# 文字内容根据实际需要修改
12title = "个人博客"
13bio = "个人博客的介绍文字"
14# 按钮配置
15url = "https://blog.jiaxiang.wang/"
16button = "访问"
17# 显示热门标签
18hot = true
19[[extra.index.widgets.value.items]]
20logo = "/img/wechat.svg"
21title = "公众号"
22bio = "第一时间获取动态"
23url = "https://blog.jiaxiang.wang/wechat"
24button = "访问"
截图（仅展示比较美观的效果，可能和配置代码内容无关）
模块化组件板块：重要事件
展示重要活动、大事件等
配置代码
1[[extra.index.widgets]]
2# 重要，不要修改
3type = "event"
4[extra.index.widgets.value]
5# 文字内容根据实际需要修改
6tip = "大事件"
7title = "王嘉祥博客主题<br>正式开源！"
8bio = "一个为创作者而构建的主题，0成本、0运维开始你的博客生涯，与各位优秀博主一同进步！"
9button = "立刻获取源代码"
10note = "基于 Zola 构建"
11url = "https://github.com/iWangJiaxiang/zola-theme-jiaxiang.wang"
12# 背景图，图片放在 /static/img 文件夹，此处格式开头为：/img/
13img = "/img/blog-event.avif"
截图（仅展示比较美观的效果，可能和配置代码内容无关）
💬 讨论
如果你对主题有什么建议或者意见，欢迎提 PR & Issue。
🔐 许可
Homepage Creators 使用 AGPL 协议开源，请遵守开源协议。
📝 致谢
该项目的CDN加速和安全防护由腾讯EdgeOne赞助。
CDN acceleration and security protection for this project are sponsored by Tencent EdgeOne.
📡
本站文章除特别声明外，均采用
CC BY-NC-SA 4.0
协议，转载请注明来自
余温Gueen Blog！
推荐使用微信支付
推荐使用支付宝
