為了提高專案維護性，我們可以將重複的部分提取到 layout 和 components 中。

Components

navbar.vue

<template>
  <header class="bg-white shadow p-4">
    <nav class="container mx-auto flex justify-between items-center">
      <div class="text-2xl font-bold">
        <NuxtLink to="/">My Blog</NuxtLink>
      </div>
      <div>
        <NuxtLink to="/about" class="text-gray-600 hover:text-black">About</NuxtLink>
        <NuxtLink to="/contact" class="ml-4 text-gray-600 hover:text-black">Contact</NuxtLink>
      </div>
    </nav>
  </header>
</template>

Pages

index.vue

<template>
    <main class="container mx-auto flex mt-8">
      <!-- Blog content -->
      <div class="w-full lg:w-2/3">
        <article class="bg-white p-6 rounded-lg shadow mb-8">
          <h1 class="text-3xl font-bold mb-4">Blog Post Title</h1>
          <p class="text-gray-700">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec nisl a augue viverra sollicitudin. Duis aliquet ex non dui convallis, vel lacinia sapien blandit...
          </p>
        </article>

        <article class="bg-white p-6 rounded-lg shadow mb-8">
          <h1 class="text-3xl font-bold mb-4">Another Blog Post Title</h1>
          <p class="text-gray-700">
            Phasellus ac libero at sapien vestibulum egestas. Proin luctus augue a orci ornare tincidunt...
          </p>
        </article>
      </div>

      <!-- Sidebar -->
      <aside class="hidden lg:block lg:w-1/3 pl-6">
        <div class="bg-white p-6 rounded-lg shadow mb-8">
          <h2 class="text-2xl font-bold mb-4">Popular Posts</h2>
          <ul class="list-disc pl-5">
            <li><a href="#" class="text-blue-500 hover:underline">How to learn Vue.js in 2024</a></li>
            <li><a href="#" class="text-blue-500 hover:underline">Getting started with Nuxt 4</a></li>
            <li><a href="#" class="text-blue-500 hover:underline">Best Tailwind CSS practices</a></li>
          </ul>
        </div>
      </aside>
    </main>
</template>

about.vue

<template>
    <main class="container mx-auto flex flex-col items-center mt-12">
      <!-- About content -->
      <div class="w-full lg:w-2/3 bg-white p-8 rounded-lg shadow">
        <h1 class="text-3xl font-bold mb-6 text-center">About Me</h1>
        <div class="flex flex-col lg:flex-row items-center lg:items-start">
          <!-- Profile image -->
          <div class="lg:w-1/3 flex justify-center mb-8 lg:mb-0">
            <img
                class="w-48 h-48 rounded-full object-cover border-4 border-gray-300"
                src="https://via.placeholder.com/150"
                alt="Author's Profile Picture"
            />
          </div>
          <!-- Profile details -->
          <div class="lg:w-2/3 lg:pl-12 text-gray-700">
            <p class="mb-4">
              Hi, I'm <strong>打工人</strong>, a passionate writer and developer with a love for technology and storytelling.
              I started this blog as a place to share my thoughts, tips, and lessons learned from my experiences in the tech industry.
            </p>
            <p class="mb-4">
              Over the years, I've worked with various technologies, specializing in front-end development, especially using Vue.js, Nuxt, and Tailwind CSS.
              Through this blog, I hope to help fellow developers improve their skills and find inspiration for their own projects.
            </p>
            <p class="mb-4">
              In my free time, I enjoy reading, learning new frameworks, and exploring the outdoors. Thank you for stopping by,
              and feel free to connect with me through the Contact page!
            </p>
          </div>
        </div>
      </div>
    </main>
</template>

Layout

default.vue

<template>
  <div class="min-h-screen bg-gray-100">
    <Navbar />
    <slot />
  </div>
</template>

app.vue

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>