Refactor navigation: create Navigation component and update pages to use it

2026-05-12 15:21:19 +09:00 · 2025-12-22 17:55:26 +07:00
parent a383f01141
commit c3f6ddabb7
4 changed files with 18 additions and 12 deletions
@@ -0,0 +1,7 @@
+---
+
+---
+
+<a href='/'>Home</a>
+<a href='/about/'>About</a>
+<a href='/blog/'>Blog</a>
@@ -1,4 +1,5 @@
 ---
+import Navigation from "../components/Navigation.astro";
 import "../styles/global.css";

 const pageTitle = "About Me";
@@ -46,9 +47,7 @@ const textCase = "uppercase";
    </style>
  </head>
  <body>
-    <a href='/'>Home</a>
-    <a href='/about/'>About</a>
-    <a href='/blog/'>Blog</a>
+    <Navigation />
    <h1>{pageTitle}</h1>
    <h2>... and my new Astro site!</h2>

@@ -1,5 +1,6 @@
 ---
-
+import Navigation from "../components/Navigation.astro";
+import "../styles/global.css";
 ---

 <html lang='en'>
@@ -11,9 +12,7 @@
    <title>About</title>
  </head>
  <body>
-    <a href='/'>Home</a>
-    <a href='/about/'>About</a>
-    <a href='/blog/'>Blog</a>
+    <Navigation />
    <h1>My Astro Learning Blog</h1>
    <p>This is where I will post about my journey learning Astro.</p>
    <ul>
@@ -1,5 +1,8 @@
 ---
+import Navigation from "../components/Navigation.astro";
+import "../styles/global.css";

+const pageTitle = "Thuan's Astro Page";
 ---

 <html lang='en'>
@@ -8,12 +11,10 @@
    <link rel='icon' type='image/svg+xml' href='/favicon.svg' />
    <meta name='viewport' content='width=device-width' />
    <meta name='generator' content={Astro.generator} />
-    <title>Astro</title>
+    <title>{pageTitle}</title>
  </head>
  <body>
-    <a href='/'>Home</a>
-    <a href='/about/'>About</a>
-    <a href='/blog/'>Blog</a>
-    <h1>Thuan's Astro Page</h1>
+    <Navigation />
+    <h1>{pageTitle}</h1>
  </body>
 </html>