【上一篇】完成了使用 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
// 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}}
// />
京公网安备 11010802035086号