From ffc6db74cb85cab2c3fdf069a830d3b31cc2d79e Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Tue, 4 Jul 2023 19:02:38 +0800 Subject: [PATCH] refactor-hexo --- themes/hexo/Layout404.js | 33 --- themes/hexo/LayoutArchive.js | 36 --- themes/hexo/LayoutBase.js | 101 ------- themes/hexo/LayoutCategory.js | 17 -- themes/hexo/LayoutCategoryIndex.js | 41 --- themes/hexo/LayoutIndex.js | 16 -- themes/hexo/LayoutPage.js | 10 - themes/hexo/LayoutSearch.js | 101 ------- themes/hexo/LayoutSlug.js | 86 ------ themes/hexo/LayoutTag.js | 34 --- themes/hexo/LayoutTagIndex.js | 30 -- themes/hexo/components/Header.js | 8 +- themes/hexo/components/NavButtonGroup.js | 2 +- themes/hexo/components/RightFloatArea.js | 42 +++ themes/hexo/components/SearchNav.js | 70 +++++ themes/hexo/components/SideRight.js | 21 +- themes/hexo/components/SlotBar.js | 24 ++ themes/hexo/index.js | 340 ++++++++++++++++++++++- 18 files changed, 487 insertions(+), 525 deletions(-) delete mode 100644 themes/hexo/Layout404.js delete mode 100644 themes/hexo/LayoutArchive.js delete mode 100644 themes/hexo/LayoutBase.js delete mode 100644 themes/hexo/LayoutCategory.js delete mode 100644 themes/hexo/LayoutCategoryIndex.js delete mode 100644 themes/hexo/LayoutIndex.js delete mode 100644 themes/hexo/LayoutPage.js delete mode 100644 themes/hexo/LayoutSearch.js delete mode 100644 themes/hexo/LayoutSlug.js delete mode 100644 themes/hexo/LayoutTag.js delete mode 100644 themes/hexo/LayoutTagIndex.js create mode 100644 themes/hexo/components/RightFloatArea.js create mode 100644 themes/hexo/components/SearchNav.js create mode 100644 themes/hexo/components/SlotBar.js diff --git a/themes/hexo/Layout404.js b/themes/hexo/Layout404.js deleted file mode 100644 index 5dfe020f..00000000 --- a/themes/hexo/Layout404.js +++ /dev/null @@ -1,33 +0,0 @@ -import LayoutBase from './LayoutBase' -import { useRouter } from 'next/router' -import { useEffect } from 'react' - -export const Layout404 = props => { - const router = useRouter() - useEffect(() => { - // 延时3秒如果加载失败就返回首页 - setTimeout(() => { - const article = typeof document !== 'undefined' && document.getElementById('notion-article') - if (!article) { - router.push('/').then(() => { - // console.log('找不到页面', router.asPath) - }) - } - }, 3000) - }) - return ( - -
-
-

- 404 -

-
-

页面未找到

-
-
-
- - ) -} -export default Layout404 diff --git a/themes/hexo/LayoutArchive.js b/themes/hexo/LayoutArchive.js deleted file mode 100644 index 44f81c08..00000000 --- a/themes/hexo/LayoutArchive.js +++ /dev/null @@ -1,36 +0,0 @@ -import { useEffect } from 'react' -import BlogPostArchive from './components/BlogPostArchive' -import Card from './components/Card' -import LayoutBase from './LayoutBase' - -export const LayoutArchive = (props) => { - const { archivePosts } = props - - useEffect(() => { - const anchor = window.location.hash - if (anchor) { - setTimeout(() => { - const anchorElement = document.getElementById(anchor.substring(1)) - if (anchorElement) { - anchorElement.scrollIntoView({ block: 'start', behavior: 'smooth' }) - } - }, 300) - } - }, []) - - return - -
- {Object.keys(archivePosts).map(archiveTitle => ( - - ))} -
- - -} - -export default LayoutArchive diff --git a/themes/hexo/LayoutBase.js b/themes/hexo/LayoutBase.js deleted file mode 100644 index 8c2d72f2..00000000 --- a/themes/hexo/LayoutBase.js +++ /dev/null @@ -1,101 +0,0 @@ -import CommonHead from '@/components/CommonHead' -import { useCallback, useEffect, useState } from 'react' -import throttle from 'lodash.throttle' -import Footer from './components/Footer' -import JumpToTopButton from './components/JumpToTopButton' -import SideRight from './components/SideRight' -import TopNav from './components/TopNav' -import FloatDarkModeButton from './components/FloatDarkModeButton' -import Live2D from '@/components/Live2D' -import LoadingCover from './components/LoadingCover' -import { useGlobal } from '@/lib/global' -import BLOG from '@/blog.config' -import dynamic from 'next/dynamic' -import { isBrowser, loadExternalResource } from '@/lib/utils' -import CONFIG_HEXO from './config_hexo' - -const FacebookPage = dynamic( - () => { - let facebook = <> - try { - facebook = import('@/components/FacebookPage') - } catch (err) { - console.error(err) - } - return facebook - }, - { ssr: false } -) - -/** - * 基础布局 采用左右两侧布局，移动端使用顶部导航栏 - * @param props - * @returns {JSX.Element} - * @constructor - */ -const LayoutBase = props => { - const { children, headerSlot, floatSlot, meta, siteInfo } = props - const [showFloatButton, switchShow] = useState(false) - // const [percent, changePercent] = useState(0) // 页面阅读百分比 - const rightAreaSlot = ( - <> - - - - ) - const { onLoading } = useGlobal() - const throttleMs = 200 - const scrollListener = useCallback(throttle(() => { - const targetRef = document.getElementById('wrapper') - const clientHeight = targetRef?.clientHeight - const scrollY = window.pageYOffset - const fullHeight = clientHeight - window.outerHeight - let per = parseFloat(((scrollY / fullHeight) * 100).toFixed(0)) - if (per > 100) per = 100 - const shouldShow = scrollY > 100 && per > 0 - - if (shouldShow !== showFloatButton) { - switchShow(shouldShow) - } - }, throttleMs)) - useEffect(() => { - document.addEventListener('scroll', scrollListener) - return () => document.removeEventListener('scroll', scrollListener) - }, []) - - if (isBrowser()) { - loadExternalResource('/css/theme-hexo.css', 'css') - } - - return ( -
- - - - - {headerSlot} - -
-
-
- {onLoading ? : children} -
- -
-
- - {/* 右下角悬浮 */} -
-
- - {floatSlot} - -
-
- -
-
- ) -} - -export default LayoutBase diff --git a/themes/hexo/LayoutCategory.js b/themes/hexo/LayoutCategory.js deleted file mode 100644 index 3aedefef..00000000 --- a/themes/hexo/LayoutCategory.js +++ /dev/null @@ -1,17 +0,0 @@ -import BlogPostListScroll from './components/BlogPostListScroll' -import BlogPostListPage from './components/BlogPostListPage' -import LayoutBase from './LayoutBase' -import BLOG from '@/blog.config' - -export const LayoutCategory = props => { - const { category } = props - return -
- - {category} -
- {BLOG.POST_LIST_STYLE === 'page' ? : } - -} - -export default LayoutCategory diff --git a/themes/hexo/LayoutCategoryIndex.js b/themes/hexo/LayoutCategoryIndex.js deleted file mode 100644 index bd4e278e..00000000 --- a/themes/hexo/LayoutCategoryIndex.js +++ /dev/null @@ -1,41 +0,0 @@ -import { useGlobal } from '@/lib/global' -import Link from 'next/link' -import Card from './components/Card' -import LayoutBase from './LayoutBase' - -export const LayoutCategoryIndex = props => { - const { categoryOptions } = props - const { locale } = useGlobal() - return ( - - -
- - {locale.COMMON.CATEGORY}: -
-
- {categoryOptions.map(category => { - return ( - -
- - {category.name}({category.count}) -
- - ) - })} -
- - - ) -} - -export default LayoutCategoryIndex diff --git a/themes/hexo/LayoutIndex.js b/themes/hexo/LayoutIndex.js deleted file mode 100644 index 2d7a1a95..00000000 --- a/themes/hexo/LayoutIndex.js +++ /dev/null @@ -1,16 +0,0 @@ -import BLOG from '@/blog.config' -import BlogPostListPage from './components/BlogPostListPage' -import BlogPostListScroll from './components/BlogPostListScroll' -import Header from './components/Header' -import CONFIG_HEXO from './config_hexo' -import LayoutBase from './LayoutBase' -import React from 'react' - -export const LayoutIndex = (props) => { - const headerSlot = CONFIG_HEXO.HOME_BANNER_ENABLE &&
- return - {BLOG.POST_LIST_STYLE === 'page' ? : } - -} - -export default LayoutIndex diff --git a/themes/hexo/LayoutPage.js b/themes/hexo/LayoutPage.js deleted file mode 100644 index 58d35c0a..00000000 --- a/themes/hexo/LayoutPage.js +++ /dev/null @@ -1,10 +0,0 @@ -import BlogPostListPage from './components/BlogPostListPage' -import LayoutBase from './LayoutBase' - -export const LayoutPage = (props) => { - return - - -} - -export default LayoutPage diff --git a/themes/hexo/LayoutSearch.js b/themes/hexo/LayoutSearch.js deleted file mode 100644 index 1098e483..00000000 --- a/themes/hexo/LayoutSearch.js +++ /dev/null @@ -1,101 +0,0 @@ -import { useRouter } from 'next/router' -import { useEffect, useRef } from 'react' -import BLOG from '@/blog.config' -import BlogPostListScroll from './components/BlogPostListScroll' -import BlogPostListPage from './components/BlogPostListPage' -import LayoutBase from './LayoutBase' -import SearchInput from './components/SearchInput' -import { useGlobal } from '@/lib/global' -import Mark from 'mark.js' -import TagItemMini from './components/TagItemMini' -import Card from './components/Card' -import Link from 'next/link' - -export const LayoutSearch = props => { - const { keyword, tagOptions, categoryOptions } = props - const { locale } = useGlobal() - const router = useRouter() - const currentSearch = keyword || router?.query?.s - const cRef = useRef(null) - - useEffect(() => { - setTimeout(() => { - // 自动聚焦到搜索框 - cRef?.current?.focus() - if (currentSearch) { - const targets = document.getElementsByClassName('replace') - for (const container of targets) { - if (container && container.innerHTML) { - const re = new RegExp(currentSearch, 'gim') - const instance = new Mark(container) - instance.markRegExp(re, { - element: 'span', - className: 'text-red-500 border-b border-dashed' - }) - } - } - } - }, 100) - }) - return ( - - {!currentSearch && <> -
- - {/* 分类 */} - -
- - {locale.COMMON.CATEGORY}: -
-
- {categoryOptions?.map(category => { - return ( - -
- - {category.name}({category.count}) -
- - ) - })} -
- - {/* 标签 */} - -
- - {locale.COMMON.TAGS}: -
-
- {tagOptions?.map(tag => { - return ( -
- -
- ) - })} -
- -
- } - - {currentSearch && <> -
- {BLOG.POST_LIST_STYLE === 'page' ? : } -
- } - - - ) -} - -export default LayoutSearch diff --git a/themes/hexo/LayoutSlug.js b/themes/hexo/LayoutSlug.js deleted file mode 100644 index 5e2663fa..00000000 --- a/themes/hexo/LayoutSlug.js +++ /dev/null @@ -1,86 +0,0 @@ -import { useRef } from 'react' -import { ArticleLock } from './components/ArticleLock' -import HeaderArticle from './components/HeaderArticle' -import JumpToCommentButton from './components/JumpToCommentButton' -import TocDrawer from './components/TocDrawer' -import TocDrawerButton from './components/TocDrawerButton' -import LayoutBase from './LayoutBase' -import Comment from '@/components/Comment' -import NotionPage from '@/components/NotionPage' -import ArticleAdjacent from './components/ArticleAdjacent' -import ArticleCopyright from './components/ArticleCopyright' -import ArticleRecommend from './components/ArticleRecommend' -import { isBrowser } from '@/lib/utils' -import ShareBar from '@/components/ShareBar' - -export const LayoutSlug = props => { - const { post, lock, validPassword } = props - const drawerRight = useRef(null) - - if (!post) { - return } - {...props} - showCategory={false} - showTag={false} - > - } - - const targetRef = isBrowser() ? document.getElementById('article-wrapper') : null - - const floatSlot = <> - {post?.toc?.length > 1 &&
- { - drawerRight?.current?.handleSwitchVisible() - }} - /> -
} - - - - return ( - } - {...props} - showCategory={false} - showTag={false} - floatSlot={floatSlot} - > -
- {lock && } - - {!lock &&
- -
- {/* Notion文章主体 */} -
- {post && } -
- - {/* 分享 */} - - {post.type === 'Post' && } - {post.type === 'Post' && } - {post.type === 'Post' && } - -
- -
- - {/* 评论互动 */} -
- -
-
} -
- -
- -
- - - ) -} - -export default LayoutSlug diff --git a/themes/hexo/LayoutTag.js b/themes/hexo/LayoutTag.js deleted file mode 100644 index cd72a015..00000000 --- a/themes/hexo/LayoutTag.js +++ /dev/null @@ -1,34 +0,0 @@ -import BLOG from '@/blog.config' -import BlogPostListScroll from './components/BlogPostListScroll' -import BlogPostListPage from './components/BlogPostListPage' -import LayoutBase from './LayoutBase' -import React from 'react' -import Link from 'next/link' - -export const LayoutTag = (props) => { - const tag = props?.tagOptions?.find((t) => { - return t.name === props.tag - }) - - return ( - - {tag && ( -
- - -
#{tag.name + (tag.count ? `(${tag.count})` : '')}
- - -
- )} - {BLOG.POST_LIST_STYLE === 'page' ? : } - - ) -} - -export default LayoutTag diff --git a/themes/hexo/LayoutTagIndex.js b/themes/hexo/LayoutTagIndex.js deleted file mode 100644 index 40e7e234..00000000 --- a/themes/hexo/LayoutTagIndex.js +++ /dev/null @@ -1,30 +0,0 @@ -import { useGlobal } from '@/lib/global' -import Card from './components/Card' -import TagItemMini from './components/TagItemMini' -import LayoutBase from './LayoutBase' - -export const LayoutTagIndex = props => { - const { tagOptions } = props - const { locale } = useGlobal() - return ( - - -
- - {locale.COMMON.TAGS}: -
-
- {tagOptions.map(tag => { - return ( -
- -
- ) - })} -
- - - ) -} - -export default LayoutTagIndex diff --git a/themes/hexo/components/Header.js b/themes/hexo/components/Header.js index 88fca1c2..1f614b55 100644 --- a/themes/hexo/components/Header.js +++ b/themes/hexo/components/Header.js @@ -9,10 +9,10 @@ import BLOG from '@/blog.config' let wrapperTop = 0 /** - * - * @returns 头图 + * 顶部全屏大图 + * @returns */ -const Header = props => { +const Hero = props => { const [typed, changeType] = useState() const { siteInfo } = props const { locale } = useGlobal() @@ -79,4 +79,4 @@ const Header = props => { ) } -export default Header +export default Hero diff --git a/themes/hexo/components/NavButtonGroup.js b/themes/hexo/components/NavButtonGroup.js index 0dd7111a..2a3fc898 100644 --- a/themes/hexo/components/NavButtonGroup.js +++ b/themes/hexo/components/NavButtonGroup.js @@ -14,7 +14,7 @@ const NavButtonGroup = (props) => { } return ( -