iT邦幫忙

2021 iThome 鐵人賽

DAY 26
0
Modern Web

製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ~系列 第 26

#26 No-code 之旅 — 實作 Dark Mode 和加入 Google Fonts ft. Chakra UI

連假結束了Q 今天來講怎麼實作 dark mode 還有怎麼使用 Google Fonts 讓網站看起來更好看!我們會用 Chakra UI 去實作 dark mode 功能,所以還不知道 Chakra UI 的大家可以看這兩篇簡介文客製化篇

Fonts

Font Optimization

Next.js 有提供內建的字體效能優化,不過目前只支援 Google Fonts 和 Typekit,當然還是可以用其他的字體庫,只是不會被優化喔~ Next.js 在 build 過程中會自動把字體的 <link> 轉成 inline font CSS。這麼做會減少 First Contentful Paint (FCP)Largest Contentful Paint (LCP) 的時間,讓使用者可以比較快看到網頁。

<!-- 前 -->
<link
  href="https://fonts.googleapis.com/css2?family=Poppins"
  rel="stylesheet"
/>

<!-- 後 -->
<style data-href="https://fonts.googleapis.com/css2?family=Poppins">
  @font-face{font-family:'Poppins';font-style:normal...
</style>

加入 Google Fonts

那怎麼把 Google Fonts 加入到專案裡呢?有兩種方式,第一是如果字體只會用在單一頁面,那可以放在該 page 的 <Head> 裡:

<!-- pages/index.js -->
<Head>
  <link
    href="https://fonts.googleapis.com/css2?family=Poppins&display=optional"
    rel="stylesheet"
  />
</Head>

可是如果想要在整個專案裡用字體,可以加在我們做的 Custom Document

// pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link
            href="https://fonts.googleapis.com/css2?family=Poppins&display=optional"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

不想要用字體優化的話,可以在 next.config.js 裡設定喔:

module.exports = {
  optimizeFonts: false,
}

使用 Google Fonts

把字體加入到專案之後,該怎麼使用呢?因為這專案採用 Chakra UI,所以我們可以延伸 Chakra UI 的 theme

// config/theme.js
import { extendTheme } from "@chakra-ui/react";

// 延伸 Chakra UI 的 global styles
const styles = {
  global: {
    body: {
      // 設定整個 body 的 fontFamily
      fontFamily: "'Poppins', sans-serif",
    },
  },
};

const theme = extendTheme({ styles });

export default theme;

那現在我們要把新的 theme 塞給 ChakraProvider,讓所有 components 可以吃到最新的 custom global styles:

import { ChakraProvider } from "@chakra-ui/react"
import theme from "config/theme"

function MyApp({ Component, pageProps }) {
  return (
    // 提供 custom theme 給 ChakraProvider
    <ChakraProvider theme={theme}>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default MyApp

Dark Mode

在之前的客製化篇提過怎麼使用 Chakra UI 的 color mode,今天快速複習一下,在 config/theme.js 加:

// config/theme.js
import { extendTheme } from "@chakra-ui/react";

const styles = {...};

const config = {
  initialColorMode: "light", // 設定預設的模式
  useSystemColorMode: false, // 要不要跟著使用者系統的 color mode
}

// 把 config 加進 theme 裡
const theme = extendTheme({ config, styles });

export default theme;

然後我們要加 ColorModeScript 到 Next.js 的 custom document (pages/_document.js) 裡:

// pages/_document.js

import { ColorModeScript } from "@chakra-ui/react"
import NextDocument, { Html, Head, Main, NextScript } from "next/document"
import theme from "./theme"

export default class Document extends NextDocument {
  render() {
    return (
      <Html lang="en">
        <Head>...字體!...</Head>
        <body>
          // body 裡的第一個~
          <ColorModeScript initialColorMode={theme.config.initialColorMode} />
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

最後我們要加一個按鈕讓使用者切換模式,我們可以使用 Chakra UI 提供的其中一個 hook,useColorMode

import { Button } from "@chakra-ui/button";
import { useColorMode } from "@chakra-ui/color-mode";
import { Container } from "@chakra-ui/layout";
import React from "react";

function AppFrame({ children }) {
  // 使用 Chakra UI 提供的 useColorMode
  // colorMode:現在的模式
  // toggleColorMode:切換模式的 function
  const { colorMode, toggleColorMode } = useColorMode();

  return (
    <Container p="6">
      <Button mb="4" onClick={toggleColorMode}>
        Toggle {colorMode === "light" ? "Dark" : "Light"}
      </Button>
      {children} // 網頁內容~
    </Container>
  );
}
export default AppFrame;

耶~ 做完了,可以看下面的圖!

Dark mode

小結

越來越多網站有提供 dark mode 了,尤其是這種部落格網站很需要長時間閱讀的,加了 dark mode 功能應該會讓使用者開心 (吧?XD) 而且用 Chakra UI 真的很方便~ 也使用了比較可愛的字體 (Poppins),現在剩下整個網站的樣式設計。設計好難Q

大家想要看看之前的網站可以看這裡,或是直接到首頁~ 有任何問題可以問我,或是也可以討論未來要開發的 No-code 專案喔。

祝大家上班上課愉快!

晚安 <3

看更多


上一篇
#25 No-code 之旅 — 實作 Notion 部落格 Pagination (分頁) 功能 ft. SWR
下一篇
#27 No-code 之旅 — 客製化 Favicon ~
系列文
製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ~30

尚未有邦友留言

立即登入留言