feat: react helmet seo perfect

Author: fecommunity

client/pages/archives/index.tsx

@@ -3,6 +3,7 @@ import { NextPage } from 'next';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { useContext } from 'react';
+import { Helmet } from 'react-helmet';
 
 import { ListTrail } from '@/components/Animation/Trail';
 import { ArticleRecommend } from '@/components/ArticleRecommend';
@@ -69,6 +70,9 @@ const Archives: NextPage<IProps> = ({ articles }) => {
       <DoubleColumnLayout
         leftNode={
           <div className={style.content}>
+            <Helmet>
+              <title>{`${t('archives')} - ${setting.systemTitle}`}</title>
+            </Helmet>
             <div className={style.summary}>
               <p>
                 <span>{t('archives')}</span>

client/pages/article/[id].tsx

@@ -83,7 +83,7 @@ const Article: NextPage<IProps> = ({ article }) => {
     <>
       {checkPassWordModal}
       <Helmet>
-        <title>{(article?.title || t('unknownTitle')) + ' | ' + setting.systemTitle}</title>
+        <title>{(article?.title || t('unknownTitle')) + ' - ' + setting.systemTitle}</title>
       </Helmet>
       <ImageViewer containerSelector="#js-article-wrapper">
         <article id="js-article-wrapper" className={style.articleWrap}>

client/pages/category/[category].tsx

@@ -3,6 +3,7 @@ import { Tags } from '@components/Tags';
 import { NextPage } from 'next';
 import { useTranslations } from 'next-intl';
 import { useCallback, useContext, useEffect, useState } from 'react';
+import { Helmet } from 'react-helmet';
 import InfiniteScroll from 'react-infinite-scroller';
 
 import { ArticleRecommend } from '@/components/ArticleRecommend';
@@ -49,6 +50,9 @@ const Home: NextPage<IProps> = ({ articles: defaultArticles = [], total, categor
 
   return (
     <div className={style.wrapper}>
+      <Helmet>
+        <title>{`${category?.label} - ${t('categoryArticle')} - ${setting.systemTitle}`}</title>
+      </Helmet>
       <DoubleColumnLayout
         leftNode={
           <>

client/pages/knowledge/[pId]/[id]/index.tsx

@@ -2,9 +2,10 @@ import { LeftOutlined, RightOutlined } from '@ant-design/icons';
 import { Breadcrumb } from 'antd';
 import cls from 'classnames';
 import { NextPage } from 'next';
-import Link from 'next/link';
 import { useTranslations } from 'next-intl';
-import React, { useEffect, useMemo } from 'react';
+import Link from 'next/link';
+import { useContext, useEffect, useMemo } from 'react';
+import { Helmet } from 'react-helmet';
 
 import { Comment } from '@/components/Comment';
 import { ImageViewer } from '@/components/ImageViewer';
@@ -14,6 +15,7 @@ import { Toc } from '@/components/Toc';
 import { DoubleColumnLayout } from '@/layout/DoubleColumnLayout';
 import { KnowledgeProvider } from '@/providers/knowledge';
 
+import { GlobalContext } from '@/context/global';
 import style from './index.module.scss';
 
 interface IProps {
@@ -28,6 +30,7 @@ const Page: NextPage<IProps> = ({ pId, id, book, chapter }) => {
   const chapters = book.children || [];
   const tocs = chapter.toc ? JSON.parse(chapter.toc) : [];
   const idx = chapters.findIndex((t) => t.id === chapter.id);
+  const { setting } = useContext(GlobalContext);
 
   const prev = useMemo(() => {
     if (idx <= 0) {
@@ -72,6 +75,9 @@ const Page: NextPage<IProps> = ({ pId, id, book, chapter }) => {
       <DoubleColumnLayout
         leftNode={
           <>
+            <Helmet>
+              <title>{`${book.title} - ${t('knowledge')} - ${setting.systemTitle}`}</title>
+            </Helmet>
             <div className={cls(style.breadcrump)}>
               <Breadcrumb>
                 <Breadcrumb.Item>

client/pages/knowledge/[pId]/index.tsx

@@ -3,9 +3,10 @@ import { Footer } from '@components/Footer';
 import { Breadcrumb, Button } from 'antd';
 import cls from 'classnames';
 import { NextPage } from 'next';
-import Link from 'next/link';
 import { useTranslations } from 'next-intl';
-import React, { useCallback, useContext, useMemo } from 'react';
+import Link from 'next/link';
+import { useCallback, useContext, useMemo } from 'react';
+import { Helmet } from 'react-helmet';
 
 import { ListTrail } from '@/components/Animation/Trail';
 import { KnowledgeList } from '@/components/KnowledgeList';
@@ -67,6 +68,9 @@ const Page: NextPage<IProps> = ({ pId, book, otherBooks = [] }) => {
         minHeight={'0px'}
         leftNode={
           <div className={style.content}>
+            <Helmet>
+              <title>{`${book.title} - ${t('knowledge')} - ${setting.systemTitle}`}</title>
+            </Helmet>
             <section className={cls(style.tocWrapper)}>
               <header>{book.title}</header>
               <main className={style.bgMain}>

client/pages/knowledge/index.tsx

@@ -4,6 +4,7 @@ import { NextPage } from 'next';
 import { useTranslations } from 'next-intl';
 import { useCallback, useContext, useEffect, useState } from 'react';
 import InfiniteScroll from 'react-infinite-scroller';
+import { Helmet } from 'react-helmet';
 
 import { ArticleRecommend } from '@/components/ArticleRecommend';
 import { GlobalContext } from '@/context/global';
@@ -45,18 +46,23 @@ const Page: NextPage<IHomeProps> = ({ books: defaultBooks = [], total = 0 }) =>
     <>
       <DoubleColumnLayout
         leftNode={
-          <InfiniteScroll
-            pageStart={1}
-            loadMore={getArticles}
-            hasMore={page * pageSize < total}
-            loader={
-              <div className={'loading'} key={0}>
-                {t('gettingKnowledge')}
-              </div>
-            }
-          >
-            <KnowledgeList knowledges={books} />
-          </InfiniteScroll>
+          <>
+            <Helmet>
+              <title>{`${t('knowledge')} - ${setting.systemTitle}`}</title>
+            </Helmet>
+            <InfiniteScroll
+              pageStart={1}
+              loadMore={getArticles}
+              hasMore={page * pageSize < total}
+              loader={
+                <div className={'loading'} key={0}>
+                  {t('gettingKnowledge')}
+                </div>
+              }
+            >
+              <KnowledgeList knowledges={books} />
+            </InfiniteScroll>
+          </>
         }
         rightNode={
           <div className={'sticky'}>

client/pages/tag/[tag].tsx

@@ -5,6 +5,7 @@ import { NextPage } from 'next';
 import { useTranslations } from 'next-intl';
 import { useCallback, useContext, useEffect, useState } from 'react';
 import InfiniteScroll from 'react-infinite-scroller';
+import { Helmet } from 'react-helmet';
 
 import { ArticleRecommend } from '@/components/ArticleRecommend';
 import { GlobalContext } from '@/context/global';
@@ -52,6 +53,9 @@ const Home: NextPage<IProps> = ({ articles: defaultArticles = [], total, tag })
       <DoubleColumnLayout
         leftNode={
           <>
+            <Helmet>
+              <title>{`${tag.label} - ${t('tagTitle')} - ${setting.systemTitle}`}</title>
+            </Helmet>
             <div className={style.tagOrCategoryDetail}>
               <p>
                 {t('yu')} <span>{tag.label}</span> {t('tagRelativeArticles')}