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

2022-11-25 今日头条 Manon

加入收藏

前置

【上一篇】完成了使用 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}}
// />