Merge pull request #1426 from tangly1024/feat/nobelium-menu

Nobelium主题菜单优化
2026-05-14 07:26:52 +00:00 · 2023-08-07 14:27:46 +08:00
parent 0ee562f7e6 aa284a5041
commit 9197b3c6bb
9 changed files with 136 additions and 69 deletions
--- a/components/AlgoliaSearchModal.js
+++ b/components/AlgoliaSearchModal.js
@@ -102,7 +102,7 @@ export default function AlgoliaSearchModal({ cRef }) {
  }

  return (
-        <div id='search-wrapper' className={`${isModalOpen ? 'opacity-100' : 'invisible opacity-0 pointer-events-none'} fixed h-screen w-screen left-0 top-0 mt-12 flex items-start justify-center`}>
+        <div id='search-wrapper' className={`${isModalOpen ? 'opacity-100' : 'invisible opacity-0 pointer-events-none'} z-30 fixed h-screen w-screen left-0 top-0 mt-12 flex items-start justify-center`}>

            {/* 模态框 */}
            <div className={`${isModalOpen ? 'opacity-100' : 'invisible opacity-0 translate-y-10'} flex flex-col justify-between w-full min-h-[10rem] max-w-xl dark:bg-hexo-black-gray dark:border-gray-800 bg-white dark:bg- p-5 rounded-lg z-50 shadow border hover:border-blue-600 duration-300 transition-all `}>
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -100,10 +100,6 @@ nav {
  width: 0 !important;
 }

-.notion-collection {
-  @apply max-w-0;
-}
-
 .glassmorphism {
  background: hsla(0, 0%, 100%, 0.05);
  -webkit-backdrop-filter: blur(10px);
@@ -159,20 +155,6 @@ nav {
  margin: -0.125em 0.25em;
 }

-
-.nobelium{
-    @apply flex flex-col justify-between
-}
-
-.nobelium .notion-code{
-    /* @apply max-w-2xl; */
-}
-
-.next #announcement-content *{
- font-size:13px !important;
- line-height:1.7 !important;
-}
-
 /* twikoo 评论区超链接样式 */
 .tk-main a {
   @apply text-blue-700
--- a/styles/notion.css
+++ b/styles/notion.css
@@ -1419,6 +1419,10 @@ code[class*='language-'] {
  margin-right: 6px;
 }

+.notion-collection {
+  @apply max-w-0;
+}
+
 .notion-collection-card{
  /* cursor: default !important; */
 }
--- a/themes/nobelium/components/Footer.js
+++ b/themes/nobelium/components/Footer.js
@@ -20,7 +20,7 @@ export const Footer = (props) => {
       !fullWidth ? 'max-w-2xl px-4' : 'px-4 md:px-24'
     }`}
   >
-     <DarkModeButton className='text-center pt-4'/>
+     <DarkModeButton className='text-center py-4'/>
     <hr className="border-gray-200 dark:border-gray-600" />
     <div className="my-4 text-sm leading-6">
       <div className="flex align-baseline justify-between flex-wrap">
--- a/themes/nobelium/components/Nav.js
+++ b/themes/nobelium/components/Nav.js
@@ -8,6 +8,8 @@ import { MenuItemDrop } from './MenuItemDrop'
 import Collapse from '@/components/Collapse'
 import { MenuItemCollapse } from './MenuItemCollapse'
 import LazyImage from '@/components/LazyImage'
+import RandomPostButton from './RandomPostButton'
+import SearchButton from './SearchButton'

 const Nav = props => {
  const { navBarTitle, fullWidth, siteInfo } = props
@@ -28,11 +30,9 @@ const Nav = props => {
  useEffect(() => {
    const obvserver = new window.IntersectionObserver(handler)
    obvserver.observe(sentinalRef.current)
-    // Don't touch this, I have no idea how it works XD
-    // return () => {
-    //   if (sentinalRef.current) obvserver.unobserve(sentinalRef.current)
-    // }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    return () => {
+      if (sentinalRef.current) obvserver.unobserve(sentinalRef.current)
+    }
  }, [sentinalRef])
  return <>
        <div className="observer-element h-4 md:h-12" ref={sentinalRef}></div>
@@ -102,19 +102,30 @@ const NavBar = props => {
  }

  return (
-        <div className="flex-shrink-0">
-            <ul className=" hidden md:flex flex-row">
+        <div className="flex-shrink-0 flex">
+            <ul className="hidden md:flex flex-row">
                {links?.map(link => <MenuItemDrop key={link?.id} link={link} />)}
            </ul>
-            <div className='md:hidden'><i onClick={toggleOpen} className='fas fa-bars cursor-pointer px-5 block md:hidden'></i>
+            <div className='md:hidden'>
                <Collapse collapseRef={collapseRef} isOpen={isOpen} type='vertical' className='fixed top-16 right-6'>
                    <div className='dark:border-black bg-white dark:bg-black rounded border p-2 text-sm'>
                        {links?.map(link => <MenuItemCollapse key={link?.id} link={link} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)}/>)}
                    </div>
                </Collapse>
            </div>
+
+            {JSON.parse(CONFIG.MENU_RANDOM_POST) && <RandomPostButton {...props} />}
+            {JSON.parse(CONFIG.MENU_SEARCH_BUTTON) && <SearchButton {...props}/>}
+            <i onClick={toggleOpen} className='fas fa-bars cursor-pointer px-5 flex justify-center items-center md:hidden'></i>
        </div>
  )
 }

 export default Nav
+
+/**
+ *
+                    {!JSON.parse(BLOG.THEME_SWITCH) && <div className='hidden md:block'><DarkModeButton {...props} /></div>}
+                    <ReadingProgress />
+
+ */
--- a/themes/nobelium/components/RandomPostButton.js
+++ b/themes/nobelium/components/RandomPostButton.js
@@ -0,0 +1,26 @@
+import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
+import { useRouter } from 'next/router'
+
+/**
+ * 随机跳转到一个文章
+ */
+export default function RandomPostButton(props) {
+  const { latestPosts } = props
+  const router = useRouter()
+  const { locale } = useGlobal()
+  /**
+   * 随机跳转文章
+   */
+  function handleClick() {
+    const randomIndex = Math.floor(Math.random() * latestPosts.length)
+    const randomPost = latestPosts[randomIndex]
+    router.push(`${BLOG.SUB_PATH}/${randomPost?.slug}`)
+  }
+
+  return (
+        <div title={locale.MENU.WALK_AROUND} className='cursor-pointer hover:bg-black hover:bg-opacity-10 rounded-full w-10 h-10 flex justify-center items-center duration-200 transition-all' onClick={handleClick}>
+            <i className="fa-solid fa-podcast"></i>
+        </div>
+  )
+}
--- a/themes/nobelium/components/SearchButton.js
+++ b/themes/nobelium/components/SearchButton.js
@@ -0,0 +1,28 @@
+import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
+import { useRouter } from 'next/router'
+import { useNobeliumGlobal } from '..'
+
+/**
+ * 搜索按钮
+ * @returns
+ */
+export default function SearchButton(props) {
+  const { locale } = useGlobal()
+  const { searchModal } = useNobeliumGlobal()
+  const router = useRouter()
+
+  function handleSearch() {
+    if (BLOG.ALGOLIA_APP_ID) {
+      searchModal.current.openSearch()
+    } else {
+      router.push('/search')
+    }
+  }
+
+  return <>
+        <div onClick={handleSearch} title={locale.NAV.SEARCH} alt={locale.NAV.SEARCH} className='cursor-pointer hover:bg-black hover:bg-opacity-10 rounded-full w-10 h-10 flex justify-center items-center duration-200 transition-all'>
+            <i title={locale.NAV.SEARCH} className="fa-solid fa-magnifying-glass" />
+        </div>
+    </>
+}
--- a/themes/nobelium/config.js
+++ b/themes/nobelium/config.js
@@ -1,13 +1,17 @@
 const CONFIG = {

-  // 菜单配置
+  NAV_NOTION_ICON: true, // 是否读取Notion图标作为站点头像 ; 否则默认显示黑色SVG方块
+
+  // 特殊菜单
+  MENU_RANDOM_POST: true, // 是否显示随机跳转文章按钮
+  MENU_SEARCH_BUTTON: true, // 是否显示搜索按钮，该按钮支持Algolia搜索
+
+  // 默认菜单配置 （开启自定义菜单后，以下配置则失效，请在Notion中自行配置菜单）
  MENU_CATEGORY: false, // 显示分类
  MENU_TAG: true, // 显示标签
  MENU_ARCHIVE: false, // 显示归档
  MENU_SEARCH: true, // 显示搜索
-  MENU_RSS: false, // 显示订阅
-
-  NAV_NOTION_ICON: true // 是否读取Notion图标作为站点头像
+  MENU_RSS: false // 显示订阅

 }
 export default CONFIG
--- a/themes/nobelium/index.js
+++ b/themes/nobelium/index.js
@@ -1,6 +1,6 @@
 import BLOG from '@/blog.config'
 import CONFIG from './config'
-import React, { useEffect, useState } from 'react'
+import React, { createContext, useEffect, useState, useContext, useRef } from 'react'
 import Nav from './components/Nav'
 import { Footer } from './components/Footer'
 import JumpToTopButton from './components/JumpToTopButton'
@@ -24,6 +24,11 @@ import { Transition } from '@headlessui/react'
 import { Style } from './style'
 import replaceSearchResult from '@/components/Mark'
 import CommonHead from '@/components/CommonHead'
+import AlgoliaSearchModal from '@/components/AlgoliaSearchModal'
+
+// 主题全局状态
+const ThemeGlobalNobelium = createContext()
+export const useNobeliumGlobal = () => useContext(ThemeGlobalNobelium)

 /**
 * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -36,51 +41,58 @@ const LayoutBase = props => {

  const fullWidth = post?.fullWidth ?? false
  const { onLoading } = useGlobal()
+  const searchModal = useRef(null)

  return (
-        <div id='theme-nobelium' className='nobelium relative dark:text-gray-300  w-full  bg-white dark:bg-black min-h-screen'>
-            {/* SEO相关 */}
-            <CommonHead meta={meta}/>
-            {/* SEO相关 */}
-            <Style/>
+        <ThemeGlobalNobelium.Provider value={{ searchModal }}>
+            <div id='theme-nobelium' className='nobelium relative dark:text-gray-300  w-full  bg-white dark:bg-black min-h-screen'>
+                {/* SEO相关 */}
+                <CommonHead meta={meta} />
+                {/* SEO相关 */}
+                <Style />

-            {/* 顶部导航栏 */}
-            <Nav {...props} />
+                {/* 顶部导航栏 */}
+                <Nav {...props} />

-            {/* 主区 */}
-            <main id='out-wrapper' className={`relative m-auto flex-grow w-full transition-all ${!fullWidth ? 'max-w-2xl px-4' : 'px-4 md:px-24'}`}>
+                {/* 主区 */}
+                <main id='out-wrapper' className={`relative m-auto flex-grow w-full transition-all ${!fullWidth ? 'max-w-2xl px-4' : 'px-4 md:px-24'}`}>

-                <Transition
-                    show={!onLoading}
-                    appear={true}
-                    enter="transition ease-in-out duration-700 transform order-first"
-                    enterFrom="opacity-0 translate-y-16"
-                    enterTo="opacity-100"
-                    leave="transition ease-in-out duration-300 transform"
-                    leaveFrom="opacity-100 translate-y-0"
-                    leaveTo="opacity-0 -translate-y-16"
-                    unmount={false}
-                >
-                    {/* 顶部插槽 */}
-                    {topSlot}
-                    {children}
-                </Transition>
+                    <Transition
+                        show={!onLoading}
+                        appear={true}
+                        enter="transition ease-in-out duration-700 transform order-first"
+                        enterFrom="opacity-0 translate-y-16"
+                        enterTo="opacity-100"
+                        leave="transition ease-in-out duration-300 transform"
+                        leaveFrom="opacity-100 translate-y-0"
+                        leaveTo="opacity-0 -translate-y-16"
+                        unmount={false}
+                    >
+                        {/* 顶部插槽 */}
+                        {topSlot}
+                        {children}
+                    </Transition>

-            </main>
+                </main>

-            {/* 页脚 */}
-            <Footer {...props} />
+                {/* 页脚 */}
+                <Footer {...props} />
+
+                {/* 右下悬浮 */}
+                <div className='fixed right-4 bottom-4'>
+                    <JumpToTopButton />
+                </div>
+
+                {/* 左下悬浮 */}
+                <div className="bottom-4 -left-14 fixed justify-end z-40">
+                    <Live2D />
+                </div>
+
+                {/* 搜索框 */}
+                <AlgoliaSearchModal cRef={searchModal} {...props}/>

-            {/* 右下悬浮 */}
-            <div className='fixed right-4 bottom-4'>
-                <JumpToTopButton />
            </div>
-
-            {/* 左下悬浮 */}
-            <div className="bottom-4 -left-14 fixed justify-end z-40">
-                <Live2D />
-            </div>
-        </div>
+        </ThemeGlobalNobelium.Provider>
  )
 }