diff --git a/src/app/globals.css b/src/app/globals.css
index bd2be60..4228ced 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -78,7 +78,7 @@ a {
box-shadow: 0 0 26px rgba(34, 211, 238, 0.42);
}
-.tech-doc-content :where(h3, h4) {
+.tech-doc-content :where(h3, h4, h5) {
margin: 42px 0 16px;
scroll-margin-top: 32px;
color: #ffffff;
@@ -100,6 +100,12 @@ a {
color: #a5f3fc;
}
+.tech-doc-content h5 {
+ margin-top: 28px;
+ color: #e9d5ff;
+ font-size: 0.98rem;
+}
+
.tech-doc-content :where(p, ul, ol, blockquote, pre) {
margin: 16px 0;
}
@@ -227,6 +233,37 @@ a {
white-space: pre;
}
+.tech-doc-content table {
+ display: block;
+ width: 100%;
+ max-width: 100%;
+ margin: 22px 0;
+ overflow-x: auto;
+ border: 1px solid rgba(103, 232, 249, 0.2);
+ border-radius: 16px;
+ border-spacing: 0;
+ background: rgba(2, 6, 23, 0.42);
+ box-shadow: 0 16px 42px rgba(2, 6, 23, 0.22);
+}
+
+.tech-doc-content :where(th, td) {
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ border-right: 1px solid rgba(255, 255, 255, 0.08);
+ padding: 0.85rem 1rem;
+ text-align: left;
+ vertical-align: top;
+}
+
+.tech-doc-content th {
+ background: rgba(34, 211, 238, 0.11);
+ color: #cffafe;
+ font-weight: 900;
+}
+
+.tech-doc-content td {
+ color: rgba(255, 255, 255, 0.72);
+}
+
.tech-doc-content img {
width: 100%;
max-width: 100%;
diff --git a/src/components/frontend-notes-page.tsx b/src/components/frontend-notes-page.tsx
index a53ad9d..c42071c 100644
--- a/src/components/frontend-notes-page.tsx
+++ b/src/components/frontend-notes-page.tsx
@@ -6,6 +6,7 @@ import {
Braces,
Code2,
Gauge,
+ GitBranch,
Globe2,
Layers3,
MonitorCog,
@@ -113,6 +114,12 @@ const articleVisuals: Record<
track: "Execution",
Icon: Braces,
},
+ git: {
+ accent: "from-orange-200 via-rose-300 to-cyan-300",
+ glyph: "Git",
+ track: "Version control",
+ Icon: GitBranch,
+ },
};
const featuredSlugs = ["javascript-part-1", "css", "browser"] as const;
diff --git a/src/content/notes/frontend/articles.ts b/src/content/notes/frontend/articles.ts
index 2f9965d..6d9136b 100644
--- a/src/content/notes/frontend/articles.ts
+++ b/src/content/notes/frontend/articles.ts
@@ -71,6 +71,12 @@ export const frontendArticles = [
description: "异步编程、事件循环、作用域、this、类型转换等代码输出题整理。",
file: "code-output.html",
},
+ {
+ slug: "git",
+ title: "Git 高频知识点",
+ description: "Git 基础、提交流程、分支、stash、远程协作、SSH 和忽略清单等知识点整理。",
+ file: "git.html",
+ },
] as const;
export function getFrontendArticle(slug: string) {
diff --git a/src/content/notes/frontend/git.html b/src/content/notes/frontend/git.html
new file mode 100644
index 0000000..402bbd9
--- /dev/null
+++ b/src/content/notes/frontend/git.html
@@ -0,0 +1,136 @@
+1. Git基础
+1.1 版本管理
+1.1.1 什么是版本管理
+版本管理是一种记录文件变化的方式，以便将来查阅特定版本的文件内容。
+1.1.2 人为维护文档版本的问题
+
+- 文档数量多且命名不清晰，容易导致版本混乱。
+- 每次编辑文档都需要复制，不方便。
+- 多人同时编辑同一个文档，容易产生覆盖。
+
+1.2 Git 是什么
+Git 是一个版本管理控制系统（VCS），它可以在任何时间点，将文档的状态作为更新记录保存起来，也可以在任何时间点，将更新记录恢复回来。
+1.3 Git 安装
+Git 下载地址
+在安装过程中，所有选项使用默认值即可。
+1.4 Git 基本工作流程
+
+
+| Git 仓库 | 暂存区 | 工作目录 |
|---|
+
+
+| 用于存放提交记录 | 临时存放被修改文件 | 被 Git 管理的项目目录 |
+
+
+1.5 Git 的使用
+1.5.1 Git 使用前配置
+在使用 Git 前，需要告诉 Git 你是谁，在向 Git 仓库中提交时需要用到。
+
+- 配置提交人姓名：
git config --global user.name 提交人姓名
+- 配置提交人邮箱：
git config --global user.email 提交人邮箱
+- 查看 Git 配置信息：
git config --list
+
+注意：
+
+- 如果要对配置信息进行修改，重复上述命令即可。
+- 配置只需要执行一次。
+
+1.5.2 提交步骤
+
+git init 初始化 Git 仓库。git status 查看文件状态。git add 文件列表 追踪文件。git commit -m 提交信息 向仓库中提交代码。git log 查看提交记录。
+1.5.3 撤销
+
+- 用暂存区中的文件覆盖工作目录中的文件：
git checkout 文件
+- 将文件从暂存区中删除：
git rm --cached 文件
+- 将 Git 仓库中指定的更新记录恢复出来，并且覆盖暂存区和工作目录：
git reset --hard commitID
+
+2. Git进阶
+2.1 分支
+为了便于理解，可以暂时认为分支就是当前工作目录中代码的一份副本。
+使用分支，可以让我们从开发主线上分离出来，以免影响开发主线。
+2.1.1 分支细分
+
+- 主分支（master）：第一次向 Git 仓库中提交更新记录时自动产生的一个分支。
+- 开发分支（develop）：作为开发的分支，基于 master 分支创建。
+- 功能分支（feature）：作为开发具体功能的分支，基于开发分支创建。
+
+功能分支 -> 开发分支 -> 主分支
+2.1.2 分支命令
+
+git branch 查看分支。git branch 分支名称 创建分支。git checkout 分支名称 切换分支。git checkout -b 分支名称 origin/分支名称 创建并切换分支，同时基于远程分支拉取代码。git merge 来源分支 合并分支。git branch -d 分支名称 删除分支，分支被合并后才允许删除；-D 表示强制删除。
+2.2 暂时保存更改
+在 Git 中，可以暂时提取分支上所有的改动并存储，让开发人员得到一个干净的工作副本，临时转向其他工作。
+使用场景：分支临时切换。
+
+- 存储临时改动：
git stash
+- 恢复改动：
git stash pop
+
+3. GitHub
+在版本控制系统中，大约 90% 的操作都是在本地仓库中进行的：暂存、提交、查看状态或历史记录等。除此之外，如果仅仅只有你一个人在这个项目里工作，你永远没有机会需要设置一个远程仓库。
+只有当你需要和开发团队共享数据时，设置一个远程仓库才有意义。你可以把它想象成一个“文件管理服务器”，利用这个服务器可以与开发团队的其他成员进行数据交换。
+3.1 注册
+
+- 访问 GitHub 首页，点击 Sign up 连接。
+- 填写用户名、邮箱地址、GitHub 登录密码。
+- 选择计划。
+- 填写 GitHub 问题。
+- 验证邮箱。
+- 进入 GitHub 个人中心。
+
+3.2 多人协作开发流程
+
+- A 在自己的计算机中创建本地仓库。
+- A 在 GitHub 中创建远程仓库。
+- A 将本地仓库推送到远程仓库。
+- B 克隆远程仓库到本地进行开发。
+- B 将本地仓库中开发的内容推送到远程仓库。
+- A 将远程仓库中的最新内容拉取到本地。
+
+3.3 创建仓库
+
+- 填写仓库基本信息。
+- 将本地仓库推送到远程仓库。
+
+
+git push 远程仓库地址 分支名称git push 远程仓库地址别名 分支名称git push -u 远程仓库地址别名 分支名称：-u 会记住推送地址及分支，下次推送只需要输入 git push。git remote add 远程仓库地址别名 远程仓库地址
+3.4 拉取操作
+3.4.1 克隆仓库
+克隆远端数据仓库到本地：git clone 仓库地址
+3.4.2 拉取远程仓库中最新的版本
+拉取远程仓库中最新的版本：git pull 远程仓库地址 分支名称
+3.5 解决冲突
+在多人同时开发一个项目时，如果两个人修改了同一个文件的同一个地方，就会发生冲突。冲突需要人为解决。
+3.6 跨团队协作
+
+- 程序员 C fork 仓库。
+- 程序员 C 将仓库克隆在本地进行修改。
+- 程序员 C 将仓库推送到远程。
+- 程序员 C 发起 pull request。
+- 原仓库作者审核。
+- 原仓库作者合并代码。
+
+3.7 SSH 免登录
+HTTPS 协议仓库地址：https://github.com/itcast-frontEnd/git-demo.git
+生成密钥：ssh-keygen
+密钥存储目录：C:\Users\用户\.ssh
+公钥名称：id_rsa.pub
+私钥名称：id_rsa
+3.8 Git 忽略清单
+将不需要被 Git 管理的文件名字添加到忽略清单中，在执行 Git 命令的时候，Git 就会忽略这些文件。
+Git 忽略清单文件名称：.gitignore
+将工作目录中的文件全部添加到暂存区：git add .