RemixJS 2 裡的 link 和 meta 標籤
SSR 的特色是可以讓每個頁面擁有各自的 SEO 設定，同時也可以有各自的 link 和 meta 設定。
link 標籤
可以在 root.tsx 使用 links() 設定整個網站都通用的 link 標籤。
export const links: LinksFunction = () => [
...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
{
rel: "stylesheet",
href: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css",
},
{
rel: "stylesheet",
href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css",
},
];
在 Layout 架構中，links() 的功能是堆疊起來的，以下式的架構來說明。
app/root.tsx
app/routes/address-book.tsx
app/routes/address-book.add.tsx
/address-book/add 的頁面最後取得的 link 標籤會依序是三個檔加起來的設定。
meta 標籤
meta 標籤的運作則和 link 標籤不同，在 root.tsx 可以直接設定全站的 meta 標籤。
<Meta /> 是用來載入子元件的 meta 設定。
// root.tsx 片段
export default function App() {
const loaderData = useLoaderData<typeof loader>()
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
<Outlet />
<ScrollRestoration />
<Scripts />
<LiveReload />
</body>
</html>
);
}
但在 Layout 的結構中，meta() 並不會疊加之前的設定，而是以最後設定的為主。
另外，在同一個檔案 loader() 會比 meta() 先執行，所以 meta() 可以收到 loader() 回傳的資料。
export const meta: MetaFunction = ({ data, params, location, matches }) => {
console.log("address-book meta");
console.log(data); // { shin: "der" }
return [
{ title: "通訊錄" },
{ name: "keyword", content: "address-book" },
{ name: "name", content: "shin" },
];
};
export async function loader({ request, params }: LoaderFunctionArgs) {
console.log("address-book loader");
return { shin: "der" };
}
沒有留言:
張貼留言