Salva il pezzo selezionato, non l'intero file

• Scegli l'ambito file, pezzo o linea per un commit specifico.
• Seleziona entrambe le righe rimosse/aggiunte per una sostituzione.
• Leggi l'indice e i contenuti di lavoro in modo indipendente.
• Mantieni la modifica del raggio non vincolata per la lezione 8.

Inizi da dove è terminata la lezione 6: il main originale ha due commit, gli input eseguibili della lezione 6 e nessun telecomando. Lavoro/indice pulito; può esistere dist ignorato. Il video è stato registrato con Git 2.52.0 e GitTree 2.0 su Ubuntu 24.04: entrambe le modifiche sono state salvate nell'editor di GitTree, il pezzo e le battute sono stati messi in scena e il commit è stato effettuato nell'app, e i controlli del terminale sono stati eseguiti rispetto a ciò che l'app ha creato o rispetto a copie separate. I controlli del pezzo e della linea venivano gestiti per davvero; il percorso della patch nativa veniva eseguito in una copia separata. Non è stato eseguito nulla su macOS o Windows e Ubuntu è l'unico sistema Linux registrato. Il minimo Git di origine di GitTree è 2.39.0. Una volta effettuato l'accesso, il lavoro locale rientra nel piano gratuito.

Un fascicolo può contenere diverse decisioni indipendenti. Un pezzo raggruppa cambiamenti testuali vicini, non necessariamente un'intenzione commerciale. La selezione di una sostituzione richiede la vecchia riga rimossa and la nuova riga aggiunta; scegliendo solo l'aggiunta è possibile creare una patch diversa.

L'indice descrive un albero successivo completo, anche quando si selezionano solo poche righe modificate. Qui HEAD ha CSS-01, l'indice diventa CSS-02-INDEX e il CSS funzionante rimane CSS-02-WORKING. Il salvataggio delle modifiche modifica i byte di lavoro; Stage Lines cambia l'indice; il commit normale si sposta sul main ma non sovrascrive il raggio rimanente. Nessun cambiamento di riferimento remoto. Staging parziale nativo e applicazione patch utilizzano le stesse distinzioni di contenuto.

Sostituisci index.html con HTML-02-HEADLINE e working stili.css con CSS-02-WORKING. CSS-02-INDEX di seguito è il target index, non un corpo con cui sovrascrivere il file di lavoro.

indice.html — HTML-02-HEADLINE

<!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>

stili.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;
}

stili.css — CSS-02-WORKING

: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;
}

1. In Show Files (Comando/Ctrl+Maiusc+E), seleziona ogni file esistente e premi Invio; incolla il corpo di lavoro indicato, quindi Save o Comando/Ctrl+S. Non incollare la destinazione dell'indice sul CSS funzionante.
2. Back to Graph → Tavolozza dei comandi… (Comando/Ctrl+Maiusc+P) → Show Working Changes. Fai clic su index.html sotto Unstaged Files.
3. Scegli Hunk nella visualizzazione Diff (tavolozza Show Diff as Hunks). Alla sostituzione del titolo scegli Stage Hunk. Aspettatevi solo il cambiamento completo del titolo in Staged Files. Il file intero Stage File sarebbe equivalente solo perché questo HTML non ha altre modifiche.
4. Fai clic su stili.css in File non gestiti. Tieni Ignore whitespace spento. Trova la sostituzione della larghezza massima alla riga 41: 44rem → 48rem.
5. Seleziona la casella di controllo per la riga max-width: 44rem; rimossa e la riga max-width: 48rem; aggiunta. I nomi accessibili includono segno, numero di riga e testo. Attiva Stage Lines nella barra degli strumenti di selezione. Non scegliere la coppia di raggi alla riga 59.
6. Alternativa in un replay separato: Stage Hunk solo sul pezzo di larghezza massima fornisce lo stesso obiettivo qui. Split/palette Show Diff Side by Side mette le celle rimosse/aggiunte sul lato vecchio/nuovo corretto; entrambi hanno i propri controlli di selezione. Ritorna da Hunk per la ripresa principale.
7. Fai clic su stagedstyles.css: dovrebbe cambiare solo la larghezza massima. Fai clic su stili.css senza stage: rimane solo il raggio. Utilizza Clear per cancellare una selezione, non per eliminare il contenuto. Se hai messo troppo stage, seleziona il pezzo di stage rilevante e Unstage Hunk o scegli entrambe le righe di sostituzione staged e Unstage Lines, quindi ricontrolla.
8. Inserisci Riepilogo feat: refine the hero and card spacing, opzioni ordinarie tutte disattivate e Commit Changes to 2 Files (o Comando/Ctrl+Invio una volta). Verifica il commit parziale e mantieni il raggio non gestito.
9. Non utilizzare Stage All Changes, Elimina o effettuare un commit di pulizia. la lezione 8 possiede deliberatamente il commit del raggio.

Una selezione obsoleta è legata all'impronta digitale diff; ricarica dopo qualsiasi modifica esterna invece di applicare una patch destinata ai vecchi byte. Se nascondere gli spazi bianchi rimuove l'idoneità alla selezione della riga, leggi il motivo e ripristina l'intero diff invece di fingere che la scelta sia avvenuta.

Dopo aver salvato entrambe le modifiche:

git diff -- styles.css

Differenza di lavoro completamente osservata:

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);
 }
 

Percorso interattivo nativo: git add -p -- index.html seleziona il pezzo del titolo. git add -p -- styles.css può accettare il primo pezzo e rifiutare il pezzo del raggio. Le istruzioni variano in base alla versione di Git; ispezionare il contenuto prima di rispondere, non una sequenza sì/no memorizzata.

Un equivalente nativo deterministico consiste nel salvare la seguente patch completa outside del progetto come <selection.patch> e applicarla solo all'indice:

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

Entrambi i check/apply sono riusciti silenziosamente nell'incontro. La query finale stampata:

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 deve corrispondere al CSS-02-INDEX completo sopra. Il file di lavoro deve comunque essere completo CSS-02-WORKING. Nessuno dei due comandi patch --cached scrive CSS funzionanti.

Alternativa al commit nativo, non una ripetizione dopo il successo dell'app:

git commit --quiet -m "feat: refine the hero and card spacing"
git status --short
git diff -- styles.css

Commit silenzioso: uscita 0, nessun output. Stato:

 M styles.css

Differenza di lavoro rimanente completa:

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);
 }
 

Alla fine di questa lezione: tre commit su main. HEAD/index contiene il nuovo titolo e un hero più ampio, ma il raggio è ancora di 0,5 rem; il raggio di lavoro è 0,75 rem. Solo stili.css ha una modifica senza fasi. Nessun remoto, fusione o rebase. Le alternative facoltative notebook/pulite non sostituiscono questo checkpoint.

• Selezionare solo la metà aggiunta di una sostituzione: non necessariamente la patch prevista.
• Staging dell'intero file CSS: include anche il raggio.
• Incollare il CSS dell'indice di destinazione sul CSS funzionante: perde la modifica intenzionalmente separata.
• Effettuare un commit di pulizia adesso: contraddice l'attività iniziale della lezione 8.

Utilizzare confronti memorizzati nella cache/funzionanti per diagnosticare una mancata corrispondenza dell'indice. Prima del commit, Unstage Lines/Hunk può modificare la selezione senza scartare la modifica funzionante. Se Git rifiuta una patch malformata o obsoleta, fermati; non forzarlo. Rileggere il file corrente e riselezionare il contenuto esatto. Un commit/hook fallito non consente di saltare gli hook.

Rispondi a ciascuna domanda, quindi leggi il motivo. Le domande contrassegnate come "Obbligatorio" contano ai fini del completamento della lezione.

1. Domanda 1 di 6

   Domanda 1 di 6

   Cosa definisce un fusto?

   Scegli una risposta.

   Una caratteristica intera sempre

   Un ramo

   Contesto differenziale nelle vicinanze

   Controlla la risposta
2. Domanda 2 di 6

   Domanda 2 di 6

   Alla scena 44rem → 48rem, quali versi appartengono?

   Scegli ogni risposta applicabile.

   Rimosso 44rem

   Anche la coppia di raggi

   Aggiunto 48rem

   Controlla la risposta
3. Domanda 3 di 6

   Domanda 3 di 6Obbligatorio

   Dopo la selezione parziale, cosa sono la larghezza e il raggio nell'indice?

   Scegli una risposta.

   48rem e 0,5rem

   48rem e 0,75rem

   44rem e 0,75rem

   Controlla la risposta
4. Domanda 4 di 6

   Domanda 4 di 6Obbligatorio

   Se metti in scena anche il raggio prima di impegnarti, cosa rimane?

   Scegli una risposta.

   Un nuovo telecomando

   Radius ancora non messo in scena

   Nessuna differenza CSS

   Controlla la risposta
5. Domanda 5 di 6

   Domanda 5 di 6

   Un salvataggio esterno modifica la differenza selezionata. Cosa è sicuro?

   Scegli una risposta.

   Forza la vecchia patch

   Scartare l'intero file

   Ricarica/riseleziona i byte correnti

   Controlla la risposta
6. Domanda 6 di 6

   Domanda 6 di 6Obbligatorio

   Controlla il checkpoint finito. Quali prove corrispondono?

   Scegli ogni risposta applicabile.

   Tre commit; Larghezza TESTA/indice 48rem, raggio 0,5rem

   Un commit di pulizia ha già salvato il raggio

   Raggio di lavoro 0,75 rem; modificato solo styles.css

   Controlla la risposta

Spiegare i tre diversi stati di raggio/larghezza utilizzando i file completi. Input modificato: se metti in scena anche la coppia di raggi, il commit successivo contiene entrambe le modifiche CSS e non lascia alcuna differenza CSS. Provalo solo in un replay separato; mantieni la modifica del raggio canonico per la lezione 8.

• Seleziona l'ambito che corrisponde alla modifica prevista.
• Verificare il file preparato completo e il diff di lavoro rimanente.
• Mantieni separato il lavoro utile in modo indipendente senza distruggerlo.

• Leggi il confronto prima di giudicare un cambiamento (lezione 6)
• Mettere in scena lo snapshot desiderato ed effettuare il primo commit (lezione 5)
• Scarica GitTree

Hunk: كتلة; linee selezionate — الأسطر المختارة; stadio: تجهيز; unstage: إلغاء التجهيز; toppa: رقعة; indice — الفهرس.