Hexo 菜单调整

lib/lang/en-US.js

@@ -24,6 +24,7 @@ export default {
     AUTHOR: 'Author',
     URL: 'URL',
     POSTS: 'Posts',
+    ARTICLE: 'Article',
     VISITORS: 'Visitors',
     VIEWS: 'Views',
     COPYRIGHT_NOTICE: 'All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!',

lib/lang/zh-CN.js

@@ -26,6 +26,7 @@ export default {
     URL: '链接',
     ANALYTICS: '统计',
     POSTS: '篇文章',
+    ARTICLE: '文章',
     VISITORS: '位访客',
     VIEWS: '次查看',
     COPYRIGHT_NOTICE: '本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。',

themes/Hexo/components/InfoCard.js

@@ -0,0 +1,28 @@
+import BLOG from '@/blog.config'
+import Image from 'next/image'
+import { Router } from 'next/router'
+import Card from './Card'
+import SocialButton from './SocialButton'
+import MenuButtonGroup from './MenuButtonGroup'
+export function InfoCard (props) {
+  return <Card>
+    <div
+      className='justify-center items-center flex hover:rotate-45 py-6 hover:scale-105 transform duration-200 cursor-pointer'
+      onClick={() => {
+        Router.push('/')
+      }}
+    >
+      <Image
+        alt={BLOG.AUTHOR}
+        width={120}
+        height={120}
+        loading='lazy'
+        src='/avatar.jpg'
+        className='rounded-full'
+      />
+    </div>
+    <div className='text-center font-sans text-xl pb-4 dark:text-gray-300'>{BLOG.TITLE}</div>
+    <MenuButtonGroup {...props}/>
+    <SocialButton />
+  </Card>
+}

themes/Hexo/components/MenuButtonGroup.js

@@ -1,37 +1,30 @@
 import React from 'react'
 import Link from 'next/link'
-import { useRouter } from 'next/router'
 import { useGlobal } from '@/lib/global'
 import CONFIG_HEXO from '../config_hexo'
 
 const MenuButtonGroup = (props) => {
-  const { postCount, customNav } = props
+  const { postCount, categories, tags } = props
   const { locale } = useGlobal()
-  const router = useRouter()
-  const archiveSlot = <div className='bg-blue-300 dark:bg-blue-400 rounded-md text-gray-50 px-1 text-xs'>{postCount}</div>
+  const archiveSlot = <div className='text-center'>{postCount}</div>
+  const categorySlot = <div className='text-center'>{categories?.length}</div>
+  const tagSlot = <div className='text-center'>{tags?.length}</div>
 
-  let links = [
-    { icon: 'fas fa-home', name: locale.NAV.INDEX, to: '/' || '/', show: true },
-    { icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_HEXO.MENU_CATEGORY },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_HEXO.MENU_TAG },
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', slot: archiveSlot, show: CONFIG_HEXO.MENU_ARCHIVE },
-    { icon: 'fas fa-user', name: locale.NAV.ABOUT, to: '/about', show: CONFIG_HEXO.MENU_ABOUT }
+  const links = [
+    { name: locale.COMMON.ARTICLE, to: '/archive', slot: archiveSlot, show: CONFIG_HEXO.MENU_ARCHIVE },
+    { name: locale.COMMON.CATEGORY, to: '/category', slot: categorySlot, show: CONFIG_HEXO.MENU_CATEGORY },
+    { name: locale.COMMON.TAGS, to: '/tag', slot: tagSlot, show: CONFIG_HEXO.MENU_TAG }
   ]
-  if (customNav) {
-    links = links.concat(customNav)
-  }
-  return <nav id='nav' className='leading-8 text-gray-500 dark:text-gray-400 font-sans w-full'>
+
+  return <nav id='nav' className='leading-8 flex justify-center text-gray-500 dark:text-gray-400 font-sans w-full'>
       {links.map(link => {
         if (link.show) {
-          const selected = (router.pathname === link.to) || (router.asPath === link.to)
           return <Link key={`${link.to}`} title={link.to} href={link.to} >
-          <a className={'py-1.5 my-1 px-5 duration-300 text-base justify-between hover:bg-blue-400 rounded-md hover:text-white hover:shadow-lg cursor-pointer flex flex-nowrap items-center ' +
-              (selected ? 'bg-blue-400 rounded-md text-white' : ' ')} >
-              <div className='my-auto items-center justify-center flex '>
-                <i className={`${link.icon} w-4 text-center`} />
-                <div className={'ml-4'}>{link.name}</div>
+          <a className={'py-1.5 my-1 px-2 duration-300 text-base justify-center items-center cursor-pointer'} >
+              <div className='w-full items-center justify-center hover:scale-105 duration-200 transform'>
+                <div className='text-center'>{link.name}</div>
+                <div className='text-center font-semibold'>{link.slot}</div>
               </div>
-              {link.slot}
             </a>
           </Link>
         } else {

themes/Hexo/components/SideRight.js

@@ -1,14 +1,11 @@
-import Router from 'next/router'
-import Image from 'next/image'
-import BLOG from '@/blog.config'
 import Card from './Card'
 import MenuButtonGroup from './MenuButtonGroup'
 import SearchInput from './SearchInput'
 import CategoryGroup from './CategoryGroup'
 import LatestPostsGroup from './LatestPostsGroup'
 import TagGroups from './TagGroups'
-import SocialButton from './SocialButton'
 import Catalog from './Catalog'
+import { InfoCard } from './InfoCard'
 
 export default function SideRight (props) {
   const {
@@ -24,29 +21,7 @@ export default function SideRight (props) {
   } = props
   return (
     <div className='w-96 space-y-4 hidden lg:block'>
-      <Card>
-        <div
-          className='justify-center items-center flex hover:rotate-45 py-6 hover:scale-105 transform duration-200 cursor-pointer'
-          onClick={() => {
-            Router.push('/')
-          }}
-        >
-          <Image
-            alt={BLOG.AUTHOR}
-            width={120}
-            height={120}
-            loading='lazy'
-            src='/avatar.jpg'
-            className='rounded-full'
-          />
-        </div>
-        <div className='text-center font-sans text-xl pb-4 dark:text-gray-300'>{BLOG.TITLE}</div>
-        <SocialButton />
-      </Card>
-      <Card>
-        <MenuButtonGroup {...props}/>
-        <SearchInput {...props}/>
-      </Card>
+      <InfoCard {...props}/>
       <Card>
         <div className='ml-2 mb-3 font-sans'>
           <i className='fas fa-chart-area' /> 统计

themes/Hexo/config_hexo.js

@@ -3,8 +3,7 @@ const CONFIG_HEXO = {
   HOME_BANNER_GREETINGS: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页大图标语文字
   HOME_BANNER_IMAGE: './bg_image.jpg', // see /public/bg_image.jpg
 
-  // 菜单
-  MENU_ABOUT: false, // 显示关于
+  // 菜单配置
   MENU_CATEGORY: true, // 显示分类
   MENU_TAG: true, // 显示标签
   MENU_ARCHIVE: true, // 显示归档