前置
【上一篇】完成了使用 Next.js 構建 blog。
注意
主題切換基于chakra-ui、tAIlwindcss(可選)，chakra-ui 和 tailwind.css 都內置支持顏色模式
chakra-ui 將顏色模式變量值存儲在localstorage中，以確保持久化
詳細文檔參考Color Mode
pnpm install react-icons
設置
新增utils/theme.ts
import {extendTheme, type ThemeConfig} from '@chakra-ui/react'
const theme = extendTheme({
config: {
initialColorMode: 'system',
useSystemColorMode: true
} as ThemeConfig,
fonts: {
heading: `'Dosis', sans-serif`
}
})
export default theme
修改_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 />
<body>
{/* Here's the script */}
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
<Main />
<NextScript />
</body>
</Html>
)
}
}
新增
components/DarkModeSwitch/index.tsx
import {useColorMode, Box} from '@chakra-ui/react'
import {BsMoonFill, BsFillSunFill} from 'react-icons/bs'
const DarkModeSwitch = () => {
const {colorMode, toggleColorMode} = useColorMode()
return (
<Box
as="div"
position="absolute"
top={4}
right={4}
zIndex={9999}
onClick={toggleColorMode}
>
{colorMode === 'light' ? (
<BsMoonFill size={18} />
) : (
<BsFillSunFill size={18} />
)}
</Box>
)
}
export default DarkModeSwitch
修改pages/_App.tsx
import dynamic from 'next/dynamic'
import Head from 'next/head'
import React from 'react'
import {ChakraProvider} from '@chakra-ui/react'
import theme from 'utils/theme'
// 新增
const DarkModeSwitch = dynamic(() => import('components/DarkModeSwitch'))
const App = ({Component, pageProps, router}) => {
const {route} = router
const url = `https://manon.icu${route}`
return (
<>
<Head>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=5"
/>
<meta httpEquiv="X-UA-Compatible" content="ie=edge" />
<meta name="description" content="Manon.icu,homepage" />
<title>Manon.icu | Home</title>
</Head>
<ChakraProvider theme={theme}>
{/* 新增 */}
<DarkModeSwitch />
<Component {...pageProps} canonical={url} key={url} />
</ChakraProvider>
</>
)
}
export default App
Source Code
好的 seo 將有助于提高網站權重，帶來更多流量。作為前端工程師的我們，就有著得天獨厚的優勢，我們不需要做到優化工程師的級別，我們只需要做好幾個方面，就能完成一個網站 80%左右的 SEO 優化工作了～因為我研究下來發現 SEO 針對點大部分都是前端基礎～
創建組件
創建components/SEO/index.tsx
import {NextSeo} from 'next-seo'
export default function SEO(props) {
const {url, cover, description, title} = props
return (
<NextSeo
titleTemplate="%s - Manon.icu"
openGraph={{
type: 'website',
url,
description:
description ??
'The personal website for Manon, Frontend Web Developer.',
site_name: title ?? 'Manon | manon.icu',
images: [
{
url: cover ?? 'https://pics-Rust.vercel.app/uPic/9oh25b.jpg',
width: 900,
height: 900
}
]
}}
canonical={url}
Twitter={{
handle: '@Manonicu',
cardType: 'summary_large_image'
}}
/>
)
}
修改pages/_app.tsx，引入components/SEO/index.tsx，在Head下添加 SEO 組件，組件加上 propsurl
在 blog 內頁同樣引入，分別傳入title、description、cover
// pages/[...slug].tsx
// <SEO
// title={title}
// description={description}
// cover={cover}
// openGraph={{title, description}}
// />
