大版面建立

建立 layout/default

<template>
  <Html lang="zh-Hant-TW">
    <Body class="wrapper">
      <div class="layout">
        <the-header/> <!-- app/components/TheHeader.vue -->
        <slot /> 
        <the-footer/> <!-- app/components/TheFooter.vue -->
      </div>
    </Body>
  </Html>
</template>

<!-- setup = composition  API 寫法 -->
<script setup lang="ts">
  const runtimeConfig = useRuntimeConfig();
  // 提取共用變數與計算屬性
  // runtimeConfig 會在 nuxt.config.ts 設定
  const baseUrl = runtimeConfig.public.baseUrl;
  
  useHead({
    link: [
      // 網頁頁籤 icon
      { rel: 'shortcut icon', type: 'image/x-icon', href: `${baseUrl}/favicon.ico` },
      // Google Fonts
      { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
      { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
      { 
        rel: 'preload', 
        as: 'style', 
        href: 'https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&display=swap' 
      },
      { 
        rel: 'stylesheet', 
        href: 'https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&display=swap',
        media: 'print',
        onload: "this.media='all'"
      },
      // 繼續增加其他 link
    ],
  });
</script>

有使用多國語言套件 `@nuxtjs/i18n`

<template>
  <!-- 隨著語言動態變化 -->
  <Html :lang="head.htmlAttrs?.lang" :dir="head.htmlAttrs?.dir">
    <Body class="wrapper">
      <div class="layout">
        <the-header/>
        <slot />
        <the-footer/>
      </div>
    </Body>
  </Html>
</template>

<script setup lang="ts">
  const runtimeConfig = useRuntimeConfig();
  // 設定可以使用 t("對照語言檔") 
  const { t } = useI18n();

  const baseUrl = runtimeConfig.public.baseUrl;
  
  // 初始化 Locale Head
  // addSeoAttributes: true 會讓 i18n 自動處理 canonical url 和 hreflang，
  // 如果你想要手動控制 url，可以保持原樣，但建議讓套件處理。
  const head = useLocaleHead({
    addDirAttribute: true,
    identifierAttribute: 'id',
    addSeoAttributes: true 
  });
  
  // 新增
  useHead(head);
  useHead({
    link: [
      { rel: 'shortcut icon', type: 'image/x-icon', href: `${baseUrl}/favicon.ico` },
      // Google Fonts 優化載入
      { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
      { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
      { 
        rel: 'preload', 
        as: 'style', 
        href: 'https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&display=swap' 
      },
      { 
        rel: 'stylesheet', 
        href: 'https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&display=swap',
        media: 'print',
        onload: "this.media='all'"
      },
    ],
  });
</script>

有使用 `@nuxtjs/seo`


<template>
  <Html :lang="head.htmlAttrs?.lang" :dir="head.htmlAttrs?.dir">
    <Body class="wrapper">
      <div class="layout">
        <the-header/>
        <slot />
        <the-footer/>
      </div>
    </Body>
  </Html>
</template>

<script setup lang="ts">
const runtimeConfig = useRuntimeConfig();
const { t } = useI18n();

const baseUrl = runtimeConfig.public.baseUrl;

const currentUrl = computed(() => {
  return head.value.htmlAttrs?.lang === 'en-US'
    ? `${baseUrl}/en`
    : baseUrl;
});

// 設定主要 SEO 資訊 (使用 useSeoMeta 簡化)
// 這會自動幫你生成 meta name="description", og:description, twitter:description
useSeoMeta({
  charset: 'utf-8', 
  viewport: 'width=device-width, initial-scale=1',
  title: () => t('websiteSetting.name'),
  description: () => t('websiteSetting.description'),
  keywords: () => t('websiteSetting.keywords'),
  author: () => t('websiteSetting.author'),
  copyright: () => t('websiteSetting.author'),
  formatDetection: 'telephone=no',

  // Open Graph
  ogType: 'website',
  ogUrl: currentUrl,
  ogTitle: () => t('websiteSetting.name'),
  ogDescription: () => t('websiteSetting.description'),
  
  // Twitter
  twitterCard: 'summary_large_image',
  twitterUrl: currentUrl,
  twitterTitle: () => t('websiteSetting.name'),
  twitterDescription: () => t('websiteSetting.description'),
  twitterCreator: () => t('websiteSetting.author'),
  
  // Apple / Mobile Specific
  mobileWebAppCapable: 'yes',
  appleMobileWebAppTitle: () => t('websiteSetting.name'),
  appleMobileWebAppStatusBarStyle: 'black',
  appleTouchFullscreen: 'yes',
});

const head = useLocaleHead({
  addDirAttribute: true,
  identifierAttribute: 'id',
  addSeoAttributes: true 
});
useHead(head);
useHead({
  link: [
    { rel: 'shortcut icon', type: 'image/x-icon', href: `${baseUrl}/favicon.ico` },
    { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
    { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
    { 
      rel: 'preload', 
      as: 'style', 
      href: 'https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&display=swap' 
    },
    { 
      rel: 'stylesheet', 
      href: 'https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&display=swap',
      media: 'print',
      onload: "this.media='all'"
    },
  ],
});

// 客製化動態產生社群分享圖
defineOgImageComponent("OgImageCustomTemplate", {
  title: (pageTitle: any) => {
    return pageTitle
      ? `${pageTitle} - ` + t("websiteSetting.name")
      : t("websiteSetting.name");
  },
});
</script>

Previous資料夾介紹 Next頁面建立

Last updated 27 days ago

Was this helpful?

Good night

hashtag建立 layout/default

hashtag有使用多國語言套件 @nuxtjs/i18narrow-up-right

hashtag有使用 @nuxtjs/seoarrow-up-right

建立 layout/default

有使用多國語言套件 `@nuxtjs/i18n`

有使用 `@nuxtjs/seo`