Merge pull request #3233 from YesYouKenSpace/feat/localization-404

feat(localization): introduce localization to 404 texts

components/SEO.js

@@ -247,7 +247,7 @@ const getSEOMeta = (props, router, locale) => {
       }
     case '/404':
       return {
-        title: `${siteInfo?.title} | 页面找不到啦`,
+        title: `${siteInfo?.title} | ${locale.NAV.PAGE_NOT_FOUND}`,
         image: `${siteInfo?.pageCover}`
       }
     case '/tag':

lib/lang/en-US.js

@@ -17,7 +17,9 @@ export default {
     NAVIGATOR: 'NAV',
     ABOUT: 'About',
     MAIL: 'E-Mail',
-    ARCHIVE: 'Archive'
+    ARCHIVE: 'Archive',
+    PAGE_NOT_FOUND: 'Page Not Found',
+    PAGE_NOT_FOUND_REDIRECT: 'Page Not Found, Redirecting to Home Page...'
   },
   COMMON: {
     THEME: 'Theme',

lib/lang/zh-CN.js

@@ -17,7 +17,9 @@ export default {
     ABOUT: '关于',
     NAVIGATOR: '导航',
     MAIL: '邮箱',
-    ARCHIVE: '归档'
+    ARCHIVE: '归档',
+    PAGE_NOT_FOUND: '页面找不到啦',
+    PAGE_NOT_FOUND_REDIRECT: '页面无法加载，即将返回首页'
   },
   COMMON: {
     THEME: 'Theme',

themes/fukasawa/index.js

@@ -215,6 +215,7 @@ const LayoutArchive = props => {
  */
 const Layout404 = props => {
   const router = useRouter()
+  const { locale } = useGlobal()
   useEffect(() => {
     // 延时3秒如果加载失败就返回首页
     setTimeout(() => {
@@ -232,7 +233,7 @@ const Layout404 = props => {
             <div className='dark:text-gray-200'>
                 <h2 className='inline-block border-r-2 border-gray-600 mr-2 px-3 py-2 align-top'><i className='mr-2 fas fa-spinner animate-spin' />404</h2>
                 <div className='inline-block text-left h-32 leading-10 items-center'>
-                    <h2 className='m-0 p-0'>页面无法加载，即将返回首页</h2>
+                    <h2 className='m-0 p-0'>{locale.NAV.PAGE_NOT_FOUND_REDIRECT}</h2>
                 </div>
             </div>
         </div>

themes/game/index.js

@@ -6,9 +6,11 @@ import NotionPage from '@/components/NotionPage'
 import { PWA as initialPWA } from '@/components/PWA'
 import ShareBar from '@/components/ShareBar'
 import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
 import { loadWowJS } from '@/lib/plugins/wow'
 import { deepClone, isBrowser, shuffleArray } from '@/lib/utils'
 import Link from 'next/link'
+import { useRouter } from 'next/router'
 import { createContext, useContext, useEffect, useRef, useState } from 'react'
 import Announcement from './components/Announcement'
 import { ArticleLock } from './components/ArticleLock'
@@ -30,7 +32,6 @@ import SideBarContent from './components/SideBarContent'
 import SideBarDrawer from './components/SideBarDrawer'
 import CONFIG from './config'
 import { Style } from './style'
-import { useRouter } from 'next/router'
 
 // const AlgoliaSearchModal = dynamic(() => import('@/components/AlgoliaSearchModal'), { ssr: false })
 
@@ -354,6 +355,7 @@ const LayoutSlug = props => {
  */
 const Layout404 = props => {
   const router = useRouter()
+  const { locale } = useGlobal()
   useEffect(() => {
     // 延时3秒如果加载失败就返回首页
     setTimeout(() => {
@@ -366,16 +368,21 @@ const Layout404 = props => {
     }, 3000)
   }, [])
 
-  return <>
+  return (
-        <div className='md:-mt-20 text-black w-full h-screen text-center justify-center content-center items-center flex flex-col'>
+    <>
-            <div className='dark:text-gray-200'>
+      <div className='md:-mt-20 text-black w-full h-screen text-center justify-center content-center items-center flex flex-col'>
-                <h2 className='inline-block border-r-2 border-gray-600 mr-2 px-3 py-2 align-top'><i className='mr-2 fas fa-spinner animate-spin' />404</h2>
+        <div className='dark:text-gray-200'>
-                <div className='inline-block text-left h-32 leading-10 items-center'>
+          <h2 className='inline-block border-r-2 border-gray-600 mr-2 px-3 py-2 align-top'>
-                    <h2 className='m-0 p-0'>页面无法加载，即将返回首页</h2>
+            <i className='mr-2 fas fa-spinner animate-spin' />
-                </div>
+            404
-            </div>
+          </h2>
+          <div className='inline-block text-left h-32 leading-10 items-center'>
+            <h2 className='m-0 p-0'>{locale.NAV.PAGE_NOT_FOUND_REDIRECT}</h2>
+          </div>
         </div>
+      </div>
     </>
+  )
 }
 
 /**

themes/gitbook/index.js

@@ -438,6 +438,7 @@ const LayoutArchive = props => {
  */
 const Layout404 = props => {
   const router = useRouter()
+  const { locale } = useGlobal()
   useEffect(() => {
     // 延时3秒如果加载失败就返回首页
     setTimeout(() => {
@@ -455,7 +456,7 @@ const Layout404 = props => {
             <div className='dark:text-gray-200'>
                 <h2 className='inline-block border-r-2 border-gray-600 mr-2 px-3 py-2 align-top'><i className='mr-2 fas fa-spinner animate-spin' />404</h2>
                 <div className='inline-block text-left h-32 leading-10 items-center'>
-                    <h2 className='m-0 p-0'>页面无法加载，即将返回首页</h2>
+                <h2 className='m-0 p-0'>{locale.NAV.PAGE_NOT_FOUND_REDIRECT}</h2>
                 </div>
             </div>
         </div>