feature:

网页根据浏览器本地化语言

components/CategoryGroup.js

@@ -2,12 +2,7 @@ import Link from 'next/link'
 import React from 'react'
 
 const CategoryGroup = ({ currentCategory, categories }) => {
-  return <>
-    <section
-      className='text-sm font-bold py-3 px-5 text-gray-600 dark:text-gray-400 duration-100 flex flex-nowrap align-middle'>
-      <div className='w-32'>文章分类</div>
-    </section>
-    <div>
+  return <div>
       <div id='category-list' className='dark:border-gray-600 dark:bg-gray-800 w-66'>
         {Object.keys(categories).map(category => {
           return <Link key={category} href={`/category/${category}`}>
@@ -16,7 +11,6 @@ const CategoryGroup = ({ currentCategory, categories }) => {
         })}
       </div>
     </div>
-  </>
 }
 
 export default CategoryGroup

components/LatestPosts.js

@@ -2,6 +2,7 @@ import Link from 'next/link'
 import BLOG from '@/blog.config'
 import { formatDateFmt } from '@/lib/formatDate'
 import { useRouter } from 'next/router'
+import { useGlobal } from '@/lib/global'
 
 /**
  * 最新文章列表
@@ -24,11 +25,12 @@ const LatestPosts = ({ posts }) => {
 
   // 获取当前路径
   const currentPath = useRouter().asPath
+  const { locale } = useGlobal()
 
   return <>
     <section
       className='text-sm font-bold py-3 px-5 text-gray-600 dark:text-gray-400 duration-100 flex flex-nowrap align-middle'>
-      <div className='w-32'>最近更新</div>
+      <div className='w-32'>{locale.COMMON.LATEST_POSTS}</div>
     </section>
     <div>
       {postsSortByDate.map(post => {

components/ShareBar.js

@@ -4,6 +4,7 @@ import React from 'react'
 import { createPopper } from '@popperjs/core'
 import copy from 'copy-to-clipboard'
 import QRCode from 'qrcode.react'
+import { useGlobal } from '@/lib/global'
 
 const ShareBar = ({ post }) => {
   const router = useRouter()
@@ -13,6 +14,7 @@ const ShareBar = ({ post }) => {
   const [qrCodeShow, setQrCodeShow] = React.useState(false)
   const btnRef = React.createRef()
   const popoverRef = React.createRef()
+  const { locale } = useGlobal()
 
   const openPopover = () => {
     createPopper(btnRef.current, popoverRef.current, {
@@ -26,13 +28,13 @@ const ShareBar = ({ post }) => {
 
   const copyUrl = () => {
     copy(shareUrl)
-    alert('当前链接已复制到剪贴板')
+    alert(locale.COMMON.URL_COPIED)
   }
 
   return <>
     <div
       className='py-2 text-gray-500 text-center space-x-2 flex inline-block my-1 dark:text-gray-200 overflow-visible'>
-      <div className='hidden md:block text-gray-800 dark:text-gray-300 mr-2 my-2'>分享本文:</div>
+      <div className='hidden md:block text-gray-800 dark:text-gray-300 mr-2 my-2'>{locale.COMMON.SHARE}:</div>
       <div className='text-3xl cursor-pointer'>
         <a className='fa fa-facebook-square hover:text-red-600'
            href={`https://www.facebook.com/sharer.php?u=${shareUrl}`} />
@@ -61,7 +63,7 @@ const ShareBar = ({ post }) => {
               />
             </div>
             <span className='bg-white text-black font-semibold p-1 mb-0 rounded-t-lg text-sm mx-auto mr-10'>
-            扫一扫分享
+            {locale.COMMON.SCAN_QR_CODE}
           </span>
           </div>
         </a>

components/SideBar.js

@@ -7,6 +7,7 @@ import CategoryGroup from '@/components/CategoryGroup'
 import Toc from '@/components/Toc'
 import SearchInput from '@/components/SearchInput'
 import Link from 'next/link'
+import { useGlobal } from '@/lib/global'
 
 /**
  * 侧边栏
@@ -21,6 +22,7 @@ import Link from 'next/link'
  * @constructor
  */
 const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, currentSearch }) => {
+  const { locale } = useGlobal()
   return <aside id='sidebar' className='pt-10 bg-white dark:bg-gray-800 w-72 z-10 dark:border-gray-500 border-gray-200 scroll-hidden h-full'>
     <section>
       <InfoCard />
@@ -42,6 +44,10 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
       {/* 分类  */}
       {categories && (
         <section className='mt-2'>
+          <section
+            className='text-sm font-bold py-3 px-5 text-gray-600 dark:text-gray-400 duration-100 flex flex-nowrap align-middle'>
+            <div className='w-32'>{locale.COMMON.CATEGORY}</div>
+          </section>
           <CategoryGroup currentCategory={currentCategory} categories={categories} />
         </section>
       )}
@@ -58,8 +64,8 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
         <section className='mt-2'>
           <section
             className='text-sm font-bold py-3 px-5 text-gray-600 dark:text-gray-400 duration-100 flex flex-nowrap justify-between'>
-            <div>标签</div>
-            <div><Link href='/tag'><div className='hover:underline cursor-pointer opacity-50'>更多标签</div></Link></div>
+            <div>{locale.COMMON.TAGS}</div>
+            <div><Link href='/tag'><div className='hover:underline cursor-pointer opacity-50'>{locale.COMMON.MORE}</div></Link></div>
           </section>
           <div className='px-5'>
             <TagGroups tags={tags} currentTag={currentTag} />
@@ -72,7 +78,7 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
       <section id='left-toc' className='sticky top-0 bg-white dark:bg-gray-800'>
         <div
           className='border-b text-2xl bg-white font-bold text-black dark:bg-gray-700 dark:text-white py-6 px-6'>
-          文章目录
+          {locale.COMMON.TABLE_OF_CONTENTS}
         </div>
         <Toc toc={post.toc} />
       </section>

components/TagItem.js

@@ -5,7 +5,7 @@ const TagItem = ({ tag, selected }) => {
   return (
   <Link href={selected ? '/' : `/tag/${encodeURIComponent(tag.name)}`}>
     <li
-      className={`notion-${tag.color}_background list-none cursor-pointer hover:bg-gray-300 rounded-xl 
+      className={`notion-${tag.color}_background list-none cursor-pointer hover:bg-gray-300 rounded-md 
       duration-200 mr-1 my-1 px-2 py-1 font-medium font-light text-sm whitespace-nowrap
                   dark:hover:bg-gray-800 dark:hover:text-white hover:text-black
                  ${selected

components/TagItemMini.js

@@ -2,11 +2,11 @@ import Link from 'next/link'
 
 const TagItemMini = ({ tag, selected = false }) => {
   return <Link key={tag} href={selected ? '/' : `/tag/${encodeURIComponent(tag.name)}`}>
-    <div className={`cursor-pointer inline-block rounded hover:bg-gray-500 
+    <div className={`cursor-pointer inline-block rounded hover:bg-gray-500 duration-200
       mr-2 my-1 p-1 font-medium font-light text-xs whitespace-nowrap dark:hover:text-white
        ${selected
       ? 'text-white dark:text-gray-300 bg-black dark:bg-black dark:hover:bg-gray-900'
-      : `text-gray-500 dark:text-gray-600 hover:shadow-xl hover:text-white dark:hover:bg-gray-600 dark:border-gray-600 notion-${tag.color}_background `}` }>
+      : `text-gray-600 dark:text-gray-600 hover:shadow-xl hover:text-white dark:hover:bg-gray-600 dark:border-gray-600 notion-${tag.color}_background `}` }>
     <div> <i className='fa fa-tag mr-2 py-0.5'/>{tag.name + (tag.count ? `(${tag.count})` : '')} </div>
     </div>
   </Link>

components/TocDrawer.js

@@ -1,5 +1,6 @@
 import Toc from '@/components/Toc'
 import React, { useImperativeHandle, useState } from 'react'
+import { useGlobal } from '@/lib/global'
 
 /**
  * 目录抽屉栏
@@ -19,7 +20,7 @@ const TocDrawer = ({ post, cRef }) => {
   const switchVisible = () => {
     switchShowDrawer(!showDrawer)
   }
-
+  const { locale } = useGlobal()
   return <>
     <div className='fixed top-0 right-0 z-40'>
       {/* 侧边菜单 */}
@@ -28,7 +29,7 @@ const TocDrawer = ({ post, cRef }) => {
           {post && <>
             <div
               className='border-b text-xl font-bold text-black dark:text-white py-3 px-6'>
-              文章目录
+              {locale.COMMON.TABLE_OF_CONTENTS}
             </div>
             <Toc toc={post.toc}/>
           </>