给Blog添加主题模式和seo

Manon

前置

【上一篇】完成了使用 Next.js 构建 blog。

注意

主题切换基于chakra-uitailwindcss(可选),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.jsimport {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 (<Boxas="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}) =>icu${route}`return (<><Head><metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=5"/><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} = propsreturn (<NextSeotitleTemplate="%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 ?? '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 内页同样引入,分别传入titledescriptioncover

// pages/[...slug].tsx// <SEO//title={title}//description={description}//cover={cover}//openGraph={{title, description}}// />

版权声明:给Blog添加主题模式和seo内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,请联系 删除。本文链接:https://www.qi520.com/n/16362.html