starter-menu

2026-05-14 07:26:52 +00:00 · 2024-02-18 10:54:17 +08:00
parent 3d821c5175
commit ce37bca020
8 changed files with 90 additions and 50 deletions
--- a/components/ThemeSwitch.js
+++ b/components/ThemeSwitch.js
@@ -38,7 +38,7 @@ const ThemeSwitch = () => {

  return (<>
        <Draggable>
-            <div id="draggableBox" style={{ left: '0px', top: '80vh' }} className="fixed group space-y-2 overflow-hidden z-50 p-3 flex flex-col items-start dark:text-white bg-gray-50 dark:bg-black rounded-xl shadow-lg border dark:border-gray-800">
+            <div id="draggableBox" style={{ left: '0px', top: '80vh' }} className="fixed group space-y-2 overflow-hidden z-50 p-3 flex flex-col items-start dark:text-white bg-white dark:bg-black rounded-xl shadow-lg ">
                {/* 深色按钮 */}
                <div className="text-sm flex items-center w-0 group-hover:w-32 transition-all duration-200">
                    <DarkModeButton />
--- a/themes/heo/components/MenuGroupCard.js
+++ b/themes/heo/components/MenuGroupCard.js
@@ -1,6 +1,7 @@
 import Link from 'next/link'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'

 const MenuGroupCard = (props) => {
  const { postCount, categoryOptions, tagOptions } = props
--- a/themes/starter/components/Logo.js
+++ b/themes/starter/components/Logo.js
@@ -1,8 +1,10 @@
+import { siteConfig } from '@/lib/config';
 import { useGlobal } from '@/lib/global';
 import throttle from 'lodash.throttle';
 import Link from 'next/link'
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
+import CONFIG from '../config';

 /**
 * 站点图标
@@ -26,9 +28,9 @@ export const Logo = () => {
    const scrollY = window.scrollY;
    // 何时显示浅色或白底的logo
    if (isDarkMode || (!isDarkMode && router.route === '/' && scrollY < 1)) {
-      logo.src = '/images/landing-2/logo/logo-white.svg';
+      logo.src = siteConfig('STARTER_LOGO_WHITE', null, CONFIG);
    } else {
-      logo.src = '/images/landing-2/logo/logo.svg';
+      logo.src = siteConfig('STARTER_LOGO', null, CONFIG);
    }
  }, throttleMs)

--- a/themes/starter/components/MenuItem.js
+++ b/themes/starter/components/MenuItem.js
@@ -0,0 +1,47 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+export const MenuItem = ({ link }) => {
+  const hasSubMenu = link?.subMenus?.length > 0
+  const router = useRouter()
+  return <>
+        {/* MenuItem */}
+        {!hasSubMenu && <li className="group relative whitespace-nowrap">
+            <Link href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
+                className={`ud-menu-scroll mx-8 flex py-2 text-base font-medium text-dark group-hover:text-primary dark:text-white lg:mr-0 lg:inline-flex lg:px-0 lg:py-6 ${router.route === '/' ? 'lg:text-white lg:group-hover:text-white' : ''} lg:group-hover:opacity-70`}
+            >
+                {link?.icon && <i className={link.icon + ' mr-2 my-auto'} />}{link?.name}
+            </Link>
+        </li>}
+
+        {hasSubMenu && <li className="submenu-item group relative whitespace-nowrap">
+
+            {/* 有子菜单的MenuItem */}
+            <a className={`relative mx-8 flex items-center justify-between py-2 text-base font-medium text-dark group-hover:text-primary dark:text-white lg:ml-8 lg:mr-0 lg:inline-flex lg:py-6 lg:pl-0 lg:pr-4 ${router.route === '/' ? 'lg:text-white lg:group-hover:text-white' : ''} lg:group-hover:opacity-70 xl:ml-10`}>
+                {link?.icon && <i className={link.icon + ' mr-2 my-auto'} />}{link?.name}
+
+                <svg
+                className="ml-2 fill-current"
+                width="16"
+                height="20"
+                viewBox="0 0 16 20"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                >
+                <path
+                    d="M7.99999 14.9C7.84999 14.9 7.72499 14.85 7.59999 14.75L1.84999 9.10005C1.62499 8.87505 1.62499 8.52505 1.84999 8.30005C2.07499 8.07505 2.42499 8.07505 2.64999 8.30005L7.99999 13.525L13.35 8.25005C13.575 8.02505 13.925 8.02505 14.15 8.25005C14.375 8.47505 14.375 8.82505 14.15 9.05005L8.39999 14.7C8.27499 14.825 8.14999 14.9 7.99999 14.9Z"
+                />
+                </svg>
+            </a>
+
+            <div className="submenu relative left-0 top-full hidden w-[250px] rounded-sm bg-white p-4 transition-[top] duration-300 group-hover:opacity-100 dark:bg-dark-2 lg:invisible lg:absolute lg:top-[110%] lg:block lg:opacity-0 lg:shadow-lg lg:group-hover:visible lg:group-hover:top-full" >
+                {link.subMenus.map((sLink, index) => {
+                  return <Link key={index} href={sLink.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'} className="block rounded px-4 py-[10px] text-sm text-body-color hover:text-primary dark:text-dark-6 dark:hover:text-primary" >
+                     {/* 子菜单SubMenuItem */}
+                     <span className='text-sm ml-4 whitespace-nowrap'>{link?.icon && <i className={sLink.icon + ' mr-2 my-auto'} />} {sLink.title}</span>
+                </Link>
+                })}
+            </div>
+        </li>}
+    </>
+}
--- a/themes/starter/components/MenuList.js
+++ b/themes/starter/components/MenuList.js
@@ -1,11 +1,25 @@
-import Link from 'next/link';
-import { useRouter } from 'next/router';
+import { siteConfig } from '@/lib/config';
+import { useGlobal } from '@/lib/global';
 import { useEffect } from 'react';
+import CONFIG from '../config';
+import { MenuItem } from './MenuItem';
 /**
 * 响应式 折叠菜单
 */
-export const MenuList = () => {
-  const router = useRouter()
+export const MenuList = (props) => {
+  const { customNav, customMenu } = props
+  const { locale } = useGlobal()
+
+  let links = [
+    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('HEO_MENU_ARCHIVE', null, CONFIG) },
+    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('HEO_MENU_SEARCH', null, CONFIG) },
+    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('HEO_MENU_CATEGORY', null, CONFIG) },
+    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('HEO_MENU_TAG', null, CONFIG) }
+  ]
+
+  if (customNav) {
+    links = customNav.concat(links)
+  }

  useEffect(() => {
    // ===== responsive navbar
@@ -37,9 +51,19 @@ export const MenuList = () => {
    });
  }, [])

+  // 如果 开启自定义菜单，则覆盖Page生成的菜单
+  if (siteConfig('CUSTOM_MENU')) {
+    links = customMenu
+  }
+
+  if (!links || links.length === 0) {
+    return null
+  }
+
  return <>
            <div>
-                {/* 移动端菜单切换按钮 */}
+
+              {/* 移动端菜单切换按钮 */}
              <button id="navbarToggler" className="absolute right-4 top-1/2 block -translate-y-1/2 rounded-lg px-3 py-[6px] ring-primary focus:ring-2 lg:hidden">
                <span className="relative my-[6px] block h-[2px] w-[30px] bg-white duration-200 transition-all" ></span>
                <span className="relative my-[6px] block h-[2px] w-[30px] bg-white duration-200 transition-all" ></span>
@@ -49,44 +73,7 @@ export const MenuList = () => {
              {/* 响应式菜单 */}
              <nav id="navbarCollapse" className="absolute right-4 top-full hidden w-full max-w-[250px] rounded-lg bg-white py-5 shadow-lg dark:bg-dark-2 lg:static lg:block lg:w-full lg:max-w-full lg:bg-transparent lg:px-4 lg:py-0 lg:shadow-none dark:lg:bg-transparent xl:px-6">
                <ul className="blcok lg:flex 2xl:ml-20">
-                  {/* MenuItem */}
-                  <li className="group relative">
-                    <Link href="/"
-                      className={`ud-menu-scroll mx-8 flex py-2 text-base font-medium text-dark group-hover:text-primary dark:text-white lg:mr-0 lg:inline-flex lg:px-0 lg:py-6 ${router.route === '/' ? 'lg:text-white lg:group-hover:text-white' : ''} lg:group-hover:opacity-70`}
-                    >
-                      Home1
-                    </Link>
-                  </li>
-                  {/* 有子菜单的MenuItem */}
-                  <li className="submenu-item group relative">
-                    <a className={`relative mx-8 flex items-center justify-between py-2 text-base font-medium text-dark group-hover:text-primary dark:text-white lg:ml-8 lg:mr-0 lg:inline-flex lg:py-6 lg:pl-0 lg:pr-4 ${router.route === '/' ? 'lg:text-white lg:group-hover:text-white' : ''} lg:group-hover:opacity-70 xl:ml-10`}>
-                      Pages
-
-                      <svg
-                        className="ml-2 fill-current"
-                        width="16"
-                        height="20"
-                        viewBox="0 0 16 20"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M7.99999 14.9C7.84999 14.9 7.72499 14.85 7.59999 14.75L1.84999 9.10005C1.62499 8.87505 1.62499 8.52505 1.84999 8.30005C2.07499 8.07505 2.42499 8.07505 2.64999 8.30005L7.99999 13.525L13.35 8.25005C13.575 8.02505 13.925 8.02505 14.15 8.25005C14.375 8.47505 14.375 8.82505 14.15 9.05005L8.39999 14.7C8.27499 14.825 8.14999 14.9 7.99999 14.9Z"
-                        />
-                      </svg>
-                    </a>
-                    <div
-                      className="submenu relative left-0 top-full hidden w-[250px] rounded-sm bg-white p-4 transition-[top] duration-300 group-hover:opacity-100 dark:bg-dark-2 lg:invisible lg:absolute lg:top-[110%] lg:block lg:opacity-0 lg:shadow-lg lg:group-hover:visible lg:group-hover:top-full"
-                    >
-                        {/* 子菜单SubMenuItem */}
-                      <Link
-                        href="/about"
-                        className="block rounded px-4 py-[10px] text-sm text-body-color hover:text-primary dark:text-dark-6 dark:hover:text-primary"
-                      >
-                        About Page
-                      </Link>
-                    </div>
-                  </li>
+                    {links?.map((link, index) => <MenuItem key={index} link={link} />)}
                </ul>
              </nav>
            </div>
--- a/themes/starter/components/NavBar.js
+++ b/themes/starter/components/NavBar.js
@@ -9,7 +9,7 @@ import { useRouter } from 'next/router';
 /**
 * 顶部导航栏
 */
-export const NavBar = () => {
+export const NavBar = (props) => {
  const router = useRouter()
  useEffect(() => {
    // ======= Sticky
@@ -49,7 +49,7 @@ export const NavBar = () => {
                <div className="flex w-full items-center justify-between px-4">

                    {/* 中间菜单 */}
-                    <MenuList/>
+                    <MenuList {...props}/>

                    {/* 右侧功能 */}
                    <div className="flex items-center justify-end pr-16 lg:pr-0">
--- a/themes/starter/config.js
+++ b/themes/starter/config.js
@@ -3,6 +3,9 @@
 */
 const CONFIG = {

-  LANDING_NEWSLETTER: process.env.NEXT_PUBLIC_THEME_LANDING_NEWSLETTER || false // 是否开启邮件订阅 请先配置mailchimp功能 https://docs.tangly1024.com/article/notion-next-mailchimp
+  STARTER_LOGO: '/images/landing-2/logo/logo.svg', // 普通logo
+  STARTER_LOGO_WHITE: '/images/landing-2/logo/logo-white.svg', // 透明底浅色logo
+
+  STARTER_NEWSLETTER: process.env.NEXT_PUBLIC_THEME_LANDING_NEWSLETTER || false // 是否开启邮件订阅 请先配置mailchimp功能 https://docs.tangly1024.com/article/notion-next-mailchimp
 }
 export default CONFIG
--- a/themes/starter/index.js
+++ b/themes/starter/index.js
@@ -63,7 +63,7 @@ const LayoutBase = (props) => {

  return <div id='theme-starter'>
            <Style/>
-            <NavBar/>
+            <NavBar {...props}/>

            {children}