From aa284a5041a87654fa456ff96c9efcaeb7c0bd80 Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Mon, 7 Aug 2023 14:22:23 +0800 Subject: [PATCH] =?UTF-8?q?Nobelium=E4=B8=BB=E9=A2=98=E8=8F=9C=E5=8D=95?= =?UTF-8?q?=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/AlgoliaSearchModal.js | 2 +- styles/globals.css | 18 ---- styles/notion.css | 4 + themes/nobelium/components/Footer.js | 2 +- themes/nobelium/components/Nav.js | 27 ++++-- .../nobelium/components/RandomPostButton.js | 26 ++++++ themes/nobelium/components/SearchButton.js | 28 ++++++ themes/nobelium/config.js | 12 ++- themes/nobelium/index.js | 86 +++++++++++-------- 9 files changed, 136 insertions(+), 69 deletions(-) create mode 100644 themes/nobelium/components/RandomPostButton.js create mode 100644 themes/nobelium/components/SearchButton.js diff --git a/components/AlgoliaSearchModal.js b/components/AlgoliaSearchModal.js index b927fee2..e1ba9f3e 100644 --- a/components/AlgoliaSearchModal.js +++ b/components/AlgoliaSearchModal.js @@ -102,7 +102,7 @@ export default function AlgoliaSearchModal({ cRef }) { } return ( -
+
{/* 模态框 */}
diff --git a/styles/globals.css b/styles/globals.css index 5151e216..67644891 100644 --- 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 diff --git a/styles/notion.css b/styles/notion.css index 965723be..c7d939be 100644 --- 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; */ } diff --git a/themes/nobelium/components/Footer.js b/themes/nobelium/components/Footer.js index e2b296b5..6b4b7857 100644 --- 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' }`} > - +
diff --git a/themes/nobelium/components/Nav.js b/themes/nobelium/components/Nav.js index 1f12d532..7e6c12ac 100644 --- 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 <>
@@ -102,19 +102,30 @@ const NavBar = props => { } return ( -
-
    +
    +
      {links?.map(link => )}
    -
    +
    {links?.map(link => collapseRef.current?.updateCollapseHeight(param)}/>)}
    + + {JSON.parse(CONFIG.MENU_RANDOM_POST) && } + {JSON.parse(CONFIG.MENU_SEARCH_BUTTON) && } +
    ) } export default Nav + +/** + * + {!JSON.parse(BLOG.THEME_SWITCH) &&
    } + + + */ diff --git a/themes/nobelium/components/RandomPostButton.js b/themes/nobelium/components/RandomPostButton.js new file mode 100644 index 00000000..a8a0597f --- /dev/null +++ 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 ( +
    + +
    + ) +} diff --git a/themes/nobelium/components/SearchButton.js b/themes/nobelium/components/SearchButton.js new file mode 100644 index 00000000..91e805c3 --- /dev/null +++ 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 <> +
    + +
    + +} diff --git a/themes/nobelium/config.js b/themes/nobelium/config.js index 75f2e597..18dd8488 100644 --- 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 diff --git a/themes/nobelium/index.js b/themes/nobelium/index.js index af1c427e..dae3c2d3 100644 --- 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 ( -
    - {/* SEO相关 */} - - {/* SEO相关 */} -