天天看點
傳回

給Blog添加主題模式和seo

作者：Manon
給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.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}}
// />
主題模式 log添加
上一篇: 戴爾筆記本重裝系統按f幾進入
下一篇: DF啟停蓄電池好在哪？本文來揭秘

繼續閱讀