iT邦幫忙

2022 iThome 鐵人賽

DAY 17
0
Modern Web

Full Stack Web Development 網站實作系列 第 17

Day 17 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (9) -- Head 元件

  • 分享至 

  • xImage
  •  

更改網頁的 title,建立 Meta 元件:
(1)更改網頁 title 及其他 meta 資料
(2)更改 Contact Us 網頁 title
(3)更改個別圖片明細網頁 title
加入 Footer。

(1)新增 /components/Meta.js 檔案,使用 Next 的 Head 元件,來修改網頁 head 的資料。

// Meta.js
import Head from "next/head"

const Meta = ({ keywords, description, title }) => {
  return (
    <Head>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta name="keywords" content={keywords} />
      <meta name="description" content={description} />
      <meta charSet="utf-8" />
      <link rel="stylesheet" href="/favicon.ico" />
      <title>{title}</title>
    </Head>
  );
}

Meta.defaultProps = {
  title: '彰化福興穀倉華國美學',
  keywords: '福興穀倉, 華國美學, 日本時代建築, 歷史建築, 彰化縣文化局, 鐵皮',
  description: '彰化文化局官方華国美学, 日本時代歷史建築鐵皮加好加満'
}

export default Meta

加 Meta 元件,到 /components/Layout.js:

// Layout.js
import Navbar from "./Navbar";
import Meta from "./Meta";

const Layout = ({ children }) => {
  return (
    <>
      <Meta />  // 加入 Meta 元件
      <Navbar />
      <main>
        {children}
      </main>
    </>
  );
};

export default Layout;

網頁 title。由原本的 localhost:3000, 變成我們 Meta 程式內設定的 title 值了。
https://ithelp.ithome.com.tw/upload/images/20221002/20129584W7fdGcUpnq.png

(2)當我們進到 Contact Us 頁面時,希望網頁title 也是 Contact Us。修改 /pages/contact.js,加入 Meta 元件。

import Meta from "../components/Meta";

const contact = () => {
  return (
    <div className="text-center mt-20">
      <Meta title="contact Us" />    // 加入 Meta 元件
      <h1 className="text-4xl fond-bold">Contact Us</h1>
    </div>
  );
};

export default contact;

https://ithelp.ithome.com.tw/upload/images/20221002/20129584FhVf2oRdjz.png

(3)進到圖卡明細頁面時,希望網頁 title 也是圖片的 title 資料。修改 /pages/image/[id]/index.js ,加入 Meta 元件。

import { supabaseAdmin } from "../../../client";
import Image from "next/image"
import Meta from "../../../components/Meta"

const Twimg = ({ twimg }) => {
  return (
    <div className="container max-w-4xl mx-auto pt-6">
      <Meta title={twimg.title} />     // 加入 Meta 元件
      <div className="px-3">
  ....

可以看到 HTML 的 head 資料都改成我們的設定值了。
https://ithelp.ithome.com.tw/upload/images/20221002/2012958496OZIkId3u.png

加入 Footer:
新增 /components/Footer.js 檔案,內容如下:

// Footer.js
const Footer = () => {
  return (
    <div className="text-center h-32 flex items-center justify-center">
      <p className="text-xl text-gray-800">&copy; Copyright 2022 
        <span className="font-bold">Jabi</span></p>
    </div>
  );
}

export default Footer;

加 Footer 元件,到 /components/Layout.js:

// Layout.js
import Navbar from "./Navbar";
import Meta from "./Meta";
import Footer from "./Footer"

const Layout = ({ children }) => {
  return (
    <>
      <Meta />
      <Navbar />
      <main>
        {children}
      </main>
      <Footer />  // 加入 Footer 元件
    </>
  );
};

export default Layout;

https://ithelp.ithome.com.tw/upload/images/20221002/201295845SrMw4dmFj.png


上一篇
Day 16 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (8) -- 顯示 Supabase 資料在螢幕上
下一篇
Day 18 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (10) -- API 元件
系列文
Full Stack Web Development 網站實作30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言