Demo : https://teek1.netlify.app
介绍
TEEK 是一个功能丰富的个人主页模板，专为开发者、设计师和创作者设计。它提供了：
- 🎨 10种预设主题 - 从默认蓝色到深色模式，满足不同审美需求
- 📱 完全响应式 - 完美适配桌面、平板和手机
- 🧭 智能导航 - 固定导航栏，支持平滑滚动
- 🃏 网站卡片 - 展示你的各种网站链接
- ⚙️ 易于配置 - 只需修改一个配置文件
- 🚀 快速部署 - 专为 GitHub Pages 优化
下载模板
方法一：Fork（推荐）
方法二：直接下载
访问 GitHub仓库，点击绿色的 “Code” 按钮，选择 “Download ZIP”。
自定义配置
配置生成暂时无法使用😭😭 请使用手动配置
~1. 打开配置生成器 ~~
👉 点击此处在线生成配置
2. 填写基本信息
按照步骤填写你的姓名、职位、简介等信息。
3. 生成配置文件
点击“生成配置”，复制生成的代码。
4. 替换配置文件
将复制的代码粘贴到 js/config.js 文件中，覆盖原有内容。
手动配置
如果你想手动编辑，打开 js/config.js 文件，修改以下内容：
const CONFIG = {
// 基本信息
name: "你的名字",
title: "你的职位",
description: "你的简介",
avatar: "你的头像URL",
// 关于我
about: "你的详细介绍...",
// 技能列表
skills: ["技能1", "技能2", "技能3"],
// 项目展示
projects: [
{
title: "项目名称",
description: "项目描述",
technologies: ["技术1", "技术2"],
demo: "演示链接",
github: "GitHub链接"
}
],
// 网站链接
websites: [
{
name: "网站名称",
description: "网站描述",
url: "网站链接",
icon: "FontAwesome图标类名"
}
],
// 联系信息
contact: {
email: "你的邮箱",
phone: "你的电话",
location: "你的位置",
website: "你的网站"
},
// 社交媒体
social: [
{
name: "平台名称",
url: "链接",
icon: "FontAwesome图标类名"
}
]
};
部署到 GitHub Pages
步骤详解
-
Fork GitHub 仓库
-
启用 GitHub Pages
- 进入仓库设置页面，点击 “Settings”
- 在左侧菜单中找到 “Pages”
- 在 “Source” 部分选择 “Deploy from a branch”
- 在 “Branch” 下拉菜单中选择 “main” 或 “master”
- 点击 “Save”
-
等待部署
- GitHub 会自动构建和部署你的网站，通常需要几分钟
- 部署完成后，你会看到类似这样的链接：
小贴士
- 仓库必须是公开的，否则 GitHub Pages 无法访问
- 如需自定义域名，可在 Pages 设置中配置
- 每次推送代码到仓库，GitHub Pages 会自动重新部署
主题定制
预设主题
TEEK 提供了 10 种预设主题，你可以通过以下方式切换：
- 在页面右上角点击主题按钮
- 在
js/config.js中设置defaultTheme字段
const CONFIG = {
// ...
defaultTheme: "dark", // 可选值: default, dark, blue, green, purple, orange, red, pink, cyan, yellow
// ...
};
创建自定义主题
在 css/themes.css 中添加：
[data-theme="custom"] {
--primary-color: #你的主色;
--secondary-color: #你的次色;
--background-color: #你的背景色;
--text-color: #你的文字色;
--card-bg: #你的卡片背景色;
--border-color: #你的边框色;
--shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
然后在配置文件中设置 defaultTheme: "custom"。
高级功能
添加新页面
- 在
index.html中添加新的<section> - 在导航菜单中添加对应的链接
- 在
js/config.js的navigation数组中添加配置
自定义样式
修改 css/style.css 来调整布局和组件样式：
/* 修改主色调 */
:root {
--primary-color: #你的颜色;
}
/* 修改卡片样式 */
.project-card {
border-radius: 15px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
添加动画效果
在 js/config.js 中可以控制各种功能：
settings: {
enableAnimations: true, // 启用动画效果
enableThemeSelector: true, // 显示主题选择器
enableSmoothScroll: true, // 启用平滑滚动
enableMobileMenu: true, // 启用移动端菜单
enableProjectImages: true, // 显示项目图片
enableWebsiteIcons: true // 显示网站图标
}
常见问题
Q: 如何修改颜色主题？
A: 在 js/config.js 中修改 defaultTheme 值，或使用页面上的主题切换功能。
Q: 如何添加新的页面？
A: 在 index.html 中添加新的 section，并在导航菜单中添加链接。
Q: 如何自定义样式？
A: 修改 css/style.css 文件中的样式规则。
Q: 如何部署到其他平台？
A: 这是一个纯静态网站，可以部署到任何支持静态文件的平台，如 Vercel、Netlify 等。
Q: 头像图片有什么要求？
A: 建议使用正方形图片，大小 150x150 像素，支持网络图片链接。
Q: 如何添加更多项目？
A: 在 js/config.js 的 projects 数组中添加更多项目对象。
如有更多问题，欢迎访问 TEEK GitHub 仓库 提交 Issue！
评论