课程 7 · 日常工作
提交选定的块，而不是整个文件
准备一个标题和一个更宽的英雄，同时留下单独的卡片半径编辑供以后使用。故意使用文件、块和行选择，然后证明准确准备好的和剩余的CSS。
- 级别: 中级
- 阅读 5 分钟
- 4 分钟的视频
- 已更新
- 在这节课之前: 在判断更改之前先阅读比较
进度已保存在此浏览器中。
播放时会加载来自 YouTube 的视频（隐私增强模式）。
你将学到什么
- 为特定提交选择文件、块或行范围。
- 选择删除/添加的行进行替换。
- 独立阅读索引和工作内容。
- 保留第 8 课中未提交的半径编辑。
开始之前
您从第 6 课结束的地方开始：原始 main 有两个提交，可运行的第 6 课输入并且没有远程。工作/索引干净；被忽略的 dist 可以存在。该视频是在 Ubuntu 24.04 上使用 Git 2.52.0 和 GitTree 2.0 录制的：两次编辑均保存在 GitTree 自己的编辑器中，片段和台词均已上演并在应用程序中进行提交，终端检查针对应用程序创建的内容或单独的副本进行运行。块和线控制是真实操作的；本机补丁路由在单独的副本中运行。 macOS 或 Windows 上没有运行任何内容，并且 Ubuntu 是唯一记录的 Linux 系统。 GitTree 的源 Git 最低版本为 2.39.0。登录后，本地工作就属于免费计划。
概念
完整编辑和目标机构
将 index.html 替换为 HTML-02-HEADLINE，将工作 styles.css 替换为 CSS-02-WORKING。下面的 CSS-02-INDEX 是 target index，而不是用来覆盖工作文件的正文。
index.html — HTML-02-标题
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GitTree Features — course demo</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="site-header">
<a href="#main">GitTree Features</a>
</header>
<main id="main">
<section class="hero" aria-labelledby="hero-title">
<p class="eyebrow">GitTree Learn demo project</p>
<h1 id="hero-title">See your work clearly.</h1>
<p id="hero-copy">Choose one change, then check what Git saved.</p>
</section>
<section class="features" aria-labelledby="features-title">
<h2 id="features-title">Follow your work</h2>
<div class="cards">
<article class="feature-card">
<h3>History</h3>
<p>Read commits and branches together.</p>
</article>
<article class="feature-card">
<h3>Changes</h3>
<p>Review the exact content selected for a commit.</p>
</article>
<article class="feature-card">
<h3>Recovery</h3>
<p>Inspect the scope of a recovery point before using it.</p>
</article>
</div>
</section>
</main>
<footer><p>Built by a fictional team for GitTree Learn.</p></footer>
<script type="module" src="site.js"></script>
</body>
</html>styles.css — CSS-02-INDEX
:root {
color-scheme: light;
--page: #f7f8fa;
--surface: #ffffff;
--text: #17212e;
--link: #154ab5;
--line: #bac4d0;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--page);
color: var(--text);
font: 1rem/1.6 system-ui, sans-serif;
}
a {
color: var(--link);
}
.site-header,
main,
footer {
width: min(68rem, 100% - 2rem);
margin-inline: auto;
}
.site-header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 1rem;
padding-block: 1rem;
}
.hero {
max-width: 48rem;
padding-block: 3rem;
}
h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
line-height: 1.2;
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
gap: 1rem;
}
.feature-card {
padding: 1rem;
border: 1px solid var(--line);
border-radius: 0.5rem;
background: var(--surface);
}
section {
margin-block-end: 2rem;
}
button,
input {
font: inherit;
}
button,
input {
padding: 0.5rem 0.75rem;
}
:focus-visible {
outline: 3px solid var(--link);
outline-offset: 3px;
}
form {
display: grid;
max-width: 28rem;
gap: 0.5rem;
}styles.css — CSS-02-工作
:root {
color-scheme: light;
--page: #f7f8fa;
--surface: #ffffff;
--text: #17212e;
--link: #154ab5;
--line: #bac4d0;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--page);
color: var(--text);
font: 1rem/1.6 system-ui, sans-serif;
}
a {
color: var(--link);
}
.site-header,
main,
footer {
width: min(68rem, 100% - 2rem);
margin-inline: auto;
}
.site-header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 1rem;
padding-block: 1rem;
}
.hero {
max-width: 48rem;
padding-block: 3rem;
}
h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
line-height: 1.2;
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
gap: 1rem;
}
.feature-card {
padding: 1rem;
border: 1px solid var(--line);
border-radius: 0.75rem;
background: var(--surface);
}
section {
margin-block-end: 2rem;
}
button,
input {
font: inherit;
}
button,
input {
padding: 0.5rem 0.75rem;
}
:focus-visible {
outline: 3px solid var(--link);
outline-offset: 3px;
}
form {
display: grid;
max-width: 28rem;
gap: 0.5rem;
}在GitTree
- 在 Show Files (Command/Ctrl+Shift+E) 中，聚焦每个现有文件并按 Enter；粘贴其指定的工作主体，然后粘贴 Save 或 Command/Ctrl+S。不要将索引目标粘贴到正在运行的 CSS 上。
- Back to Graph → 命令面板... (Command/Ctrl+Shift+P) → Show Working Changes。单击 Unstaged Files 下的 index.html。
- 在差异视图（调色板 Show Diff as Hunks）中选择 Hunk。在标题替换处选择 Stage Hunk。仅期待暂存文件中的完整标题更改。整个文件 Stage File 是等效的，只是因为此 HTML 没有其他编辑。
- 单击“未暂存文件”下的 styles.css。保持 Ignore whitespace 关闭。在第 41 行找到最大宽度替换：
44rem→48rem。 - 选中已删除的
max-width: 44rem;行和添加的max-width: 48rem;行的复选框。它们的可访问名称包括符号、行号和文本。激活选择工具栏中的 Stage Lines。不要选择第 59 行的半径对。 - 单独重播中的替代方案：仅在最大宽度块上的 Stage Hunk 给出相同的目标。 Split/palette Show Diff Side by Side 将删除/添加的单元格放在其正确的旧/新面；两者都有自己的选择控件。返回 Hunk 进行主要拍摄。
- 单击 staged styles.css：只有 max-width 应该更改。单击未暂存的 styles.css：仅保留半径。使用 Clear 清除选择，而不是丢弃内容。如果您分阶段太多，请选择相关的分阶段块和 Unstage Hunk 或选择两个分阶段替换行和 Unstage Lines，然后重新检查。
- 输入摘要
feat: refine the hero and card spacing，普通选项全部关闭，然后输入 Commit Changes to 2 Files（或 Command/Ctrl+Enter 一次）。验证部分提交并保留未暂存的半径。 - 不要使用 Stage All Changes、丢弃或进行清理提交。第 8 课故意拥有 radius 提交。
过时的选择绑定到差异指纹；在任何外部编辑后重新加载，而不是应用针对旧字节的补丁。如果隐藏空格消除了行选择资格，请阅读原因并恢复完整的差异，而不是假装发生了选择。
在航站楼
保存两次编辑后：
git diff -- styles.css完整观察到的工作差异：
diff --git a/styles.css b/styles.css
index d443c7e..6382365 100644
--- a/styles.css
+++ b/styles.css
@@ -38,7 +38,7 @@ footer {
}
.hero {
- max-width: 44rem;
+ max-width: 48rem;
padding-block: 3rem;
}
@@ -56,7 +56,7 @@ h1 {
.feature-card {
padding: 1rem;
border: 1px solid var(--line);
- border-radius: 0.5rem;
+ border-radius: 0.75rem;
background: var(--surface);
}
本机交互路线：git add -p -- index.html 选择其标题块。 git add -p -- styles.css 可以接受第一个块并拒绝半径块。提示因 Git 版本而异；在回答之前检查内容，而不是记住的 y/n 序列。
确定性本机等效项是将以下完整补丁 outside 项目保存为 <selection.patch> 并将其仅应用于索引：
diff --git a/styles.css b/styles.css
--- a/styles.css
+++ b/styles.css
@@ -38,7 +38,7 @@
}
.hero {
- max-width: 44rem;
+ max-width: 48rem;
padding-block: 3rem;
}
git add -- index.html
git apply --cached --check "<selection.patch>"
git apply --cached "<selection.patch>"
git diff --cached -- styles.css在夹具中检查/应用都默默地成功了。最终查询打印：
diff --git a/styles.css b/styles.css
index d443c7e..4dc8369 100644
--- a/styles.css
+++ b/styles.css
@@ -38,7 +38,7 @@ footer {
}
.hero {
- max-width: 44rem;
+ max-width: 48rem;
padding-block: 3rem;
}
git show :styles.css 必须等于上面完整的 CSS-02-INDEX。工作文件仍必须等于完整的 CSS-02-WORKING。 --cached patch 命令都不会写入有效的 CSS。
本机提交替代方案，应用程序成功后不重复：
git commit --quiet -m "feat: refine the hero and card spacing"
git status --short
git diff -- styles.css安静提交：exit 0，无输出。状态：
M styles.css完整的剩余工作差异：
diff --git a/styles.css b/styles.css
index 4dc8369..6382365 100644
--- a/styles.css
+++ b/styles.css
@@ -56,7 +56,7 @@ h1 {
.feature-card {
padding: 1rem;
border: 1px solid var(--line);
- border-radius: 0.5rem;
+ border-radius: 0.75rem;
background: var(--surface);
}
结果
本课结束时：main 上的三个提交。 HEAD/index 包含新的标题和更宽的英雄，但半径仍然是 0.5rem；工作半径为0.75rem。只有 styles.css 具有未暂存的修改。无需远程、合并或变基。可选的笔记本/干净替代品不会取代此检查点。
常见错误
- 仅选择替换的添加的一半：不一定是预期的补丁。
- 暂存整个 CSS 文件：也包括半径。
- 将目标索引 CSS 粘贴到工作 CSS 上：会丢失有意单独的编辑。
- 现在进行清理提交：与第 8 课的起始任务相矛盾。
如果出现问题
使用缓存/工作比较来诊断索引不匹配。在提交之前，Unstage Lines/Hunk 可以更改选择，而不会放弃工作编辑。如果 Git 拒绝格式错误或过时的补丁，请停止；不要强迫它。重新读取当前文件并重新选择准确的内容。失败的提交/挂钩不允许跳过挂钩。
检查你的理解情况
回答每个问题，然后阅读原因。标记为“必填”的问题将有助于完成本课程。
0 个（共 6 个）正确
正确回答所需的问题以完成课程。
在此浏览器中检查。
练习
使用完整文件解释三种不同的半径/宽度状态。更改的输入：如果您还暂存半径对，则下一次提交将包含 CSS 更改并且不会留下 CSS 差异。仅在单独的重播中进行测试；保留第 8 课的规范半径编辑。
您自己的确认：该网站无法看到您的计算机。
要完成本课程，请正确回答所需的问题并确认实践练习。
回顾
- 选择与预期更改相匹配的范围。
- 验证完整的准备文件和剩余的工作差异。
- 将独立有用的工作分开而不破坏它。
有关的
术语表介绍
猛男 — كר;选定的行 — 选项；舞台 — ЕЇив;取消舞台 — ?????????????????????????????????补丁 — ???;索引 — 索引。
视频文字记录
视频的旁白，逐条提示。
显示成绩单
- 准备一份零钱，同时 保留下一张。
- 附近的编辑可以属于 到不同的意图。
- 保存标题和 CSS 选择提交之前进行编辑。
- 在选择其中之一之前请先阅读这两项更改。
- 从孤立的开始 标题替换。
- 上演这个头条大佬， 不是不相关的文件更改。
- 保持完整的差异可见 用于线路选择。
- 替代品包括 删除并添加了行。
- 暂存宽度对，同时 将半径留在外面。
- 检查准备的内容并 其余内容分开。
- 取消暂存修复选择 而不丢弃工作文本。
- 整体选择是等效的 只为这个大块头。
- 清除复选框不会 取消暂存或删除内容。
- 原生补丁更新了 索引，而不是工作文件。
- 验证所选内容是否完整 文件，不仅仅是一个亮点。
- 半径属于哪个 准备好的快照？
- 提交标题和宽度， 留下半径供以后使用。
- 剩下的CSS编辑 是预期的结果。
- 下节课会记录 独立半径编辑。
- 如果您也选择半径， CSS diff 中没有任何内容。
- 更改后的差异需要新的 选择，而不是强制应用。
- 不要丢弃有用的工作 修复分阶段选择。
- 列出已准备好的和剩余的 在继续之前进行编辑。
- 保留半径编辑 下一个显式提交。