昨天聊到使用 Layout，讓編排版面更容易。今天就延伸昨日的成果，說明如何指定不同的 Layout 吧！

首先，倘若我今天有一個需求就是只在頁面顯示資訊，不要顯示 Header 和 Footer，這樣我就可以把在這個 Layout 下，客製化一些展示用的資訊。

先新增一個名為 info 的 Layout，路徑為 @/layouts/info.vue：

<template>
  <section class="mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-4xl xl:px-0 xl:text-lg">
    <div class="flex h-screen flex-col justify-between font-sans">
      <main class="mb-auto">
        <slot />
      </main>
    </div>
  </section>
</template>

接著新增一個名為 me 的 page，路徑為 @/page/me.vue。並在 @/public/img 目錄下放置一個 avatar.png 的頭像圖檔。

<template>
  <div class="flex h-screen">
    <div class="m-auto md:mt-24 text-center">
      <div>
        <NuxtLink to="/">
          <div class="pb-5 text-center">
            <img
              src="/img/avatar.png"
              alt="avatar"
              class="rounded-full h-48 mx-auto"
            />
          </div>
          <div class="justify-center">
            <h1 class="text-3xl">Yuehu Lin</h1>
          </div>
          <div class="justify-center">
            <p class="text-xl">Ironman 2023</p>
          </div>
        </NuxtLink>
      </div>
    </div>
  </div>
</template>

<script setup>
definePageMeta({
  layout: "info",
});
</script>

這樣我就做出一個類似名片的頁面，點選頭像就可以進到 Digital Garden 囉！

這個範例就展示了透過 definePageMeta() 的方式在當前頁面更換 layout。

definePageMeta({
  layout: "layout-name",
});

另外也可以在使用 <PageLayout /> 時去指定，但在本次案例就難以配合，兩者適用的情境不太一樣。

<template>
  <NuxtLayout layout="info">
    <NuxtPage/>
  </NuxtLayout>  
</template>