首页分类导航组件

themes/hexo/components/Header.js

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 import Typed from 'typed.js'
 import CONFIG_HEXO from '../config_hexo'
+import NavButtonGroup from './NavButtonGroup'
 
 let wrapperTop = 0
 let windowTop = 0
@@ -74,7 +75,7 @@ const Header = props => {
       className="duration-500 md:bg-fixed w-full bg-cover bg-center h-screen bg-black text-white"
       style={{
         backgroundImage:
-          `linear-gradient(rgba(0, 0, 0, 0.8), rgba(0,0,0,0.2), rgba(0,0,0,0.2), rgba(0,0,0,0.2), rgba(0, 0, 0, 0.8) ),url("${siteInfo?.pageCover}")`
+          `linear-gradient(rgba(0, 0, 0, 0.9), rgba(0,0,0,0.5), rgba(0,0,0,0.3), rgba(0,0,0,0.5), rgba(0, 0, 0, 0.9) ),url("${siteInfo?.pageCover}")`
       }}
     >
       <div className="absolute flex flex-col h-full items-center justify-center w-full font-sans">
@@ -82,6 +83,10 @@ const Header = props => {
         <div className='mt-2 h-12 items-center text-center shadow-text text-white text-lg'>
           <span id='typed'/>
         </div>
+
+        {/* 首页导航插件 */}
+        { CONFIG_HEXO.HOME_NAV_BUTTONS && <NavButtonGroup {...props}/>}
+
       </div>
       <div
         onClick={() => {

themes/hexo/components/Logo.js

@@ -6,7 +6,7 @@ const Logo = props => {
   const { siteInfo } = props
   return <Link href='/' passHref>
     <div className='flex flex-col justify-center items-center cursor-pointer space-y-3'>
-      <div className='font-sans text-lg p-1.5 rounded bg-black text-white dark:border-white border-black border'> {siteInfo?.title || BLOG.TITLE}</div>
+      <div className='font-sans text-lg p-1.5 rounded dark:border-white hover:scale-110 transform duration-200'> {siteInfo?.title || BLOG.TITLE}</div>
     </div>
   </Link>
 }

themes/hexo/components/MenuButtonGroupTop.js

@@ -9,9 +9,9 @@ const MenuButtonGroupTop = (props) => {
 
   let links = [
     { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_HEXO.MENU_SEARCH },
-    { icon: 'fas fa-archive', name: locale.COMMON.ARTICLE, to: '/archive', show: CONFIG_HEXO.MENU_ARCHIVE },
-    { icon: 'fas fa-folder', 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', show: CONFIG_HEXO.MENU_ARCHIVE }
+    // { icon: 'fas fa-folder', 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 }
   ]
 
   if (customNav) {
@@ -22,8 +22,8 @@ const MenuButtonGroupTop = (props) => {
     {links.map(link => {
       if (link.show) {
         return <Link key={`${link.to}`} title={link.to} href={link.to} >
-          <a target={link.to.indexOf('http') === 0 ? '_blank' : '_self'} className={'py-1.5 my-1 px-3 duration-300 text-base justify-center items-center cursor-pointer'} >
-            <div className='w-full flex text-sm items-center justify-center hover:scale-105 transform'>
+          <a target={link.to.indexOf('http') === 0 ? '_blank' : '_self'} className={'py-1.5 my-1 px-3  text-base justify-center items-center cursor-pointer'} >
+            <div className='w-full flex text-sm items-center justify-center hover:scale-125 duration-200 transform'>
               <i className={`${link.icon} mr-1`}/>
               <div className='text-center'>{link.name}</div>
             </div>

themes/hexo/components/NavButtonGroup.js

@@ -0,0 +1,21 @@
+
+import React from 'react'
+import Link from 'next/link'
+
+/**
+ * 首页导航大按钮组件
+ * @param {*} props
+ * @returns
+ */
+const NavButtonGroup = (props) => {
+  const { categories } = props
+
+  return <nav id='home-nav-button' className={'py-5 md:mt-24 mt-12 flex md:max-w-3xl md:space-x-12 md:flex justify-center'}>
+    {categories.map(category => {
+      return <Link key={`${category.name}`} title={`${category.name}`} href={`/category/${category.name}`} passHref>
+            <a className='text-center w-full md:w-40 md:h-20 h-14 mr-4 mb-4 justify-center items-center flex border-white border-2 cursor-pointer rounded-lg font-serif hover:bg-white hover:text-black duration-200 font-bold hover:scale-110 transform'>{category.name}</a>
+        </Link>
+    })}
+  </nav>
+}
+export default NavButtonGroup

themes/hexo/components/TopNav.js

@@ -30,6 +30,7 @@ const TopNav = props => {
     const nav = document.querySelector('#sticky-nav')
     const header = document.querySelector('#header')
     const showNav = scrollS <= windowTop || scrollS < 5 || (header && scrollS <= header.clientHeight)// 非首页无大图时影藏顶部 滚动条置顶时隐藏
+    // 是否将导航栏透明
     const navTransparent = (scrollS < document.documentElement.clientHeight - 12 && router.route === '/') || scrollS < 300 // 透明导航条的条件
 
     if (header && navTransparent) {
@@ -37,11 +38,13 @@ const TopNav = props => {
       nav && nav.classList.replace('text-black', 'text-white')
       nav && nav.classList.replace('border', 'border-transparent')
       nav && nav.classList.replace('shadow-md', 'shadow-none')
+      nav && nav.classList.replace('dark:bg-hexo-black-gray', 'transparent')
     } else {
       nav && nav.classList.replace('bg-none', 'bg-white')
       nav && nav.classList.replace('text-white', 'text-black')
       nav && nav.classList.replace('border-transparent', 'border')
       nav && nav.classList.replace('shadow-none', 'shadow-md')
+      nav && nav.classList.replace('transparent', 'dark:bg-hexo-black-gray')
     }
 
     if (!showNav) {
@@ -118,7 +121,7 @@ const TopNav = props => {
     <SearchDrawer cRef={searchDrawer} slot={searchDrawerSlot}/>
 
     {/* 导航栏 */}
-    <div id='sticky-nav' className={'top-0 shadow-md fixed bg-none animate__animated animate__fadeIn dark:bg-hexo-black-gray dark:text-gray-200 text-black w-full z-20 transform duration-200 font-san border-transparent  dark:border-transparent'}>
+    <div id='sticky-nav' className={'top-0 shadow-md fixed bg-none animate__animated animate__fadeIn dark:bg-hexo-black-gray dark:text-gray-200 text-black w-full z-20 transform duration-200 font-san border-transparent dark:border-transparent'}>
       <div className='w-full flex justify-between items-center px-4 py-2'>
         <div className='flex'>
          <Logo {...props}/>

themes/hexo/config_hexo.js

@@ -2,6 +2,8 @@ const CONFIG_HEXO = {
   HOME_BANNER_ENABLE: true,
   HOME_BANNER_GREETINGS: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页大图标语文字
 
+  HOME_NAV_BUTTONS: true, // 首页是否显示分类大图标按钮
+
   // 菜单配置
   MENU_CATEGORY: true, // 显示分类
   MENU_TAG: true, // 显示标签