江苏龙网

  1. 主页 > 生活百科 > >

使用Next.js创建Blog给Blog添加主题模式和seo

next.js


使用Next.js创建Blog给Blog添加主题模式和seo

文章插图
 
前置【上一篇】完成了使用 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.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}) => {const {route} = routerconst url = `https://manon.icu${route}`return (<><Head><metaname="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 AppSource 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 ?? '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}}// />
【使用Next.js创建Blog给Blog添加主题模式和seo】


    推荐阅读


    上一篇：使用Next.js创建Blog

    下一篇：从 Uber 数据泄露事件我们可以学到什么？