landing-2 导航菜单适配颜色

lib/global.js

@@ -39,7 +39,6 @@ export function GlobalContextProvider(props) {
   const toggleDarkMode = () => {
     const newStatus = !isDarkMode
     saveDarkModeToLocalStorage(newStatus)
-    console.log('切换中', isDarkMode, newStatus)
     updateDarkMode(newStatus)
     const htmlElement = document.getElementsByTagName('html')[0]
     htmlElement.classList?.remove(newStatus ? 'light' : 'dark')

themes/landing-2/components/DarkModeButton.js

@@ -1,8 +1,9 @@
 import { useGlobal } from '@/lib/global';
+import { useRouter } from 'next/router';
 
 export const DarkModeButton = () => {
   const { toggleDarkMode } = useGlobal()
-
+  const router = useRouter()
   return <>
             <label
                 for="themeSwitcher"
@@ -18,7 +19,7 @@ export const DarkModeButton = () => {
                   className="sr-only"
                 />
 
-                <span className="block text-white dark:hidden">
+                <span className={`block ${router.route === '/' ? 'text-white' : ''} dark:hidden`}>
                   <svg
                     className="fill-current"
                     width="24"

themes/landing-2/components/Logo.js

@@ -1,49 +1,36 @@
+import { useGlobal } from '@/lib/global';
 import throttle from 'lodash.throttle';
 import Link from 'next/link'
-import { useCallback, useEffect } from 'react';
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
 
 /**
  * 站点图标
  * @returns
  */
 export const Logo = () => {
+  const router = useRouter()
+  const { isDarkMode } = useGlobal()
   useEffect(() => {
-    window.addEventListener('scroll', navBarScollListener)
+    navBarScrollListener()
+    window.addEventListener('scroll', navBarScrollListener)
     return () => {
-      window.removeEventListener('scroll', navBarScollListener)
+      window.removeEventListener('scroll', navBarScrollListener)
     }
-  }, [])
+  }, [isDarkMode])
 
   // 滚动监听
   const throttleMs = 200
-  const navBarScollListener = useCallback(
-    throttle(() => {
-    // eslint-disable-next-line camelcase
-      const ud_header = document.querySelector('.ud-header');
-      const logo = document.querySelector('.header-logo');
-
-      const scrollY = window.scrollY;
-
-      // 控制台输出当前滚动位置和 sticky 值
-      if (scrollY > 0) {
-        ud_header.classList.add('sticky');
-        // 根据导航栏状态修改 logo
-        if (logo) {
-          logo.src = '/images/landing-2/logo/logo.svg';
-        }
-      } else {
-        ud_header.classList.remove('sticky');
-        // 根据导航栏状态修改 logo
-        if (logo) {
-          logo.src = '/images/landing-2/logo/logo-white.svg';
-        }
-      }
-
-      // 显示或隐藏返回顶部按钮
-      const backToTop = document.querySelector('.back-to-top');
-      backToTop.style.display = scrollY > 50 ? 'flex' : 'none';
-    }, throttleMs)
-  )
+  const navBarScrollListener = throttle(() => {
+    const logo = document.querySelector('.header-logo');
+    const scrollY = window.scrollY;
+    // 何时显示浅色或白底的logo
+    if (isDarkMode || (!isDarkMode && router.route === '/' && scrollY < 1)) {
+      logo.src = '/images/landing-2/logo/logo-white.svg';
+    } else {
+      logo.src = '/images/landing-2/logo/logo.svg';
+    }
+  }, throttleMs)
 
   return <>
     <div className="w-60 max-w-full px-4">

themes/landing-2/components/MadeWithButton.js

@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 export const MadeWithButton = () => {
   return <>
         {/* <!-- ====== Made With Button Start --> */}

themes/landing-2/components/MenuList.js

@@ -1,16 +1,20 @@
+import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 /**
  * 响应式 折叠菜单
  */
 export const MenuList = () => {
+  const router = useRouter()
+
   useEffect(() => {
     // ===== responsive navbar
     const navbarToggler = document.querySelector('#navbarToggler');
     const navbarCollapse = document.querySelector('#navbarCollapse');
 
-    navbarToggler.addEventListener('click', () => {
-      navbarToggler.classList.toggle('navbarTogglerActive');
-      navbarCollapse.classList.toggle('hidden');
+    // 点击弹出菜单
+    navbarToggler?.addEventListener('click', () => {
+      navbarToggler?.classList.toggle('navbarTogglerActive');
+      navbarCollapse?.classList.toggle('hidden');
     });
 
     //= ==== close navbar-collapse when a  clicked
@@ -18,94 +22,46 @@ export const MenuList = () => {
       .querySelectorAll('#navbarCollapse ul li:not(.submenu-item) a')
       .forEach((e) =>
         e.addEventListener('click', () => {
-          navbarToggler.classList.remove('navbarTogglerActive');
-          navbarCollapse.classList.add('hidden');
+          navbarToggler?.classList.remove('navbarTogglerActive');
+          navbarCollapse?.classList.add('hidden');
         })
       );
 
     // ===== Sub-menu
     const submenuItems = document.querySelectorAll('.submenu-item');
     submenuItems.forEach((el) => {
-      el.querySelector('a').addEventListener('click', () => {
-        el.querySelector('.submenu').classList.toggle('hidden');
+      el.querySelector('a')?.addEventListener('click', () => {
+        el.querySelector('.submenu')?.classList.toggle('hidden');
       });
     });
   }, [])
 
   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"
-                ></span>
-                <span
-                  className="relative my-[6px] block h-[2px] w-[30px] bg-white"
-                ></span>
-                <span
-                  className="relative my-[6px] block h-[2px] w-[30px] bg-white"
-                ></span>
+                {/* 移动端菜单切换按钮 */}
+              <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>
+                <span className="relative my-[6px] block h-[2px] w-[30px] bg-white duration-200 transition-all" ></span>
               </button>
-              <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"
-              >
+
+              {/* 响应式菜单 */}
+              <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">
                     <a
                       href="#home"
-                      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 lg:text-white lg:group-hover:text-white lg:group-hover:opacity-70"
+                      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`}
                     >
-                      Home
-                    </a>
-                  </li>
-                  <li className="group relative">
-                    <a
-                      href="#about"
-                      className="ud-menu-scroll mx-8 flex py-2 text-base font-medium text-dark group-hover:text-primary dark:text-white lg:ml-7 lg:mr-0 lg:inline-flex lg:px-0 lg:py-6 lg:text-white lg:group-hover:text-white lg:group-hover:opacity-70 xl:ml-10"
-                    >
-                      About
-                    </a>
-                  </li>
-                  <li className="group relative">
-                    <a
-                      href="#pricing"
-                      className="ud-menu-scroll mx-8 flex py-2 text-base font-medium text-dark group-hover:text-primary dark:text-white lg:ml-7 lg:mr-0 lg:inline-flex lg:px-0 lg:py-6 lg:text-white lg:group-hover:text-white lg:group-hover:opacity-70 xl:ml-10"
-                    >
-                      Pricing
-                    </a>
-                  </li>
-                  <li className="group relative">
-                    <a
-                      href="#team"
-                      className="ud-menu-scroll mx-8 flex py-2 text-base font-medium text-dark group-hover:text-primary dark:text-white lg:ml-7 lg:mr-0 lg:inline-flex lg:px-0 lg:py-6 lg:text-white lg:group-hover:text-white lg:group-hover:opacity-70 xl:ml-10"
-                    >
-                      Team
-                    </a>
-                  </li>
-                  <li className="group relative">
-                    <a
-                      href="#contact"
-                      className="ud-menu-scroll mx-8 flex py-2 text-base font-medium text-dark group-hover:text-primary dark:text-white lg:ml-7 lg:mr-0 lg:inline-flex lg:px-0 lg:py-6 lg:text-white lg:group-hover:text-white lg:group-hover:opacity-70 xl:ml-10"
-                    >
-                      Contact
-                    </a>
-                  </li>
-                  <li className="group relative">
-                    <a
-                      href="blog-grids.html"
-                      className="ud-menu-scroll mx-8 flex py-2 text-base font-medium text-dark group-hover:text-primary dark:text-white lg:ml-7 lg:mr-0 lg:inline-flex lg:px-0 lg:py-6 lg:text-white lg:group-hover:text-white lg:group-hover:opacity-70 xl:ml-10"
-                    >
-                      Blog
+                      Home1
                     </a>
                   </li>
+                  {/* 有子菜单的MenuItem */}
                   <li className="submenu-item group relative">
                     <a
                       href="javascript:void(0)"
-                      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 lg:text-white lg:group-hover:text-white lg:group-hover:opacity-70 xl:ml-10"
+                      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
 
@@ -125,54 +81,13 @@ export const MenuList = () => {
                     <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 */}
                       <a
                         href="about.html"
                         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
                       </a>
-                      <a
-                        href="pricing.html"
-                        className="block rounded px-4 py-[10px] text-sm text-body-color hover:text-primary dark:text-dark-6 dark:hover:text-primary"
-                      >
-                        Pricing Page
-                      </a>
-                      <a
-                        href="contact.html"
-                        className="block rounded px-4 py-[10px] text-sm text-body-color hover:text-primary dark:text-dark-6 dark:hover:text-primary"
-                      >
-                        Contact Page
-                      </a>
-                      <a
-                        href="blog-grids.html"
-                        className="block rounded px-4 py-[10px] text-sm text-body-color hover:text-primary dark:text-dark-6 dark:hover:text-primary"
-                      >
-                        Blog Grid Page
-                      </a>
-                      <a
-                        href="blog-details.html"
-                        className="block rounded px-4 py-[10px] text-sm text-body-color hover:text-primary dark:text-dark-6 dark:hover:text-primary"
-                      >
-                        Blog Details Page
-                      </a>
-                      <a
-                        href="signup.html"
-                        className="block rounded px-4 py-[10px] text-sm text-body-color hover:text-primary dark:text-dark-6 dark:hover:text-primary"
-                      >
-                        Sign Up Page
-                      </a>
-                      <a
-                        href="signin.html"
-                        className="block rounded px-4 py-[10px] text-sm text-body-color hover:text-primary dark:text-dark-6 dark:hover:text-primary"
-                      >
-                        Sign In Page
-                      </a>
-                      <a
-                        href="404.html"
-                        className="block rounded px-4 py-[10px] text-sm text-body-color hover:text-primary dark:text-dark-6 dark:hover:text-primary"
-                      >
-                        404 Page
-                      </a>
                     </div>
                   </li>
                 </ul>

themes/landing-2/components/NavBar.js

@@ -4,11 +4,13 @@ import { useCallback, useEffect } from 'react'
 import { MenuList } from './MenuList';
 import { DarkModeButton } from './DarkModeButton';
 import { Logo } from './Logo';
+import { useRouter } from 'next/router';
 
 /**
  * 顶部导航栏
  */
 export const NavBar = () => {
+  const router = useRouter()
   useEffect(() => {
     // ======= Sticky
     window.addEventListener('scroll', navBarScollListener)
@@ -57,13 +59,13 @@ export const NavBar = () => {
                         <div className="hidden sm:flex">
                             <a
                             href="signin.html"
-                            className="loginBtn px-[22px] py-2 text-base font-medium text-white hover:opacity-70"
+                            className={`loginBtn px-[22px] py-2 text-base font-medium ${router.route === '/' ? 'text-white' : ''} hover:opacity-70`}
                             >
                             Sign In
                             </a>
                             <a
                             href="signup.html"
-                            className="signUpBtn rounded-md bg-white bg-opacity-20 px-6 py-2 text-base font-medium text-white duration-300 ease-in-out hover:bg-opacity-100 hover:text-dark"
+                            className={`signUpBtn rounded-md bg-white bg-opacity-20 px-6 py-2 text-base font-medium ${router.route === '/' ? 'text-white' : ''} duration-300 ease-in-out hover:bg-opacity-100 hover:text-dark`}
                             >
                             Sign Up
                             </a>

themes/landing-2/index.js

@@ -1,3 +1,5 @@
+/* eslint-disable react/no-unescaped-entities */
+/* eslint-disable @next/next/no-img-element */
 
 'use client'
 
@@ -30,6 +32,7 @@ import { Footer } from './components/Footer'
 import { BackToTopButton } from './components/BackToTopButton'
 import { MadeWithButton } from './components/MadeWithButton'
 import { LAYOUT_MAPPINGS } from '@/blog.config'
+import { SVG404 } from './components/SVG404'
 
 /**
  * 一些外部js
@@ -120,10 +123,51 @@ const LayoutSlug = (props) => {
     </>
 }
 
-// 其他布局暂时留空
 const LayoutSearch = (props) => <></>
 const LayoutArchive = (props) => <></>
-const Layout404 = (props) => <></>
+const Layout404 = (props) => {
+  return <>
+     {/* <!-- ====== 404 Section Start --> */}
+        <section class="bg-white py-20 dark:bg-dark-2 lg:py-[110px]">
+          <div class="container mx-auto">
+            <div class="flex flex-wrap items-center -mx-4">
+              <div class="w-full px-4 md:w-5/12 lg:w-6/12">
+                <div class="text-center">
+                  <img
+                    src="/images/landing-2/404.svg"
+                    alt="image"
+                    class="max-w-full mx-auto"
+                  />
+                </div>
+              </div>
+              <div class="w-full px-4 md:w-7/12 lg:w-6/12 xl:w-5/12">
+                <div>
+                  <div class="mb-8">
+                    <SVG404/>
+                  </div>
+                  <h3 class="mb-5 text-2xl font-semibold text-dark dark:text-white">
+                    We Can't Seem to Find The Page You're Looking For.
+                  </h3>
+                  <p class="mb-8 text-base text-body-color dark:text-dark-6">
+                    Oops! The page you are looking for does not exist. It might have
+                    been moved or deleted.
+                  </p>
+                  <a
+                    href="javascript:void(0)"
+                    class="py-3 text-base font-medium text-white transition rounded-md bg-dark px-7 hover:bg-primary"
+                  >
+                    Go To Home
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+        {/* <!-- ====== 404 Section End --> */}
+
+    </>
+}
+
 const LayoutCategoryIndex = (props) => <></>
 const LayoutPostList = (props) => <></>
 const LayoutTagIndex = (props) => <></>

themes/landing-2/style.js

@@ -7,8 +7,7 @@
  */
 const Style = () => {
   return <style jsx global>{`
-    
-    
+  
   .sticky{
     position: fixed;
     z-index: 9999;
@@ -137,6 +136,15 @@ const Style = () => {
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
   
+  .text-body-color{
+    --tw-text-opacity: 1;
+    color: rgb(99 115 129 / var(--tw-text-opacity));
+  }
+  
+  .text-body-secondary{
+    --tw-text-opacity: 1;
+    color: rgb(136 153 168 / var(--tw-text-opacity));
+  }
 
   `}</style>
 }