Nuxt.js頭部魔法：輕鬆自定義頁面元資訊，提升使用者體驗

Amd794發表於2024-07-16
UXJS

image
image

掃描二維碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長

useHead 函式概述

useHead是一個用於在 Nuxt 應用中自定義頁面頭部屬性的函式。它由Unhead庫提供支援，允許開發者以程式設計和響應式的方式設定每個頁面的頭部資訊。

useHead 函式型別

useHead(meta: MaybeComputedRef<MetaObject>): void

MetaObject 介面

MetaObject介面定義了可以傳遞給useHead的屬性型別，如下所示：

interface MetaObject {
  title?: string;
  titleTemplate?: string | ((title?: string) => string);
  base?: Base;
  link?: Link[];
  meta?: Meta[];
  style?: Style[];
  script?: Script[];
  noscript?: Noscript[];
  htmlAttrs?: HtmlAttributes;
  bodyAttrs?: BodyAttributes;
}

引數

meta

型別：MetaObject

MetaObject是Unhead庫中的一個物件型別，用於封裝和管理頁面頭部的後設資料。Unhead是一個用於構建動態、可配置的 HTML
頭部的庫，它允許開發者在 Nuxt.js 應用中靈活地控制頁面的元資訊。

接受以下頭部後設資料的物件：

title

title屬性用於設定頁面的靜態標題。當使用者在瀏覽器中開啟頁面時，顯示在瀏覽器標籤或書籤中的標題就是由這個屬性決定的。例如，如果你想為你的頁面設定標題為“我的頁面”，可以這樣設定：

useHead({
  title: '我的頁面'
});

titleTemplate

titleTemplate屬性允許你使用動態模板來生成標題。這可以是一個字串模板或者一個函式，該函式接收一個引數（通常是當前的標題）並返回一個新的標題字串。

字串模板：

useHead({
  titleTemplate: '這是我的頁面 - {{title}}'
});

函式模板：

const getTitle = (title) => `這是我的頁面 - ${title}`;
useHead({
  titleTemplate: getTitle
});

base

base屬性用於設定<base>標籤的屬性，通常用於指定頁面中相對連結的基礎 URL。例如，如果你的頁面是https://example.com
，並且你有一個連結指向/blog，那麼使用<base href="/blog">可以確保所有相對連結都從/blog開始。

useHead({
  base: { href: '/blog' }
});

link屬性是一個陣列，每個元素都是一個<link>標籤的配置物件。這些物件通常包含rel、href、type
等屬性，用於定義外部樣式表、指令碼檔案或其他資源的連結。

useHead({
  link: [
    { rel: 'stylesheet', href: '/styles.css' },
    { rel: 'preload', href: '/fonts/roboto.woff2', as: 'font' }
  ]
});

meta

meta屬性也是一個陣列，每個元素都是一個<meta>標籤的配置物件。這些物件通常包含name、content、http-equiv
等屬性，用於定義元資訊，如描述、關鍵詞、字符集等。

style

script

noscript

htmlAttrs 和 bodyAttrs

示例：

餘下文章內容請點選跳轉至 個人部落格頁面 或者 掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長，閱讀完整的文章：Nuxt.js頭部魔法：輕鬆自定義頁面元資訊，提升使用者體驗 | cmdragon's Blog

往期文章歸檔：

  • 探索Nuxt.js的useFetch：高效資料獲取與處理指南 | cmdragon's Blog
  • Nuxt.js 錯誤偵探：useError 組合函式 | cmdragon's Blog
  • useCookie函式：管理SSR環境下的Cookie | cmdragon's Blog
  • 輕鬆掌握useAsyncData獲取非同步資料 | cmdragon's Blog
  • 使用 useAppConfig ：輕鬆管理應用配置 | cmdragon's Blog
  • Nuxt框架中內建元件詳解及使用指南（五） | cmdragon's Blog
  • Nuxt框架中內建元件詳解及使用指南（四） | cmdragon's Blog
  • Nuxt框架中內建元件詳解及使用指南（三） | cmdragon's Blog
  • Nuxt框架中內建元件詳解及使用指南（二） | cmdragon's Blog
  • Nuxt框架中內建元件詳解及使用指南（一） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（十一） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（十） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（九） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（八） | cmdragon's Blog

相關文章