{/* 左侧图标Logo */}
diff --git a/themes/gitbook/config_gitbook.js b/themes/gitbook/config.js
similarity index 88%
rename from themes/gitbook/config_gitbook.js
rename to themes/gitbook/config.js
index 2c563632..ce747181 100644
--- a/themes/gitbook/config_gitbook.js
+++ b/themes/gitbook/config.js
@@ -1,4 +1,4 @@
-const CONFIG_GITBOOK = {
+const CONFIG = {
INDEX_PAGE: 'about', // 文档首页显示的文章，请确此路径包含在您的notion数据库中
@@ -12,4 +12,4 @@ const CONFIG_GITBOOK = {
WIDGET_REVOLVER_MAPS: process.env.NEXT_PUBLIC_WIDGET_REVOLVER_MAPS || 'false', // 地图插件
WIDGET_TO_TOP: true // 跳回顶部
}
-export default CONFIG_GITBOOK
+export default CONFIG
diff --git a/themes/gitbook/index.js b/themes/gitbook/index.js
index 039b93c8..d3387d0e 100644
--- a/themes/gitbook/index.js
+++ b/themes/gitbook/index.js
@@ -1,25 +1,295 @@
-import CONFIG_GITBOOK from './config_gitbook'
-import LayoutIndex from './LayoutIndex'
-import LayoutSearch from './LayoutSearch'
-import LayoutArchive from './LayoutArchive'
-import LayoutSlug from './LayoutSlug'
-import Layout404 from './Layout404'
-import LayoutCategory from './LayoutCategory'
-import LayoutCategoryIndex from './LayoutCategoryIndex'
-import LayoutPage from './LayoutPage'
-import LayoutTag from './LayoutTag'
-import LayoutTagIndex from './LayoutTagIndex'
+'use client'
+
+import CONFIG from './config'
+import { useRouter } from 'next/router'
+import { useEffect, useState, createContext, useContext } from 'react'
+import { isBrowser } from '@/lib/utils'
+import CommonHead from '@/components/CommonHead'
+import Footer from './components/Footer'
+import InfoCard from './components/InfoCard'
+import RevolverMaps from './components/RevolverMaps'
+import TopNavBar from './components/TopNavBar'
+import SearchInput from './components/SearchInput'
+import { useGlobal } from '@/lib/global'
+import Live2D from '@/components/Live2D'
+import BLOG from '@/blog.config'
+import NavPostList from './components/NavPostList'
+import ArticleInfo from './components/ArticleInfo'
+import Catalog from './components/Catalog'
+import Announcement from './components/Announcement'
+import PageNavDrawer from './components/PageNavDrawer'
+import FloatTocButton from './components/FloatTocButton'
+import { AdSlot } from '@/components/GoogleAdsense'
+import JumpToTopButton from './components/JumpToTopButton'
+import ShareBar from '@/components/ShareBar'
+import CategoryItem from './components/CategoryItem'
+import TagItemMini from './components/TagItemMini'
+import ArticleAround from './components/ArticleAround'
+import Comment from '@/components/Comment'
+import TocDrawer from './components/TocDrawer'
+import NotionPage from '@/components/NotionPage'
+import { ArticleLock } from './components/ArticleLock'
+import { Transition } from '@headlessui/react'
+import { Style } from './style'
+
+// 主题全局变量
+const ThemeGlobalGitbook = createContext()
+export const useGitBookGlobal = () => useContext(ThemeGlobalGitbook)
+
+/**
+ * 基础布局
+ * 采用左右两侧布局，移动端使用顶部导航栏
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const LayoutBase = (props) => {
+ const { children, meta, post, allNavPages, slotLeft, slotRight, slotTop } = props
+ const { onLoading } = useGlobal()
+ const router = useRouter()
+ const [tocVisible, changeTocVisible] = useState(false)
+ const [pageNavVisible, changePageNavVisible] = useState(false)
+ const [filteredPostGroups, setFilteredPostGroups] = useState(allNavPages)
+
+ const showTocButton = post?.toc?.length > 1
+
+ useEffect(() => {
+ setFilteredPostGroups(allNavPages)
+ }, [post])
+
+ return (
+
+
+
+
+
+ {/* 顶部导航栏 */}
+
+
+
+
+ {/* 左侧推拉抽屉 */}
+
+
+ {slotLeft}
+
+ {/* 所有文章列表 */}
+
+
+
+
+
+
+
+
+
+
+ {slotTop}
+
+
+
+ {children}
+
+
+
+ {/* 回顶按钮 */}
+
+
+
+ {/* 底部 */}
+
+
+
+
+
+
+
+
+
+
+ {slotRight}
+ {router.route === '/' && <>
+
+ {CONFIG.WIDGET_REVOLVER_MAPS === 'true' &&
}
+
+ }
+ {/* gitbook主题首页只显示公告 */}
+
+
+
+
+
+
+
+
+ {/* 移动端悬浮目录按钮 */}
+ {showTocButton && !tocVisible &&
+
+
}
+
+ {/* 移动端导航抽屉 */}
+
+
+ {/* 移动端底部导航栏 */}
+ {/*
*/}
+
+
+ )
+}
+
+/**
+ * 首页
+ * 重定向到某个文章详情页
+ * @param {*} props
+ * @returns
+ */
+const LayoutIndex = (props) => {
+ const router = useRouter()
+ useEffect(() => {
+ router.push(CONFIG.INDEX_PAGE).then(() => {
+ // console.log('跳转到指定首页', CONFIG.INDEX_PAGE)
+ setTimeout(() => {
+ if (isBrowser()) {
+ const article = document.getElementById('notion-article')
+ if (!article) {
+ console.log('请检查您的Notion数据库中是否包含此slug页面： ', CONFIG.INDEX_PAGE)
+ const containerInner = document.getElementById('container-inner')
+ const newHTML = `
配置有误
请在您的notion中添加一个slug为${CONFIG.INDEX_PAGE}的文章
`
+ containerInner?.insertAdjacentHTML('afterbegin', newHTML)
+ }
+ }
+ }, 7 * 1000)
+ })
+ }, [])
+
+ return
+}
+
+/**
+ * 文章列表 无
+ * 全靠页面导航
+ * @param {*} props
+ * @returns
+ */
+const LayoutPostList = (props) => {
+ return
+}
+
+/**
+ * 文章详情
+ * @param {*} props
+ * @returns
+ */
+const LayoutSlug = (props) => {
+ const { post, prev, next, lock, validPassword } = props
+
+ return (
+
+ {/* 文章锁 */}
+ {lock && }
+
+ {!lock &&
+
+ {/* title */}
+
{post?.title}
+
+ {/* Notion文章主体 */}
+ {post && (
+
+
+ {/* 分享 */}
+
+ {/* 文章分类和标签信息 */}
+
+ {CONFIG.POST_DETAIL_CATEGORY && post?.category &&
}
+
+ {CONFIG.POST_DETAIL_TAG && post?.tagItems?.map(tag => )}
+
+
)}
+
+
+
+ )
+}
+
+/**
+ * 没有搜索
+ * 全靠页面导航
+ * @param {*} props
+ * @returns
+ */
+const LayoutSearch = (props) => {
+ return
+}
+
+/**
+ * 没有归档
+ * 全靠页面导航
+ * @param {*} props
+ * @returns
+ */
+const LayoutArchive = (props) => {
+ return
+}
+
+/**
+ * 404
+ */
+const Layout404 = props => {
+ return
+ 404 Not found.
+
+}
+
+/**
+ * 分类列表
+ */
+const LayoutCategoryIndex = (props) => {
+ return
+}
+
+/**
+ * 标签列表
+ */
+const LayoutTagIndex = (props) => {
+ return
+}
export {
- CONFIG_GITBOOK as THEME_CONFIG,
+ CONFIG as THEME_CONFIG,
LayoutIndex,
LayoutSearch,
LayoutArchive,
LayoutSlug,
Layout404,
- LayoutCategory,
LayoutCategoryIndex,
- LayoutPage,
- LayoutTag,
+ LayoutPostList,
LayoutTagIndex
}
diff --git a/themes/gitbook/style.js b/themes/gitbook/style.js
new file mode 100644
index 00000000..5e8eaa5a
--- /dev/null
+++ b/themes/gitbook/style.js
@@ -0,0 +1,18 @@
+/* eslint-disable react/no-unknown-property */
+/**
+ * 此处样式只对当前主题生效
+ * 此处不支持tailwindCSS的 @apply 语法
+ * @returns
+ */
+const Style = () => {
+ return
+}
+
+export { Style }
diff --git a/themes/heo/components/AnalyticsCard.js b/themes/heo/components/AnalyticsCard.js
new file mode 100644
index 00000000..a9d30477
--- /dev/null
+++ b/themes/heo/components/AnalyticsCard.js
@@ -0,0 +1,43 @@
+import CONFIG from '../config'
+
+/**
+ * 博客统计卡牌
+ * @param {*} props
+ * @returns
+ */
+export function AnalyticsCard(props) {
+ const targetDate = new Date(CONFIG.SITE_CREATE_TIME)
+ const today = new Date()
+ const diffTime = today.getTime() - targetDate.getTime() // 获取两个日期之间的毫秒数差值
+ const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) // 将毫秒数差值转换为天数差值
+
+ const { postCount } = props
+ return <>
+
+
+}
diff --git a/themes/heo/components/Announcement.js b/themes/heo/components/Announcement.js
new file mode 100644
index 00000000..6c3feb2a
--- /dev/null
+++ b/themes/heo/components/Announcement.js
@@ -0,0 +1,18 @@
+import dynamic from 'next/dynamic'
+
+const NotionPage = dynamic(() => import('@/components/NotionPage'))
+
+const Announcement = ({ post, className }) => {
+ if (post?.blockMap) {
+ return
+ {post && (
+
+
+
+ )}
+
+ } else {
+ return <>
+ }
+}
+export default Announcement
diff --git a/themes/heo/components/ArticleAdjacent.js b/themes/heo/components/ArticleAdjacent.js
new file mode 100644
index 00000000..ebfb0a3e
--- /dev/null
+++ b/themes/heo/components/ArticleAdjacent.js
@@ -0,0 +1,83 @@
+import Link from 'next/link'
+import { useEffect, useState } from 'react'
+import CONFIG from '../config'
+
+/**
+ * 上一篇，下一篇文章
+ * @param {prev,next} param0
+ * @returns
+ */
+export default function ArticleAdjacent({ prev, next }) {
+ const [isScrollEnd, setIsScrollEnd] = useState(false)
+
+ useEffect(() => {
+ // 文章是否已经到了底部
+ const targetElement = document.getElementById('article-end')
+
+ const handleIntersect = (entries) => {
+ entries.forEach((entry) => {
+ console.log(entry.isIntersecting)
+ if (entry.isIntersecting) {
+ setIsScrollEnd(true)
+ } else {
+ // setIsScrollEnd(false)
+ }
+ })
+ }
+
+ const options = {
+ root: null,
+ rootMargin: '0px',
+ threshold: 0.1
+ }
+
+ const observer = new IntersectionObserver(handleIntersect, options)
+ observer.observe(targetElement)
+
+ return () => {
+ observer.disconnect()
+ }
+ }, [])
+
+ if (!prev || !next || !CONFIG.ARTICLE_ADJACENT) {
+ return <>
+ }
+
+ return (
+
+ {/* 移动端 */}
+
+
+ 上一篇
+ {prev.title}
+
+
+ 下一篇
+ {next.title}
+
+
+
+ {/* 桌面端 */}
+
+
+
+
下一篇
+
+
{next?.title}
+
+
+
+
+ )
+}
diff --git a/themes/heo/components/ArticleCopyright.js b/themes/heo/components/ArticleCopyright.js
new file mode 100644
index 00000000..4664573c
--- /dev/null
+++ b/themes/heo/components/ArticleCopyright.js
@@ -0,0 +1,41 @@
+import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import CONFIG from '../config'
+
+export default function ArticleCopyright () {
+ if (!CONFIG.ARTICLE_COPYRIGHT) {
+ return <>
+ }
+ const router = useRouter()
+ const [path, setPath] = useState(BLOG.LINK + router.asPath)
+ useEffect(() => {
+ setPath(window.location.href)
+ })
+
+ const { locale } = useGlobal()
+ return (
+
+
+ -
+ {locale.COMMON.AUTHOR}:
+
+ {BLOG.AUTHOR}
+
+
+ -
+ {locale.COMMON.URL}:
+
+ {path}
+
+
+ -
+ {locale.COMMON.COPYRIGHT}:
+ {locale.COMMON.COPYRIGHT_NOTICE}
+
+
+
+ );
+}
diff --git a/themes/heo/components/ArticleLock.js b/themes/heo/components/ArticleLock.js
new file mode 100644
index 00000000..7f1da728
--- /dev/null
+++ b/themes/heo/components/ArticleLock.js
@@ -0,0 +1,51 @@
+import { useGlobal } from '@/lib/global'
+import { useEffect, useRef } from 'react'
+
+/**
+ * 加密文章校验组件
+ * @param {password, validPassword} props
+ * @param password 正确的密码
+ * @param validPassword(bool) 回调函数，校验正确回调入参为true
+ * @returns
+ */
+export const ArticleLock = props => {
+ const { validPassword } = props
+ const { locale } = useGlobal()
+ const submitPassword = () => {
+ const p = document.getElementById('password')
+ if (!validPassword(p?.value)) {
+ const tips = document.getElementById('tips')
+ if (tips) {
+ tips.innerHTML = ''
+ tips.innerHTML = `
${locale.COMMON.PASSWORD_ERROR}
`
+ }
+ }
+ }
+ const passwordInputRef = useRef(null)
+ useEffect(() => {
+ // 选中密码输入框并将其聚焦
+ passwordInputRef.current.focus()
+ }, [])
+
+ return
+
+
{locale.COMMON.ARTICLE_LOCK_TIPS}
+
+
{
+ if (e.key === 'Enter') {
+ submitPassword()
+ }
+ }}
+ ref={passwordInputRef} // 绑定ref到passwordInputRef变量
+ className='outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg font-light leading-10 bg-gray-100 dark:bg-gray-500'>
+
+
+ {locale.COMMON.SUBMIT}
+
+
+
+
+
+
+}
diff --git a/themes/heo/components/ArticleRecommend.js b/themes/heo/components/ArticleRecommend.js
new file mode 100644
index 00000000..031feb24
--- /dev/null
+++ b/themes/heo/components/ArticleRecommend.js
@@ -0,0 +1,70 @@
+import Link from 'next/link'
+import CONFIG from '../config'
+import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
+
+/**
+ * 关联推荐文章
+ * @param {prev,next} param0
+ * @returns
+ */
+export default function ArticleRecommend({ recommendPosts, siteInfo }) {
+ const { locale } = useGlobal()
+
+ if (
+ !CONFIG.ARTICLE_RECOMMEND ||
+ !recommendPosts ||
+ recommendPosts.length === 0
+ ) {
+ return <>
+ }
+
+ return (
+
+
+ {/* 推荐文章 */}
+
+
+
+ {locale.COMMON.RELATE_POSTS}
+
+
+
+ {/* 文章列表 */}
+
+
+ {recommendPosts.map(post => {
+ const headerImage = post?.pageCoverThumbnail
+ ? `url("${post.pageCoverThumbnail}")`
+ : `url("${siteInfo?.pageCover}")`
+
+ return (
+ (
+
+
+
+
+
+
+ {post.date?.start_date}
+
+
{post.title}
+
+
+
+
+ )
+ )
+ })}
+
+
+ )
+}
diff --git a/themes/heo/components/BlogPostArchive.js b/themes/heo/components/BlogPostArchive.js
new file mode 100644
index 00000000..0b092fb2
--- /dev/null
+++ b/themes/heo/components/BlogPostArchive.js
@@ -0,0 +1,86 @@
+import React from 'react'
+import Link from 'next/link'
+import BLOG from '@/blog.config'
+import CONFIG from '../config'
+import TagItemMini from './TagItemMini'
+/**
+ * 博客归档列表
+ * @param posts 所有文章
+ * @param archiveTitle 归档标题
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const BlogPostArchive = ({ posts = [], archiveTitle, siteInfo }) => {
+ if (!posts || posts.length === 0) {
+ return <>
+ } else {
+ return (
+
+ )
+ }
+}
+
+export default BlogPostArchive
diff --git a/themes/heo/components/BlogPostCard.js b/themes/heo/components/BlogPostCard.js
new file mode 100644
index 00000000..d89aab5c
--- /dev/null
+++ b/themes/heo/components/BlogPostCard.js
@@ -0,0 +1,79 @@
+import Link from 'next/link'
+import CONFIG from '../config'
+import BLOG from '@/blog.config'
+import TagItemMini from './TagItemMini'
+// import Image from 'next/image'
+
+const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
+ const showPreview = CONFIG.POST_LIST_PREVIEW && post.blockMap
+ if (post && !post.pageCoverThumbnail && CONFIG.POST_LIST_COVER_DEFAULT) {
+ post.pageCoverThumbnail = siteInfo?.pageCover
+ }
+ const showPageCover = CONFIG.POST_LIST_COVER && post?.pageCoverThumbnail && !showPreview
+ return (
+
+
+
+ {/* 图片封面 */}
+ {showPageCover && (
+
+ )}
+
+ {/* 文字区块 */}
+
+
+ {/* 分类 */}
+ {post?.category &&
+
+ {post.category}
+
+
}
+
+ {/* 标题 */}
+
+
{post.title}
+
+
+
+ {/* 摘要 */}
+ {(!showPreview || showSummary) && !post.results && (
+
+ {post.summary}
+
+ )}
+
+ {/* 搜索结果 */}
+ {post.results && (
+
+ {post.results.map(r => (
+ {r}
+ ))}
+
+ )}
+
+
+
+ {' '}
+ {post.tagItems?.map(tag => (
+
+ ))}
+
+
+
+
+
+
+
+
+ )
+}
+
+export default BlogPostCard
diff --git a/themes/heo/components/BlogPostListEmpty.js b/themes/heo/components/BlogPostListEmpty.js
new file mode 100644
index 00000000..5f75c3e7
--- /dev/null
+++ b/themes/heo/components/BlogPostListEmpty.js
@@ -0,0 +1,14 @@
+import { useGlobal } from '@/lib/global'
+
+/**
+ * 空白博客 列表
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const BlogPostListEmpty = ({ currentSearch }) => {
+ const { locale } = useGlobal()
+ return
+
{locale.COMMON.NO_MORE} {(currentSearch &&
{currentSearch}
)}
+
+}
+export default BlogPostListEmpty
diff --git a/themes/heo/components/BlogPostListPage.js b/themes/heo/components/BlogPostListPage.js
new file mode 100644
index 00000000..8c9e1fd6
--- /dev/null
+++ b/themes/heo/components/BlogPostListPage.js
@@ -0,0 +1,34 @@
+import BlogPostCard from './BlogPostCard'
+import PaginationNumber from './PaginationNumber'
+import BLOG from '@/blog.config'
+import BlogPostListEmpty from './BlogPostListEmpty'
+
+/**
+ * 文章列表分页表格
+ * @param page 当前页
+ * @param posts 所有文章
+ * @param tags 所有标签
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
+ const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
+ const showPagination = postCount >= BLOG.POSTS_PER_PAGE
+ if (!posts || posts.length === 0 || page > totalPage) {
+ return
+ } else {
+ return (
+
+ {/* 文章列表 */}
+
+ {posts?.map(post => (
+
+ ))}
+
+ {showPagination &&
}
+
+ )
+ }
+}
+
+export default BlogPostListPage
diff --git a/themes/heo/components/BlogPostListScroll.js b/themes/heo/components/BlogPostListScroll.js
new file mode 100644
index 00000000..830e8177
--- /dev/null
+++ b/themes/heo/components/BlogPostListScroll.js
@@ -0,0 +1,75 @@
+import BLOG from '@/blog.config'
+import BlogPostCard from './BlogPostCard'
+import BlogPostListEmpty from './BlogPostListEmpty'
+import { useGlobal } from '@/lib/global'
+import React from 'react'
+import CONFIG from '../config'
+import { getListByPage } from '@/lib/utils'
+
+/**
+ * 博客列表滚动分页
+ * @param posts 所有文章
+ * @param tags 所有标签
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG.POST_LIST_SUMMARY, siteInfo }) => {
+ const postsPerPage = BLOG.POSTS_PER_PAGE
+ const [page, updatePage] = React.useState(1)
+ const postsToShow = getListByPage(posts, page, postsPerPage)
+
+ let hasMore = false
+ if (posts) {
+ const totalCount = posts.length
+ hasMore = page * postsPerPage < totalCount
+ }
+
+ const handleGetMore = () => {
+ if (!hasMore) return
+ updatePage(page + 1)
+ }
+
+ // 监听滚动自动分页加载
+ const scrollTrigger = () => {
+ requestAnimationFrame(() => {
+ const scrollS = window.scrollY + window.outerHeight
+ const clientHeight = targetRef ? (targetRef.current ? (targetRef.current.clientHeight) : 0) : 0
+ if (scrollS > clientHeight + 100) {
+ handleGetMore()
+ }
+ })
+ }
+
+ // 监听滚动
+ React.useEffect(() => {
+ window.addEventListener('scroll', scrollTrigger)
+ return () => {
+ window.removeEventListener('scroll', scrollTrigger)
+ }
+ })
+
+ const targetRef = React.useRef(null)
+ const { locale } = useGlobal()
+
+ if (!postsToShow || postsToShow.length === 0) {
+ return
+ } else {
+ return
+
+ {/* 文章列表 */}
+
+ {postsToShow.map(post => (
+
+ ))}
+
+
+
+
{ handleGetMore() }}
+ className='w-full my-4 py-4 text-center cursor-pointer rounded-xl dark:text-gray-200'
+ > {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE}`}
+
+
+ }
+}
+
+export default BlogPostListScroll
diff --git a/themes/heo/components/Card.js b/themes/heo/components/Card.js
new file mode 100644
index 00000000..0859dec0
--- /dev/null
+++ b/themes/heo/components/Card.js
@@ -0,0 +1,9 @@
+const Card = ({ children, headerSlot, className }) => {
+ return
+ <>{headerSlot}
+
+
+}
+export default Card
diff --git a/themes/heo/components/Catalog.js b/themes/heo/components/Catalog.js
new file mode 100644
index 00000000..115ddd0c
--- /dev/null
+++ b/themes/heo/components/Catalog.js
@@ -0,0 +1,95 @@
+import React, { useRef } from 'react'
+import throttle from 'lodash.throttle'
+import { uuidToId } from 'notion-utils'
+import Progress from './Progress'
+import { useGlobal } from '@/lib/global'
+
+/**
+ * 目录导航组件
+ * @param toc
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const Catalog = ({ toc }) => {
+ const { locale } = useGlobal()
+ // 监听滚动事件
+ React.useEffect(() => {
+ window.addEventListener('scroll', actionSectionScrollSpy)
+ actionSectionScrollSpy()
+ return () => {
+ window.removeEventListener('scroll', actionSectionScrollSpy)
+ }
+ }, [])
+
+ // 目录自动滚动
+ const tRef = useRef(null)
+ const tocIds = []
+
+ // 同步选中目录事件
+ const [activeSection, setActiveSection] = React.useState(null)
+
+ const throttleMs = 200
+ const actionSectionScrollSpy = React.useCallback(throttle(() => {
+ const sections = document.getElementsByClassName('notion-h')
+ let prevBBox = null
+ let currentSectionId = activeSection
+ for (let i = 0; i < sections.length; ++i) {
+ const section = sections[i]
+ if (!section || !(section instanceof Element)) continue
+ if (!currentSectionId) {
+ currentSectionId = section.getAttribute('data-id')
+ }
+ const bbox = section.getBoundingClientRect()
+ const prevHeight = prevBBox ? bbox.top - prevBBox.bottom : 0
+ const offset = Math.max(150, prevHeight / 4)
+ // GetBoundingClientRect returns values relative to viewport
+ if (bbox.top - offset < 0) {
+ currentSectionId = section.getAttribute('data-id')
+ prevBBox = bbox
+ continue
+ }
+ // No need to continue loop, if last element has been detected
+ break
+ }
+ setActiveSection(currentSectionId)
+ const index = tocIds.indexOf(currentSectionId) || 0
+ tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
+ }, throttleMs))
+
+ // 无目录就直接返回空
+ if (!toc || toc.length < 1) {
+ return <>
+ }
+
+ return
+
{locale.COMMON.TABLE_OF_CONTENTS}
+
+
+
+
+
+
+}
+
+export default Catalog
diff --git a/themes/heo/components/CategoryBar.js b/themes/heo/components/CategoryBar.js
new file mode 100644
index 00000000..31ee3260
--- /dev/null
+++ b/themes/heo/components/CategoryBar.js
@@ -0,0 +1,41 @@
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+/**
+ * 博客列表上方嵌入条
+ * @param {*} props
+ * @returns
+ */
+export default function CategoryBar(props) {
+ const { categoryOptions, border = true } = props
+ const { locale } = useGlobal()
+
+ return
+
+
+
+ {categoryOptions?.map((c, index) => )}
+
+
+
+
+ {locale.COMMON.MORE}
+
+
+
+}
+
+/**
+ * 按钮
+ * @param {*} param0
+ * @returns
+ */
+const MenuItem = ({ href, name }) => {
+ const router = useRouter()
+ const selected = router.pathname === href
+ return
+ {name}
+
+}
diff --git a/themes/heo/components/CategoryGroup.js b/themes/heo/components/CategoryGroup.js
new file mode 100644
index 00000000..811ad9ff
--- /dev/null
+++ b/themes/heo/components/CategoryGroup.js
@@ -0,0 +1,31 @@
+import Link from 'next/link'
+import React from 'react'
+
+const CategoryGroup = ({ currentCategory, categories }) => {
+ if (!categories) {
+ return <>
+ }
+ return <>
+
+ {categories.map(category => {
+ const selected = currentCategory === category.name
+ return (
+
+
+
{category.name}({category.count})
+
+
+ )
+ })}
+
+
+}
+
+export default CategoryGroup
diff --git a/themes/heo/components/FloatDarkModeButton.js b/themes/heo/components/FloatDarkModeButton.js
new file mode 100644
index 00000000..f693d1f0
--- /dev/null
+++ b/themes/heo/components/FloatDarkModeButton.js
@@ -0,0 +1,31 @@
+import { useGlobal } from '@/lib/global'
+import { saveDarkModeToCookies } from '@/themes/theme'
+import CONFIG from '../config'
+
+export default function FloatDarkModeButton () {
+ const { isDarkMode, updateDarkMode } = useGlobal()
+
+ if (!CONFIG.WIDGET_DARK_MODE) {
+ return <>
+ }
+
+ // 用户手动设置主题
+ const handleChangeDarkMode = () => {
+ const newStatus = !isDarkMode
+ saveDarkModeToCookies(newStatus)
+ updateDarkMode(newStatus)
+ const htmlElement = document.getElementsByTagName('html')[0]
+ htmlElement.classList?.remove(newStatus ? 'light' : 'dark')
+ htmlElement.classList?.add(newStatus ? 'dark' : 'light')
+ }
+
+ return (
+
+
+
+ )
+}
diff --git a/themes/heo/components/FloatTocButton.js b/themes/heo/components/FloatTocButton.js
new file mode 100644
index 00000000..bbded092
--- /dev/null
+++ b/themes/heo/components/FloatTocButton.js
@@ -0,0 +1,45 @@
+import { useState } from 'react'
+import Catalog from './Catalog'
+
+/**
+ * 移动端悬浮目录按钮
+ */
+export default function FloatTocButton(props) {
+ const [tocVisible, changeTocVisible] = useState(false)
+
+ const { post } = props
+
+ const toggleToc = () => {
+ changeTocVisible(!tocVisible)
+ }
+
+ // 没有目录就隐藏该按钮
+ if (!post || !post.toc || post.toc.length < 1) {
+ return <>
+ }
+
+ return (
+ {/* 按钮 */}
+
+
+
+
+ {/* 目录Modal */}
+
+ {/* 侧边菜单 */}
+
+ {post && <>
+
+
+
+
+ }
+
+
+ {/* 背景蒙版 */}
+
+
)
+}
diff --git a/themes/heo/components/Footer.js b/themes/heo/components/Footer.js
new file mode 100644
index 00000000..749d6048
--- /dev/null
+++ b/themes/heo/components/Footer.js
@@ -0,0 +1,54 @@
+import React from 'react'
+import BLOG from '@/blog.config'
+import SocialButton from './SocialButton'
+// import DarkModeButton from '@/components/DarkModeButton'
+
+const Footer = ({ title }) => {
+ const d = new Date()
+ const currentYear = d.getFullYear()
+ const copyrightDate = (function () {
+ if (Number.isInteger(BLOG.SINCE) && BLOG.SINCE < currentYear) {
+ return BLOG.SINCE + '-' + currentYear
+ }
+ return currentYear
+ })()
+
+ return (
+
+ )
+}
+
+export default Footer
diff --git a/themes/heo/components/Hero.js b/themes/heo/components/Hero.js
new file mode 100644
index 00000000..0b9d405a
--- /dev/null
+++ b/themes/heo/components/Hero.js
@@ -0,0 +1,251 @@
+// import Image from 'next/image'
+
+import BLOG from '@/blog.config'
+import { ArrowSmallRight, PlusSmall } from '@/components/HeroIcons'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useImperativeHandle, useRef, useState } from 'react'
+import CONFIG from '../config'
+import { useGlobal } from '@/lib/global'
+import { Transition } from '@headlessui/react'
+
+/**
+ * 顶部英雄区
+ * 左右布局，
+ * 左侧：banner组
+ * 右侧：今日卡牌遮罩
+ * @returns
+ */
+const Hero = props => {
+ const { onLoading } = useGlobal()
+ return (
+
+
+
+ {/* 左侧banner组 */}
+
+
+ {/* 右侧置顶文章组 */}
+
+
+
+
+ )
+}
+
+/**
+ * 英雄区左侧banner组
+ * @returns
+ */
+function BannerGroup(props) {
+ return (
+ // 左侧英雄区
+
+ {/* 动图 */}
+
+ {/* 导航分类 */}
+
+
+ )
+}
+
+/**
+ * 英雄区左上角banner动图
+ * @returns
+ */
+function Banner(props) {
+ const router = useRouter()
+ const { latestPosts } = props
+ // 跳转到任意文章
+ function handleClickBanner() {
+ const randomIndex = Math.floor(Math.random() * latestPosts.length)
+ const randomPost = latestPosts[randomIndex]
+ router.push(randomPost.slug)
+ }
+
+ return
+
+
+
{CONFIG.HERO_TITLE_1}
{CONFIG.HERO_TITLE_2}
+
{CONFIG.HERO_TITLE_3}
+
+
+ {/* 斜向滚动的图标 */}
+
+
+ {/* 遮罩 */}
+
+
+
+}
+
+/**
+ * 图标滚动标签组
+ * 英雄区左上角banner条中斜向滚动的图标
+ */
+function TagsGroupBar() {
+ const groupIcons = CONFIG.GROUP_ICONS.concat(CONFIG.GROUP_ICONS)
+ return (
+
+
+ {groupIcons?.map(g => {
+ return (<>
+
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
+
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
+
+
+ )
+ })}
+
+
+ )
+}
+
+/**
+ * 英雄区左下角3个指定分类按钮
+ * @returns
+ */
+function GroupMenu() {
+ return (
+
+
+
+ {CONFIG.HERO_CATEGORY_1?.title}
+
+
+
+
+
+
+
+
+ {CONFIG.HERO_CATEGORY_2?.title}
+
+
+
+
+
+
+ {/* 第三个标签在小屏上不显示 */}
+
+
+ {CONFIG.HERO_CATEGORY_3?.title}
+
+
+
+
+
+
+
+
+ )
+}
+
+/**
+ * 置顶文章区域
+ */
+function TopGroup(props) {
+ const { latestPosts, siteInfo } = props
+ const todayCardRef = useRef()
+ function handleMouseLeave() {
+ todayCardRef.current.coverUp()
+ }
+ return (
+
+ {/* 制定最新文章 */}
+
+ {latestPosts?.map(p => {
+ return
+
+ {/* eslint-disable-next-line */}
+
+
{p?.title}
+ {/* hover 悬浮的 ‘荐’ 字 */}
+
+ 荐
+
+
+
+ })}
+
+
+
+ )
+}
+
+/**
+ * 英雄区右侧，今日卡牌
+ * @returns
+ */
+function TodayCard({ cRef }) {
+ const router = useRouter()
+ // 卡牌是否盖住下层
+ const [isCoverUp, setIsCoverUp] = useState(true)
+
+ /**
+ * 外部可以调用此方法
+ */
+ useImperativeHandle(cRef, () => {
+ return {
+ coverUp: () => {
+ setIsCoverUp(true)
+ }
+ }
+ })
+
+ /**
+ * 点击更多
+ * @param {*} e
+ */
+ function handleClickMore(e) {
+ e.stopPropagation()
+ setIsCoverUp(false)
+ }
+
+ /**
+ * 点击卡片跳转的链接
+ * @param {*} e
+ */
+ function handleCardClick(e) {
+ router.push('https://tangly1024.com')
+ }
+
+ return
+
+
+
+
{CONFIG.HERO_TITLE_4}
+
{CONFIG.HERO_TITLE_5}
+
+
+
+
+
+
+}
+
+export default Hero
diff --git a/themes/heo/components/HexoRecentComments.js b/themes/heo/components/HexoRecentComments.js
new file mode 100644
index 00000000..2ebf00c8
--- /dev/null
+++ b/themes/heo/components/HexoRecentComments.js
@@ -0,0 +1,47 @@
+import React from 'react'
+import BLOG from '@/blog.config'
+import Card from '@/themes/hexo/components/Card'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import { RecentComments } from '@waline/client'
+
+/**
+ * @see https://waline.js.org/guide/get-started.html
+ * @param {*} props
+ * @returns
+ */
+const HexoRecentComments = (props) => {
+ const [comments, updateComments] = React.useState([])
+ const { locale } = useGlobal()
+ const [onLoading, changeLoading] = React.useState(true)
+ React.useEffect(() => {
+ RecentComments({
+ serverURL: BLOG.COMMENT_WALINE_SERVER_URL,
+ count: 5
+ }).then(({ comments }) => {
+ changeLoading(false)
+ updateComments(comments)
+ })
+ }, [])
+
+ return (
+
+
+
+ {locale.COMMON.RECENT_COMMENTS}
+
+
+ {onLoading && Loading...
}
+ {!onLoading && comments && comments.length === 0 && No Comments
}
+ {!onLoading && comments && comments.length > 0 && comments.map((comment) =>
+
+
+ --{comment.nick}
+
+
+ )
+}
+
+export default HexoRecentComments
diff --git a/themes/heo/components/InfoCard.js b/themes/heo/components/InfoCard.js
new file mode 100644
index 00000000..9dd4e1e9
--- /dev/null
+++ b/themes/heo/components/InfoCard.js
@@ -0,0 +1,87 @@
+import BLOG from '@/blog.config'
+import { ArrowRightCircle, GlobeAlt } from '@/components/HeroIcons'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+import CONFIG from '../config'
+import Announcement from './Announcement'
+import Card from './Card'
+
+/**
+ * 社交信息卡
+ * @param {*} props
+ * @returns
+ */
+export function InfoCard(props) {
+ const { siteInfo, notice } = props
+ const router = useRouter()
+ // 在文章详情页特殊处理
+ const isSlugPage = router.pathname === '/[...slug]'
+
+ return (
+
+ {/* 信息卡牌第一行 */}
+
+ {/* 问候语 */}
+
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
+
+
+ {BLOG.AUTHOR}
+
+
+ {/* 公告栏 */}
+
+
+
+
+ {/* 两个社交按钮 */}
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+/**
+ * 欢迎语
+ */
+function GreetingsWords() {
+ const greetings = CONFIG.INFOCARD_GREETINGS
+ const [greeting, setGreeting] = useState(greetings[0])
+ // 每次点击，随机获取greetings中的一个
+ const handleChangeGreeting = () => {
+ const randomIndex = Math.floor(Math.random() * greetings.length)
+ setGreeting(greetings[randomIndex])
+ }
+
+ return
+ {greeting}
+
+}
+
+/**
+ * 了解更多按鈕
+ * @returns
+ */
+function MoreButton() {
+ return
+
+
+}
diff --git a/themes/heo/components/JumpToCommentButton.js b/themes/heo/components/JumpToCommentButton.js
new file mode 100644
index 00000000..fb007712
--- /dev/null
+++ b/themes/heo/components/JumpToCommentButton.js
@@ -0,0 +1,29 @@
+import React from 'react'
+import CONFIG from '../config'
+
+/**
+ * 跳转到评论区
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const JumpToCommentButton = () => {
+ if (!CONFIG.WIDGET_TO_COMMENT) {
+ return <>
+ }
+
+ function navToComment() {
+ if (document.getElementById('comment')) {
+ window.scrollTo({ top: document.getElementById('comment').offsetTop, behavior: 'smooth' })
+ }
+ // 兼容性不好
+ // const commentElement = document.getElementById('comment')
+ // if (commentElement) {
+ // commentElement?.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
+ }
+
+ return (
+
+
)
+}
+
+export default JumpToCommentButton
diff --git a/themes/heo/components/JumpToTopButton.js b/themes/heo/components/JumpToTopButton.js
new file mode 100644
index 00000000..77313f46
--- /dev/null
+++ b/themes/heo/components/JumpToTopButton.js
@@ -0,0 +1,25 @@
+import { useGlobal } from '@/lib/global'
+import React from 'react'
+import CONFIG from '../config'
+
+/**
+ * 跳转到网页顶部
+ * 当屏幕下滑500像素后会出现该控件
+ * @param targetRef 关联高度的目标html标签
+ * @param showPercent 是否显示百分比
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const JumpToTopButton = ({ showPercent = true, percent }) => {
+ const { locale } = useGlobal()
+
+ if (!CONFIG.WIDGET_TO_TOP) {
+ return <>
+ }
+ return (
window.scrollTo({ top: 0, behavior: 'smooth' })} >
+
+ {showPercent && (
{percent}
)}
+
)
+}
+
+export default JumpToTopButton
diff --git a/themes/heo/components/LatestPostsGroup.js b/themes/heo/components/LatestPostsGroup.js
new file mode 100644
index 00000000..80f0363f
--- /dev/null
+++ b/themes/heo/components/LatestPostsGroup.js
@@ -0,0 +1,50 @@
+import BLOG from '@/blog.config'
+// import Image from 'next/image'
+import Link from 'next/link'
+
+/**
+ * 最新文章列表
+ * @param posts 所有文章数据
+ * @param sliceCount 截取展示的数量 默认6
+ * @constructor
+ */
+const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
+ // 获取当前路径
+
+ if (!latestPosts) {
+ return <>
+ }
+
+ return
+ {latestPosts.map(post => {
+ const headerImage = post?.pageCoverThumbnail ? post.pageCoverThumbnail : siteInfo?.pageCover
+
+ return (
+ (
+
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
+
+
+
+
+ )
+ )
+ })}
+
+}
+export default LatestPostsGroup
diff --git a/themes/heo/components/LatestPostsGroupMini.js b/themes/heo/components/LatestPostsGroupMini.js
new file mode 100644
index 00000000..d69662a3
--- /dev/null
+++ b/themes/heo/components/LatestPostsGroupMini.js
@@ -0,0 +1,63 @@
+import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
+// import Image from 'next/image'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+/**
+ * 最新文章列表
+ * @param posts 所有文章数据
+ * @param sliceCount 截取展示的数量 默认6
+ * @constructor
+ */
+export default function LatestPostsGroupMini ({ latestPosts, siteInfo }) {
+ // 获取当前路径
+ const currentPath = useRouter().asPath
+ const { locale } = useGlobal()
+
+ if (!latestPosts) {
+ return <>
+ }
+
+ return <>
+
+
+
+ {locale.COMMON.LATEST_POSTS}
+
+
+ {latestPosts.map(post => {
+ const selected = currentPath === `${BLOG.SUB_PATH}/${post.slug}`
+
+ const headerImage = post?.pageCoverThumbnail ? post.pageCoverThumbnail : siteInfo?.pageCover
+
+ return (
+ (
+
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
+
+
+
+
{post.title}
+
{post.lastEditedTime}
+
+
+
+ )
+ )
+ })}
+
+}
diff --git a/themes/heo/components/LoadingCover.js b/themes/heo/components/LoadingCover.js
new file mode 100644
index 00000000..c6418fad
--- /dev/null
+++ b/themes/heo/components/LoadingCover.js
@@ -0,0 +1,8 @@
+export default function LoadingCover () {
+ return (
+ )
+}
diff --git a/themes/heo/components/Logo.js b/themes/heo/components/Logo.js
new file mode 100644
index 00000000..a57cea2e
--- /dev/null
+++ b/themes/heo/components/Logo.js
@@ -0,0 +1,25 @@
+import BLOG from '@/blog.config'
+import { Home } from '@/components/HeroIcons'
+import Link from 'next/link'
+import React from 'react'
+
+const Logo = props => {
+ const { siteInfo } = props
+ return (
+
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
+
+
+ {siteInfo?.title || BLOG.TITLE}
+
+
+
+
+
+
+
+ )
+}
+export default Logo
diff --git a/themes/heo/components/MenuGroupCard.js b/themes/heo/components/MenuGroupCard.js
new file mode 100644
index 00000000..89591369
--- /dev/null
+++ b/themes/heo/components/MenuGroupCard.js
@@ -0,0 +1,44 @@
+import React from 'react'
+import Link from 'next/link'
+import { useGlobal } from '@/lib/global'
+import CONFIG from '../config'
+
+const MenuGroupCard = (props) => {
+ const { postCount, categoryOptions, tagOptions } = props
+ const { locale } = useGlobal()
+ const archiveSlot =
{postCount}
+ const categorySlot =
{categoryOptions?.length}
+ const tagSlot =
{tagOptions?.length}
+
+ const links = [
+ { name: locale.COMMON.ARTICLE, to: '/archive', slot: archiveSlot, show: CONFIG.MENU_ARCHIVE },
+ { name: locale.COMMON.CATEGORY, to: '/category', slot: categorySlot, show: CONFIG.MENU_CATEGORY },
+ { name: locale.COMMON.TAGS, to: '/tag', slot: tagSlot, show: CONFIG.MENU_TAG }
+ ]
+
+ return (
+
+ )
+}
+export default MenuGroupCard
diff --git a/themes/heo/components/MenuItemCollapse.js b/themes/heo/components/MenuItemCollapse.js
new file mode 100644
index 00000000..3ec10f5e
--- /dev/null
+++ b/themes/heo/components/MenuItemCollapse.js
@@ -0,0 +1,54 @@
+import Collapse from '@/components/Collapse'
+import Link from 'next/link'
+import { useState } from 'react'
+
+/**
+ * 折叠菜单
+ * @param {*} param0
+ * @returns
+ */
+export const MenuItemCollapse = ({ link }) => {
+ const [show, changeShow] = useState(false)
+ const hasSubMenu = link?.subMenus?.length > 0
+
+ const [isOpen, changeIsOpen] = useState(false)
+
+ const toggleShow = () => {
+ changeShow(!show)
+ }
+
+ const toggleOpenSubMenu = () => {
+ changeIsOpen(!isOpen)
+ }
+
+ if (!link || !link.show) {
+ return null
+ }
+
+ return <>
+
+ {!hasSubMenu &&
+
{link?.icon && }{link?.name}
+ }
+ {hasSubMenu &&
+ {link?.icon && }{link?.name}
+
+
}
+
+
+ {/* 折叠子菜单 */}
+ {hasSubMenu &&
+ {link.subMenus.map(sLink => {
+ return
+
+ {link?.icon && } {sLink.title}
+
+
+ })}
+ }
+
+}
diff --git a/themes/heo/components/MenuItemDrop.js b/themes/heo/components/MenuItemDrop.js
new file mode 100644
index 00000000..fe8fdf53
--- /dev/null
+++ b/themes/heo/components/MenuItemDrop.js
@@ -0,0 +1,42 @@
+import Link from 'next/link'
+import { useState } from 'react'
+
+export const MenuItemDrop = ({ link }) => {
+ const [show, changeShow] = useState(false)
+ const hasSubMenu = link?.subMenus?.length > 0
+
+ if (!link || !link.show) {
+ return null
+ }
+
+ return
changeShow(true)} onMouseOut={() => changeShow(false)} >
+
+ {/* 不含子菜单 */}
+ {!hasSubMenu &&
+
+ {link?.icon &&
} {link?.name}
+ {hasSubMenu &&
}
+ }
+
+ {/* 含子菜单的按钮 */}
+ {hasSubMenu && <>
+
+ {link?.icon && } {link?.name}
+
+ }
+
+ {/* 子菜单 */}
+ {hasSubMenu &&
+ {link.subMenus.map((sLink, index) => {
+ return -
+
+ {link?.icon && }{sLink.title}
+
+
+ })}
+
}
+
+
+}
diff --git a/themes/heo/components/MenuListSide.js b/themes/heo/components/MenuListSide.js
new file mode 100644
index 00000000..1a3b2f5b
--- /dev/null
+++ b/themes/heo/components/MenuListSide.js
@@ -0,0 +1,37 @@
+import React from 'react'
+import { useGlobal } from '@/lib/global'
+import BLOG from '@/blog.config'
+import { MenuItemCollapse } from './MenuItemCollapse'
+import CONFIG from '../config'
+
+export const MenuListSide = (props) => {
+ const { customNav, customMenu } = props
+ const { locale } = useGlobal()
+
+ let links = [
+ { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE },
+ { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH },
+ { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY },
+ { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG }
+ ]
+
+ if (customNav) {
+ links = customNav.concat(links)
+ }
+
+ // 如果 开启自定义菜单，则覆盖Page生成的菜单
+ if (BLOG.CUSTOM_MENU) {
+ links = customMenu
+ }
+
+ if (!links || links.length === 0) {
+ return null
+ }
+
+ return (
+
+ )
+}
diff --git a/themes/heo/components/MenuListTop.js b/themes/heo/components/MenuListTop.js
new file mode 100644
index 00000000..a2fd66ad
--- /dev/null
+++ b/themes/heo/components/MenuListTop.js
@@ -0,0 +1,37 @@
+import React from 'react'
+import { useGlobal } from '@/lib/global'
+import CONFIG from '../config'
+import BLOG from '@/blog.config'
+import { MenuItemDrop } from './MenuItemDrop'
+
+export const MenuListTop = (props) => {
+ const { customNav, customMenu } = props
+ const { locale } = useGlobal()
+
+ let links = [
+ { id: 1, icon: 'fa-solid fa-house', name: locale.NAV.INDEX, to: '/', show: CONFIG.MENU_INDEX },
+ { id: 2, icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH },
+ { id: 3, icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE }
+ // { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY },
+ // { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG }
+ ]
+
+ if (customNav) {
+ links = links.concat(customNav)
+ }
+
+ // 如果 开启自定义菜单，则覆盖Page生成的菜单
+ if (BLOG.CUSTOM_MENU) {
+ links = customMenu
+ }
+
+ if (!links || links.length === 0) {
+ return null
+ }
+
+ return (<>
+
+ )
+}
diff --git a/themes/heo/components/NavBar.js b/themes/heo/components/NavBar.js
new file mode 100644
index 00000000..297df23b
--- /dev/null
+++ b/themes/heo/components/NavBar.js
@@ -0,0 +1,94 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import Logo from './Logo'
+
+import { MenuListTop } from './MenuListTop'
+import throttle from 'lodash.throttle'
+import RandomPostButton from './RandomPostButton'
+import SearchButton from './SearchButton'
+import SlideOver from './SlideOver'
+import ReadingProgress from './ReadingProgress'
+/**
+ * 顶部导航
+ * @param {*} param0
+ * @returns
+ */
+const NavBar = props => {
+ const [fixedNav, setFixedNav] = useState(false)
+ const [textWhite, setTextWhite] = useState(false)
+ const [navBgWhite, setBgWhite] = useState(false)
+ const slideOverRef = useRef()
+
+ const toggleMenuOpen = () => {
+ slideOverRef?.current?.toggleSlideOvers()
+ }
+
+ // 监听滚动
+ useEffect(() => {
+ scrollTrigger()
+ window.addEventListener('scroll', scrollTrigger)
+ return () => {
+ window.removeEventListener('scroll', scrollTrigger)
+ }
+ }, [])
+
+ const throttleMs = 200
+
+ /**
+ * 根据滚动条，切换导航栏样式
+ */
+ const scrollTrigger = useCallback(throttle(() => {
+ const scrollS = window.scrollY
+
+ // 导航栏设置 白色背景
+ if (scrollS <= 0) {
+ setFixedNav(false)
+ setBgWhite(false)
+
+ // 文章详情页特殊处理
+ if (document.querySelector('#post-bg')) {
+ setFixedNav(true)
+ setTextWhite(true)
+ setBgWhite(false)
+ }
+ } else {
+ // 向下滚动后的导航样式
+ setFixedNav(true)
+ setTextWhite(false)
+ setBgWhite(true)
+ }
+ }, throttleMs))
+
+ return (<>
+ {/* 顶部导航菜单栏 */}
+
+ )
+}
+
+export default NavBar
diff --git a/themes/heo/components/NavButtonGroup.js b/themes/heo/components/NavButtonGroup.js
new file mode 100644
index 00000000..2a3fc898
--- /dev/null
+++ b/themes/heo/components/NavButtonGroup.js
@@ -0,0 +1,33 @@
+
+import React from 'react'
+import Link from 'next/link'
+
+/**
+ * 首页导航大按钮组件
+ * @param {*} props
+ * @returns
+ */
+const NavButtonGroup = (props) => {
+ const { categoryOptions } = props
+ if (!categoryOptions || categoryOptions.length === 0) {
+ return <>
+ }
+
+ return (
+
+ )
+}
+export default NavButtonGroup
diff --git a/themes/heo/components/NoticeBar.js b/themes/heo/components/NoticeBar.js
new file mode 100644
index 00000000..302c28b1
--- /dev/null
+++ b/themes/heo/components/NoticeBar.js
@@ -0,0 +1,27 @@
+
+import { ArrowRightCircle } from '@/components/HeroIcons'
+import CONFIG from '../config'
+import Swipe from './Swipe'
+
+/**
+ * 通知横幅
+ */
+export function NoticeBar() {
+ const notices = CONFIG.NOTICE_BAR
+
+ if (!notices || notices?.length === 0) {
+ return <>
+ }
+
+ return (
+
+
+
+ )
+}
diff --git a/themes/heo/components/PaginationNumber.js b/themes/heo/components/PaginationNumber.js
new file mode 100644
index 00000000..85018130
--- /dev/null
+++ b/themes/heo/components/PaginationNumber.js
@@ -0,0 +1,160 @@
+import { ChevronDoubleRight } from '@/components/HeroIcons'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+
+/**
+ * 数字翻页插件
+ * @param page 当前页码
+ * @param showNext 是否有下一页
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const PaginationNumber = ({ page, totalPage }) => {
+ const router = useRouter()
+ const { locale } = useGlobal()
+ const currentPage = +page
+ const showNext = page < totalPage
+ const pagePrefix = router.asPath.split('?')[0].replace(/\/page\/[1-9]\d*/, '').replace(/\/$/, '')
+ const pages = generatePages(pagePrefix, page, currentPage, totalPage)
+
+ const [value, setValue] = useState('')
+
+ const handleInputChange = (event) => {
+ const newValue = event.target.value.replace(/[^0-9]/g, '')
+ setValue(newValue)
+ }
+
+ /**
+ * 调到指定页
+ */
+ const jumpToPage = () => {
+ if (value) {
+ router.push(value === 1 ? `${pagePrefix}/` : `${pagePrefix}/page/${value}`)
+ }
+ }
+
+ return (
+
+ {/* 上一页 */}
+
+
+
+
+ {locale.PAGINATION.PREV}
+
+
+
+
+
+ {/* 分页 */}
+
+ {pages}
+
+ {/* 跳转页码 */}
+
+
+
+ {/* 下一页 */}
+
+
+
+
+
+ {locale.PAGINATION.NEXT}
+
+
+
+
+ )
+}
+
+/**
+ * 页码按钮
+ * @param {*} page
+ * @param {*} currentPage
+ * @param {*} pagePrefix
+ * @returns
+ */
+function getPageElement(page, currentPage, pagePrefix) {
+ const selected = page + '' === currentPage + ''
+ return (
+ (
+
+ {page}
+
+ )
+ )
+}
+
+/**
+ * 获取所有页码
+ * @param {*} pagePrefix
+ * @param {*} page
+ * @param {*} currentPage
+ * @param {*} totalPage
+ * @returns
+ */
+function generatePages(pagePrefix, page, currentPage, totalPage) {
+ const pages = []
+ const groupCount = 7 // 最多显示页签数
+ if (totalPage <= groupCount) {
+ for (let i = 1; i <= totalPage; i++) {
+ pages.push(getPageElement(i, page, pagePrefix))
+ }
+ } else {
+ pages.push(getPageElement(1, page, pagePrefix))
+ const dynamicGroupCount = groupCount - 2
+ let startPage = currentPage - 2
+ if (startPage <= 1) {
+ startPage = 2
+ }
+ if (startPage + dynamicGroupCount > totalPage) {
+ startPage = totalPage - dynamicGroupCount
+ }
+ if (startPage > 2) {
+ pages.push(
...
)
+ }
+
+ for (let i = 0; i < dynamicGroupCount; i++) {
+ if (startPage + i < totalPage) {
+ pages.push(getPageElement(startPage + i, page, pagePrefix))
+ }
+ }
+
+ if (startPage + dynamicGroupCount < totalPage) {
+ pages.push(
...
)
+ }
+
+ pages.push(getPageElement(totalPage, page, pagePrefix))
+ }
+ return pages
+}
+export default PaginationNumber
diff --git a/themes/heo/components/PostHeader.js b/themes/heo/components/PostHeader.js
new file mode 100644
index 00000000..69510344
--- /dev/null
+++ b/themes/heo/components/PostHeader.js
@@ -0,0 +1,100 @@
+import Link from 'next/link'
+import BLOG from '@/blog.config'
+import NotionIcon from '@/components/NotionIcon'
+import WavesArea from './WavesArea'
+import { HashTag } from '@/components/HeroIcons'
+import WordCount from '@/components/WordCount'
+
+export default function PostHeader({ post, siteInfo }) {
+ if (!post) {
+ return <>
+ }
+ // 文章头图
+ const headerImage = post?.pageCover ? post.pageCover : siteInfo?.pageCover
+
+ return (
+
+
+
+
+
+ {/* 文章背景图 */}
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
+
+
+ {/* 文章文字描述 */}
+
+ {/* 分类+标签 */}
+
+ {post.category && <>
+
+
+ {post.category}
+
+
+ }
+
+ {post.tagItems && (
+
+ {post.tagItems.map(tag => (
+
+
{tag.name + (tag.count ? `(${tag.count})` : '')}
+
+
+ ))}
+
+ )}
+
+
+ {/* 文章Title */}
+
+ {post.title}
+
+
+ {/* 标题底部补充信息 */}
+
+
+
+
+ {post?.type !== 'Page' && (
+ <>
+
+
{post?.publishTime}
+
+
+ )}
+
+
+
+
}
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/themes/heo/components/Progress.js b/themes/heo/components/Progress.js
new file mode 100644
index 00000000..5b4f9b20
--- /dev/null
+++ b/themes/heo/components/Progress.js
@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from 'react'
+import { isBrowser } from '@/lib/utils'
+
+/**
+ * 顶部页面阅读进度条
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const Progress = ({ targetRef, showPercent = true }) => {
+ const currentRef = targetRef?.current || targetRef
+ const [percent, changePercent] = useState(0)
+ const scrollListener = () => {
+ const target = currentRef || (isBrowser() && document.getElementById('article-wrapper'))
+ if (target) {
+ const clientHeight = target.clientHeight
+ const scrollY = window.pageYOffset
+ const fullHeight = clientHeight - window.outerHeight
+ let per = parseFloat(((scrollY / fullHeight) * 100).toFixed(0))
+ if (per > 100) per = 100
+ if (per < 0) per = 0
+ changePercent(per)
+ }
+ }
+
+ useEffect(() => {
+ document.addEventListener('scroll', scrollListener)
+ return () => document.removeEventListener('scroll', scrollListener)
+ }, [])
+
+ return (
+
+
+ {showPercent && (
+
{percent}%
+ )}
+
+
+ )
+}
+
+export default Progress
diff --git a/themes/heo/components/RandomPostButton.js b/themes/heo/components/RandomPostButton.js
new file mode 100644
index 00000000..66d6cc85
--- /dev/null
+++ b/themes/heo/components/RandomPostButton.js
@@ -0,0 +1,19 @@
+import { useRouter } from 'next/router'
+
+/**
+ * 随机跳转到一个文章
+ */
+export default function RandomPostButton(props) {
+ const { latestPosts } = props
+ const router = useRouter()
+ function handleClick() {
+ const randomIndex = Math.floor(Math.random() * latestPosts.length)
+ const randomPost = latestPosts[randomIndex]
+ router.push(randomPost.slug)
+ }
+ return (
+
+
+
+ )
+}
diff --git a/themes/heo/components/ReadingProgress.js b/themes/heo/components/ReadingProgress.js
new file mode 100644
index 00000000..fed74a54
--- /dev/null
+++ b/themes/heo/components/ReadingProgress.js
@@ -0,0 +1,42 @@
+import { ArrowSmallUp } from '@/components/HeroIcons'
+import { useEffect, useState } from 'react'
+
+/**
+ * 回顶按钮
+ * @returns
+ */
+export default function ReadingProgress() {
+ const [scrollPercentage, setScrollPercentage] = useState(0)
+ useEffect(() => {
+ let requestId
+
+ function handleScroll() {
+ const scrollHeight = document.documentElement.scrollHeight
+ const clientHeight = document.documentElement.clientHeight
+ const scrollY = window.scrollY || window.pageYOffset
+
+ const percent = Math.floor((scrollY / (scrollHeight - clientHeight)) * 100)
+ setScrollPercentage(percent)
+
+ requestId = requestAnimationFrame(handleScroll)
+ }
+
+ handleScroll() // 初始化滚动位置
+
+ return () => {
+ cancelAnimationFrame(requestId)
+ }
+ }, [])
+
+ return (<>
+
window.scrollTo({ top: 0, behavior: 'smooth' })}
+ className={`${scrollPercentage > 0 ? 'w-10 h-10 ' : 'w-0 h-0 opacity-0'} group cursor-pointer hover:bg-black hover:bg-opacity-10 rounded-full flex justify-center items-center duration-200 transition-all`} >
+
+
+ {scrollPercentage < 100 ? scrollPercentage :
}
+
+
+
+ )
+}
diff --git a/themes/heo/components/RightFloatArea.js b/themes/heo/components/RightFloatArea.js
new file mode 100644
index 00000000..d7fadce5
--- /dev/null
+++ b/themes/heo/components/RightFloatArea.js
@@ -0,0 +1,42 @@
+import throttle from 'lodash.throttle'
+import { useCallback, useEffect, useState } from 'react'
+import FloatDarkModeButton from './FloatDarkModeButton'
+import JumpToTopButton from './JumpToTopButton'
+
+/**
+ * 悬浮在右下角的按钮，当页面向下滚动100px时会出现
+ * @param {*} param0
+ * @returns
+ */
+export default function RightFloatArea({ floatSlot }) {
+ const [showFloatButton, switchShow] = useState(false)
+ 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)
+ }
+ }, 200))
+
+ useEffect(() => {
+ document.addEventListener('scroll', scrollListener)
+ return () => document.removeEventListener('scroll', scrollListener)
+ }, [])
+
+ return (
+
+ )
+}
diff --git a/themes/heo/components/SearchButton.js b/themes/heo/components/SearchButton.js
new file mode 100644
index 00000000..137d6c95
--- /dev/null
+++ b/themes/heo/components/SearchButton.js
@@ -0,0 +1,7 @@
+import Link from 'next/link'
+
+export default function SearchButton() {
+ return
+
+
+}
diff --git a/themes/heo/components/SearchDrawer.js b/themes/heo/components/SearchDrawer.js
new file mode 100644
index 00000000..c7ec88a7
--- /dev/null
+++ b/themes/heo/components/SearchDrawer.js
@@ -0,0 +1,36 @@
+import { Router } from 'next/router'
+import { useImperativeHandle, useRef } from 'react'
+import SearchInput from './SearchInput'
+const SearchDrawer = ({ cRef, slot }) => {
+ const searchDrawer = useRef()
+ const searchInputRef = useRef()
+ useImperativeHandle(cRef, () => {
+ return {
+ show: () => {
+ searchDrawer?.current?.classList?.remove('hidden')
+ searchInputRef?.current?.focus()
+ }
+ }
+ })
+ const hidden = () => {
+ searchDrawer?.current?.classList?.add('hidden')
+ }
+ Router.events.on('routeChangeComplete', (...args) => {
+ hidden()
+ })
+ return (
+
+ )
+}
+
+export default SearchDrawer
diff --git a/themes/heo/components/SearchInput.js b/themes/heo/components/SearchInput.js
new file mode 100644
index 00000000..6e577bba
--- /dev/null
+++ b/themes/heo/components/SearchInput.js
@@ -0,0 +1,106 @@
+import { useRouter } from 'next/router'
+import { useImperativeHandle, useRef, useState } from 'react'
+import { useGlobal } from '@/lib/global'
+let lock = false
+
+const SearchInput = props => {
+ const { currentSearch, cRef, className } = props
+ const [onLoading, setLoadingState] = useState(false)
+ const router = useRouter()
+ const searchInputRef = useRef()
+ const { locale } = useGlobal()
+ useImperativeHandle(cRef, () => {
+ return {
+ focus: () => {
+ searchInputRef?.current?.focus()
+ }
+ }
+ })
+
+ const handleSearch = () => {
+ const key = searchInputRef.current.value
+ if (key && key !== '') {
+ setLoadingState(true)
+ router.push({ pathname: '/search/' + key }).then(r => {
+ setLoadingState(false)
+ })
+ // location.href = '/search/' + key
+ } else {
+ router.push({ pathname: '/' }).then(r => {})
+ }
+ }
+ const handleKeyUp = e => {
+ if (e.keyCode === 13) {
+ // 回车
+ handleSearch(searchInputRef.current.value)
+ } else if (e.keyCode === 27) {
+ // ESC
+ cleanSearch()
+ }
+ }
+ const cleanSearch = () => {
+ searchInputRef.current.value = ''
+ }
+
+ const [showClean, setShowClean] = useState(false)
+ const updateSearchKey = val => {
+ if (lock) {
+ return
+ }
+ searchInputRef.current.value = val
+
+ if (val) {
+ setShowClean(true)
+ } else {
+ setShowClean(false)
+ }
+ }
+ function lockSearchInput () {
+ lock = true
+ }
+
+ function unLockSearchInput () {
+ lock = false
+ }
+
+ return (
+
+
updateSearchKey(e.target.value)}
+ defaultValue={currentSearch || ''}
+ />
+
+
+
+
+
+ {showClean && (
+
+
+
+ )}
+
+ )
+}
+
+export default SearchInput
diff --git a/themes/heo/components/SearchNav.js b/themes/heo/components/SearchNav.js
new file mode 100644
index 00000000..7be2b8ce
--- /dev/null
+++ b/themes/heo/components/SearchNav.js
@@ -0,0 +1,68 @@
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import { useEffect, useRef } from 'react'
+import Card from './Card'
+import SearchInput from './SearchInput'
+import TagItemMini from './TagItemMini'
+
+/**
+ * 搜索页面的导航
+ * @param {*} props
+ * @returns
+ */
+export default function SearchNav(props) {
+ const { tagOptions, categoryOptions } = props
+ const cRef = useRef(null)
+ const { locale } = useGlobal()
+ useEffect(() => {
+ // 自动聚焦到搜索框
+ cRef?.current?.focus()
+ }, [])
+
+ return <>
+
+
+ {/* 分类 */}
+
+
+ {locale.COMMON.CATEGORY}:
+
+
+ {categoryOptions?.map(category => {
+ return (
+
+
+
+ {category.name}({category.count})
+
+
+ )
+ })}
+
+ {/* 标签 */}
+
+
+ {locale.COMMON.TAGS}:
+
+
+
+
+
+}
diff --git a/themes/heo/components/SideBar.js b/themes/heo/components/SideBar.js
new file mode 100644
index 00000000..e43c4e12
--- /dev/null
+++ b/themes/heo/components/SideBar.js
@@ -0,0 +1,33 @@
+import BLOG from '@/blog.config'
+import { useRouter } from 'next/router'
+import MenuGroupCard from './MenuGroupCard'
+import { MenuListSide } from './MenuListSide'
+
+/**
+ * 侧边抽屉
+ * @param tags
+ * @param currentTag
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const SideBar = (props) => {
+ const { siteInfo } = props
+ const router = useRouter()
+ return (
+
+
+
+
{ router.push('/') }}
+ className='justify-center items-center flex hover:rotate-45 py-6 hover:scale-105 dark:text-gray-100 transform duration-200 cursor-pointer'>
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
+
+
+
+
+
+
+ )
+}
+
+export default SideBar
diff --git a/themes/heo/components/SideBarDrawer.js b/themes/heo/components/SideBarDrawer.js
new file mode 100644
index 00000000..87125c05
--- /dev/null
+++ b/themes/heo/components/SideBarDrawer.js
@@ -0,0 +1,51 @@
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+
+/**
+ * 侧边栏抽屉面板，可以从侧面拉出
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
+ const router = useRouter()
+ useEffect(() => {
+ const sideBarDrawerRouteListener = () => {
+ switchSideDrawerVisible(false)
+ }
+ router.events.on('routeChangeComplete', sideBarDrawerRouteListener)
+ return () => {
+ router.events.off('routeChangeComplete', sideBarDrawerRouteListener)
+ }
+ }, [router.events])
+
+ // 点击按钮更改侧边抽屉状态
+ const switchSideDrawerVisible = (showStatus) => {
+ if (showStatus) {
+ onOpen && onOpen()
+ } else {
+ onClose && onClose()
+ }
+ const sideBarDrawer = window.document.getElementById('sidebar-drawer')
+ const sideBarDrawerBackground = window.document.getElementById('sidebar-drawer-background')
+
+ if (showStatus) {
+ sideBarDrawer?.classList.replace('-mr-72', 'mr-0')
+ sideBarDrawerBackground?.classList.replace('hidden', 'block')
+ } else {
+ sideBarDrawer?.classList.replace('mr-0', '-mr-72')
+ sideBarDrawerBackground?.classList.replace('block', 'hidden')
+ }
+ }
+
+ return
+ )
+}
diff --git a/themes/heo/components/WavesArea.js b/themes/heo/components/WavesArea.js
new file mode 100644
index 00000000..073b4670
--- /dev/null
+++ b/themes/heo/components/WavesArea.js
@@ -0,0 +1,65 @@
+import { useGlobal } from '@/lib/global'
+
+/**
+ * 文章波浪动画
+ */
+export default function WavesArea() {
+ const { isDarkMode } = useGlobal()
+ const color = isDarkMode ? '#18171d' : '#f7f9fe'
+
+ return (
+
+
+
+
+ )
+}
diff --git a/themes/heo/config.js b/themes/heo/config.js
new file mode 100644
index 00000000..58c36968
--- /dev/null
+++ b/themes/heo/config.js
@@ -0,0 +1,121 @@
+const CONFIG = {
+ HOME_BANNER_ENABLE: true,
+
+ SITE_CREATE_TIME: '2021-09-21', // 建站日期，用于计算网站运行的第几天
+
+ // 首页顶部通知条滚动内容，如不需要可以留空 []
+ NOTICE_BAR: [
+ { title: '欢迎来到我的博客', url: 'https://blog.tangly1024.com' },
+ { title: '访问文档中心获取更多帮助', url: 'https://docs.tangly1024.com' }
+ ],
+
+ // 英雄区(首页顶部大卡)
+ HERO_TITLE_1: '分享编程',
+ HERO_TITLE_2: '与思维认知',
+ HERO_TITLE_3: 'TANGLY1024.COM',
+ HERO_TITLE_4: '新版上线',
+ HERO_TITLE_5: 'NotionNext4.0 轻松定制主题',
+ // 英雄区显示三个置顶分类
+ HERO_CATEGORY_1: { title: '必看精选', url: '/tag/必看精选' },
+ HERO_CATEGORY_2: { title: '热门文章', url: '/tag/热门文章' },
+ HERO_CATEGORY_3: { title: '使用教程', url: '/tag/实用教程' },
+
+ // 右侧个人资料卡牌欢迎语，点击可自动切换
+ INFOCARD_GREETINGS: [
+ '你好！我是',
+ '🔍 分享与热心帮助',
+ '🤝 专修交互与设计',
+ '🏃 脚踏实地行动派',
+ '🏠 智能家居小能手',
+ '🤖️ 数码科技爱好者',
+ '🧱 团队小组发动机'
+ ],
+
+ // 用户技能图标
+ GROUP_ICONS: [
+ {
+ title_1: 'AfterEffect',
+ img_1: '/images/heo/20239df3f66615b532ce571eac6d14ff21cf072602.webp',
+ color_1: '#989bf8',
+ title_2: 'Sketch',
+ img_2: '/images/heo/2023e0ded7b724a39f12d59c3dc8fbdc7cbe074202.webp',
+ color_2: '#ffffff'
+ },
+ {
+ title_1: 'Docker',
+ img_1: '/images/heo/20231108a540b2862d26f8850172e4ea58ed075102.webp',
+ color_1: '#57b6e6',
+ title_2: 'Photoshop',
+ img_2: '/images/heo/2023e4058a91608ea41751c4f102b131f267075902.webp',
+ color_2: '#4082c3'
+ },
+ {
+ title_1: 'FinalCutPro',
+ img_1: '/images/heo/20233e777652412247dd57fd9b48cf997c01070702.webp',
+ color_1: '#ffffff',
+ title_2: 'Python',
+ img_2: '/images/heo/20235c0731cd4c0c95fc136a8db961fdf963071502.webp',
+ color_2: '#ffffff'
+ },
+ {
+ title_1: 'Swift',
+ img_1: '/images/heo/202328bbee0b314297917b327df4a704db5c072402.webp',
+ color_1: '#eb6840',
+ title_2: 'Principle',
+ img_2: '/images/heo/2023f76570d2770c8e84801f7e107cd911b5073202.webp',
+ color_2: '#8f55ba'
+ },
+ {
+ title_1: 'illustrator',
+ img_1: '/images/heo/20237359d71b45ab77829cee5972e36f8c30073902.webp',
+ color_1: '#f29e39',
+ title_2: 'CSS3',
+ img_2: '/images/heo/20237c548846044a20dad68a13c0f0e1502f074602.webp',
+ color_2: '#2c51db'
+ },
+ {
+ title_1: 'JS',
+ img_1: '/images/heo/2023786e7fc488f453d5fb2be760c96185c0075502.webp',
+ color_1: '#f7cb4f',
+ title_2: 'HTML',
+ img_2: '/images/heo/202372b4d760fd8a497d442140c295655426070302.webp',
+ color_2: '#e9572b'
+ },
+ {
+ title_1: 'Git',
+ img_1: '/images/heo/2023ffa5707c4e25b6beb3e6a3d286ede4c6071102.webp',
+ color_1: '#df5b40',
+ title_2: 'Rhino',
+ img_2: '/images/heo/20231ca53fa0b09a3ff1df89acd7515e9516173302.webp',
+ color_2: '#1f1f1f'
+ }
+ ],
+
+ // ***** 以下配置无效，只是预留开发 ****
+ // 菜单配置
+ MENU_INDEX: true, // 显示首页
+ MENU_CATEGORY: true, // 显示分类
+ MENU_TAG: true, // 显示标签
+ MENU_ARCHIVE: true, // 显示归档
+ MENU_SEARCH: true, // 显示搜索
+
+ POST_LIST_COVER: true, // 列表显示文章封面
+ POST_LIST_COVER_HOVER_ENLARGE: false, // 列表鼠标悬停放大
+
+ POST_LIST_COVER_DEFAULT: true, // 封面为空时用站点背景做默认封面
+ POST_LIST_SUMMARY: true, // 文章摘要
+ POST_LIST_PREVIEW: false, // 读取文章预览
+ POST_LIST_IMG_CROSSOVER: true, // 博客列表图片左右交错
+
+ ARTICLE_ADJACENT: true, // 显示上一篇下一篇文章推荐
+ ARTICLE_COPYRIGHT: true, // 显示文章版权声明
+ ARTICLE_RECOMMEND: true, // 文章关联推荐
+
+ WIDGET_LATEST_POSTS: true, // 显示最新文章卡
+ WIDGET_ANALYTICS: false, // 显示统计卡
+ WIDGET_TO_TOP: true,
+ WIDGET_TO_COMMENT: true, // 跳到评论区
+ WIDGET_DARK_MODE: true, // 夜间模式
+ WIDGET_TOC: true // 移动端悬浮目录
+}
+export default CONFIG
diff --git a/themes/heo/index.js b/themes/heo/index.js
new file mode 100644
index 00000000..1a8f46e0
--- /dev/null
+++ b/themes/heo/index.js
@@ -0,0 +1,432 @@
+import CONFIG from './config'
+
+import CommonHead from '@/components/CommonHead'
+import { useEffect } from 'react'
+import Footer from './components/Footer'
+import SideRight from './components/SideRight'
+import NavBar from './components/NavBar'
+import { useGlobal } from '@/lib/global'
+import BLOG from '@/blog.config'
+import { isBrowser, loadExternalResource } from '@/lib/utils'
+import BlogPostListPage from './components/BlogPostListPage'
+import BlogPostListScroll from './components/BlogPostListScroll'
+import Hero from './components/Hero'
+import { useRouter } from 'next/router'
+import Mark from 'mark.js'
+import SearchNav from './components/SearchNav'
+import BlogPostArchive from './components/BlogPostArchive'
+import { ArticleLock } from './components/ArticleLock'
+import PostHeader from './components/PostHeader'
+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 ShareBar from '@/components/ShareBar'
+import Link from 'next/link'
+import CategoryBar from './components/CategoryBar'
+import { Transition } from '@headlessui/react'
+import { Style } from './style'
+import { NoticeBar } from './components/NoticeBar'
+import { HashTag } from '@/components/HeroIcons'
+import LatestPostsGroup from './components/LatestPostsGroup'
+import FloatTocButton from './components/FloatTocButton'
+
+/**
+ * 基础布局 采用上中下布局，移动端使用顶部侧边导航栏
+ * @param props
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const LayoutBase = props => {
+ const { children, headerSlot, slotTop, slotRight, meta, siteInfo } = props
+ const { onLoading } = useGlobal()
+
+ // 加载主题样式
+ if (isBrowser()) {
+ loadExternalResource('/css/theme-hexo.css', 'css')
+ }
+
+ return (
+
+ {/* 网页SEO */}
+
+
+
+ {/* 顶部嵌入 导航栏，首页放hero，文章页放文章详情 */}
+ {headerSlot}
+
+ {/* 主区块 */}
+
+
+
+
+
+ {/* 主区上部嵌入 */}
+ {slotTop}
+
+ {children}
+
+
+
+ {/* 主区快右侧 */}
+ {slotRight}
+
+
+
+
+
+ {/* 页脚 */}
+
+
+ )
+}
+
+/**
+ * 首页
+ * 是一个博客列表，嵌入一个Hero大图
+ * @param {*} props
+ * @returns
+ */
+const LayoutIndex = (props) => {
+ const headerSlot =
+ {/* 顶部导航 */}
+
+ {/* 通知横幅 */}
+
+
+
+
+ // 右侧栏 用户信息+标签列表
+ const slotRight =
+
+ return
+ {/* 文章分类条 */}
+
+ {BLOG.POST_LIST_STYLE === 'page' ? : }
+
+}
+
+/**
+ * 博客列表
+ * @param {*} props
+ * @returns
+ */
+const LayoutPostList = (props) => {
+ // 右侧栏
+ const slotRight =
+ const headerSlot =
+
+ return
+ {/* 文章分类条 */}
+
+ {BLOG.POST_LIST_STYLE === 'page' ? : }
+
+}
+
+/**
+ * 搜索
+ * @param {*} props
+ * @returns
+ */
+const LayoutSearch = props => {
+ const { keyword } = props
+ const router = useRouter()
+ const currentSearch = keyword || router?.query?.s
+ const headerSlot =
+
+ useEffect(() => {
+ setTimeout(() => {
+ 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
+ ?
+ : {BLOG.POST_LIST_STYLE === 'page' ? : }
}
+
+ )
+}
+
+/**
+ * 归档
+ * @param {*} props
+ * @returns
+ */
+const LayoutArchive = (props) => {
+ const { archivePosts } = props
+
+ // 右侧栏
+ const slotRight =
+ const headerSlot =
+
+ // 归档页顶部显示条，如果是默认归档则不显示。分类详情页显示分类列表，标签详情页显示当前标签
+
+ return
+
+ {/* 文章分类条 */}
+
+
+
+ {Object.keys(archivePosts).map(archiveTitle => (
+
+ ))}
+
+
+}
+
+/**
+ * 文章详情
+ * @param {*} props
+ * @returns
+ */
+const LayoutSlug = props => {
+ const { post, lock, validPassword } = props
+ const { locale } = useGlobal()
+
+ // 右侧栏
+ const slotRight =
+ const headerSlot =
+
+ return (
+
+
+ {lock &&
}
+
+ {!lock &&
+
+
+ {/* Notion文章主体 */}
+
+
+ {/* 分享 */}
+
+ {post?.type === 'Post' && <>
+
+ {/* 版权 */}
+
+ {/* 文章推荐 */}
+
+ {/* 上一篇\下一篇文章 */}
+
+ }
+
+
+
+
+
+ {/* 评论互动 */}
+
+
{locale.COMMON.COMMENTS}
+
+
+
}
+
+ )
+}
+
+/**
+ * 404
+ * @param {*} props
+ * @returns
+ */
+const Layout404 = props => {
+ const { meta, siteInfo } = props
+ const { onLoading } = useGlobal()
+ return (
+
+ {/* 网页SEO */}
+
+
+
+ {/* 顶部嵌入 导航栏，首页放hero，文章页放文章详情 */}
+
+
+ {/* 主区块 */}
+
+
+
+
+
+
+ {/* 404卡牌 */}
+
+ {/* 左侧动图 */}
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
+
+ {/* 右侧文字 */}
+
+
404
+
请尝试站内搜索寻找文章
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+/**
+ * 分类列表
+ * @param {*} props
+ * @returns
+ */
+const LayoutCategoryIndex = props => {
+ const { categoryOptions } = props
+ const { locale } = useGlobal()
+ const headerSlot =
+
+ return (
+
+
+ {locale.COMMON.CATEGORY}
+
+
+ {categoryOptions.map(category => {
+ return (
+
+
+
+ {category.name}
+
+ {category.count}
+
+
+
+ )
+ })}
+
+ )
+}
+
+/**
+ * 标签列表
+ * @param {*} props
+ * @returns
+ */
+const LayoutTagIndex = props => {
+ const { tagOptions } = props
+ const { locale } = useGlobal()
+ return (
+
+
+ {locale.COMMON.TAGS}
+
+
+ {tagOptions.map(tag => {
+ return (
+
+
+
+ {tag.name}
+
+ {tag.count}
+
+
+
+ )
+ })}
+
+ )
+}
+
+export {
+ CONFIG as THEME_CONFIG,
+ LayoutIndex,
+ LayoutSearch,
+ LayoutArchive,
+ LayoutSlug,
+ Layout404,
+ LayoutCategoryIndex,
+ LayoutPostList,
+ LayoutTagIndex
+}
diff --git a/themes/heo/style.js b/themes/heo/style.js
new file mode 100644
index 00000000..632ec93a
--- /dev/null
+++ b/themes/heo/style.js
@@ -0,0 +1,64 @@
+/* eslint-disable react/no-unknown-property */
+/**
+ * 此处样式只对当前主题生效
+ * 此处不支持tailwindCSS的 @apply 语法
+ * @returns
+ */
+const Style = () => {
+ return
+}
+
+export { Style }
diff --git a/themes/hexo/Layout404.js b/themes/hexo/Layout404.js
deleted file mode 100644
index fcf2bf2c..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('container')
- if (!article) {
- router.push('/').then(() => {
- // console.log('找不到页面', router.asPath)
- })
- }
- }, 3000)
- })
- return (
-
-
-
- )
-}
-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}
-
-
-
- )
-}
-
-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}:
-
-
-
-
- {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 514a3c4e..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('container') : null
-
- const floatSlot = <>
- {post?.toc?.length > 1 &&
- {
- drawerRight?.current?.handleSwitchVisible()
- }}
- />
-
}
-
-
-
- return (
-
}
- {...props}
- showCategory={false}
- showTag={false}
- floatSlot={floatSlot}
- >
-
- {lock &&
}
-
- {!lock &&
-
-
- {/* Notion文章主体 */}
-
-
- {/* 分享 */}
-
- {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})` : '')}
-
-
-
- )
-}
-
-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}:
-
-
-
-
- )
-}
-
-export default LayoutTagIndex
diff --git a/themes/hexo/components/ArticleAdjacent.js b/themes/hexo/components/ArticleAdjacent.js
index 3f4a929a..21ca9e32 100644
--- a/themes/hexo/components/ArticleAdjacent.js
+++ b/themes/hexo/components/ArticleAdjacent.js
@@ -1,5 +1,5 @@
import Link from 'next/link'
-import CONFIG_HEXO from '../config_hexo'
+import CONFIG from '../config'
/**
* 上一篇，下一篇文章
@@ -7,7 +7,7 @@ import CONFIG_HEXO from '../config_hexo'
* @returns
*/
export default function ArticleAdjacent ({ prev, next }) {
- if (!prev || !next || !CONFIG_HEXO.ARTICLE_ADJACENT) {
+ if (!prev || !next || !CONFIG.ARTICLE_ADJACENT) {
return <>
}
return (
@@ -29,5 +29,5 @@ export default function ArticleAdjacent ({ prev, next }) {
- );
+ )
}
diff --git a/themes/hexo/components/ArticleCopyright.js b/themes/hexo/components/ArticleCopyright.js
index c1dc2dd7..4664573c 100644
--- a/themes/hexo/components/ArticleCopyright.js
+++ b/themes/hexo/components/ArticleCopyright.js
@@ -3,10 +3,10 @@ import { useGlobal } from '@/lib/global'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'
-import CONFIG_HEXO from '../config_hexo'
+import CONFIG from '../config'
export default function ArticleCopyright () {
- if (!CONFIG_HEXO.ARTICLE_COPYRIGHT) {
+ if (!CONFIG.ARTICLE_COPYRIGHT) {
return <>
}
const router = useRouter()
diff --git a/themes/hexo/components/ArticleRecommend.js b/themes/hexo/components/ArticleRecommend.js
index 85b9de6d..e4943cf8 100644
--- a/themes/hexo/components/ArticleRecommend.js
+++ b/themes/hexo/components/ArticleRecommend.js
@@ -1,5 +1,5 @@
import Link from 'next/link'
-import CONFIG_HEXO from '../config_hexo'
+import CONFIG from '../config'
import BLOG from '@/blog.config'
import { useGlobal } from '@/lib/global'
@@ -12,7 +12,7 @@ export default function ArticleRecommend({ recommendPosts, siteInfo }) {
const { locale } = useGlobal()
if (
- !CONFIG_HEXO.ARTICLE_RECOMMEND ||
+ !CONFIG.ARTICLE_RECOMMEND ||
!recommendPosts ||
recommendPosts.length === 0
) {
diff --git a/themes/hexo/components/BlogPostCard.js b/themes/hexo/components/BlogPostCard.js
index 5c49b88f..648ce49e 100644
--- a/themes/hexo/components/BlogPostCard.js
+++ b/themes/hexo/components/BlogPostCard.js
@@ -1,23 +1,21 @@
import Link from 'next/link'
import React from 'react'
-import CONFIG_HEXO from '../config_hexo'
+import CONFIG from '../config'
import { BlogPostCardInfo } from './BlogPostCardInfo'
import BLOG from '@/blog.config'
// import Image from 'next/image'
const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
- const showPreview = CONFIG_HEXO.POST_LIST_PREVIEW && post.blockMap
- if (post && !post.pageCoverThumbnail && CONFIG_HEXO.POST_LIST_COVER_DEFAULT) {
+ const showPreview = CONFIG.POST_LIST_PREVIEW && post.blockMap
+ if (post && !post.pageCoverThumbnail && CONFIG.POST_LIST_COVER_DEFAULT) {
post.pageCover = siteInfo?.pageCoverThumbnail
}
- const showPageCover = CONFIG_HEXO.POST_LIST_COVER && post?.pageCoverThumbnail && !showPreview
+ const showPageCover = CONFIG.POST_LIST_COVER && post?.pageCoverThumbnail && !showPreview
// const delay = (index % 2) * 200
return (
-
+
{
data-aos-anchor-placement="top-bottom"
id='blog-post-card'
key={post.id}
- className={`md:h-56 w-full flex justify-between md:flex-row flex-col-reverse ${CONFIG_HEXO.POST_LIST_IMG_CROSSOVER && index % 2 === 1 ? 'md:flex-row-reverse' : ''}
+ className={`md:h-56 w-full flex justify-between md:flex-row flex-col-reverse ${CONFIG.POST_LIST_IMG_CROSSOVER && index % 2 === 1 ? 'md:flex-row-reverse' : ''}
overflow-hidden border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray`}>
{/* 文字内容 */}
diff --git a/themes/hexo/components/BlogPostListScroll.js b/themes/hexo/components/BlogPostListScroll.js
index 2123700d..830e8177 100644
--- a/themes/hexo/components/BlogPostListScroll.js
+++ b/themes/hexo/components/BlogPostListScroll.js
@@ -3,7 +3,7 @@ import BlogPostCard from './BlogPostCard'
import BlogPostListEmpty from './BlogPostListEmpty'
import { useGlobal } from '@/lib/global'
import React from 'react'
-import CONFIG_HEXO from '../config_hexo'
+import CONFIG from '../config'
import { getListByPage } from '@/lib/utils'
/**
@@ -13,7 +13,7 @@ import { getListByPage } from '@/lib/utils'
* @returns {JSX.Element}
* @constructor
*/
-const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG_HEXO.POST_LIST_SUMMARY, siteInfo }) => {
+const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG.POST_LIST_SUMMARY, siteInfo }) => {
const postsPerPage = BLOG.POSTS_PER_PAGE
const [page, updatePage] = React.useState(1)
const postsToShow = getListByPage(posts, page, postsPerPage)
diff --git a/themes/hexo/components/FloatDarkModeButton.js b/themes/hexo/components/FloatDarkModeButton.js
index dcae5ac7..f693d1f0 100644
--- a/themes/hexo/components/FloatDarkModeButton.js
+++ b/themes/hexo/components/FloatDarkModeButton.js
@@ -1,11 +1,11 @@
import { useGlobal } from '@/lib/global'
import { saveDarkModeToCookies } from '@/themes/theme'
-import CONFIG_HEXO from '../config_hexo'
+import CONFIG from '../config'
export default function FloatDarkModeButton () {
const { isDarkMode, updateDarkMode } = useGlobal()
- if (!CONFIG_HEXO.WIDGET_DARK_MODE) {
+ if (!CONFIG.WIDGET_DARK_MODE) {
return <>
}
diff --git a/themes/hexo/components/Header.js b/themes/hexo/components/Hero.js
similarity index 88%
rename from themes/hexo/components/Header.js
rename to themes/hexo/components/Hero.js
index 88fca1c2..76e86c25 100644
--- a/themes/hexo/components/Header.js
+++ b/themes/hexo/components/Hero.js
@@ -1,7 +1,7 @@
// import Image from 'next/image'
import { useEffect, useState } from 'react'
import Typed from 'typed.js'
-import CONFIG_HEXO from '../config_hexo'
+import CONFIG from '../config'
import NavButtonGroup from './NavButtonGroup'
import { useGlobal } from '@/lib/global'
import BLOG from '@/blog.config'
@@ -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()
@@ -63,7 +63,7 @@ const Header = props => {
{/* 首页导航大按钮 */}
- {CONFIG_HEXO.HOME_NAV_BUTTONS &&
}
+ {CONFIG.HOME_NAV_BUTTONS &&
}
{/* 滚动按钮 */}
@@ -72,11 +72,11 @@ const Header = props => {
-
+
)
}
-export default Header
+export default Hero
diff --git a/themes/hexo/components/InfoCard.js b/themes/hexo/components/InfoCard.js
index 3a978d68..661da999 100644
--- a/themes/hexo/components/InfoCard.js
+++ b/themes/hexo/components/InfoCard.js
@@ -3,22 +3,30 @@ import { useRouter } from 'next/router'
import Card from './Card'
import SocialButton from './SocialButton'
import MenuGroupCard from './MenuGroupCard'
-export function InfoCard (props) {
+
+/**
+ * 社交信息卡
+ * @param {*} props
+ * @returns
+ */
+export function InfoCard(props) {
const { className, siteInfo } = props
const router = useRouter()
- return
- {
- router.push('/')
- }}
- >
- {/* eslint-disable-next-line @next/next/no-img-element */}
-
-
{BLOG.AUTHOR}
- {BLOG.BIO}
-
-
-
+ return (
+
+ {
+ router.push('/')
+ }}
+ >
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
+
{BLOG.AUTHOR}
+ {BLOG.BIO}
+
+
+
+ )
}
diff --git a/themes/hexo/components/JumpToCommentButton.js b/themes/hexo/components/JumpToCommentButton.js
index ce82883e..fb007712 100644
--- a/themes/hexo/components/JumpToCommentButton.js
+++ b/themes/hexo/components/JumpToCommentButton.js
@@ -1,5 +1,5 @@
import React from 'react'
-import CONFIG_HEXO from '../config_hexo'
+import CONFIG from '../config'
/**
* 跳转到评论区
@@ -7,7 +7,7 @@ import CONFIG_HEXO from '../config_hexo'
* @constructor
*/
const JumpToCommentButton = () => {
- if (!CONFIG_HEXO.WIDGET_TO_COMMENT) {
+ if (!CONFIG.WIDGET_TO_COMMENT) {
return <>
}
diff --git a/themes/hexo/components/JumpToTopButton.js b/themes/hexo/components/JumpToTopButton.js
index 3602ad99..77313f46 100644
--- a/themes/hexo/components/JumpToTopButton.js
+++ b/themes/hexo/components/JumpToTopButton.js
@@ -1,6 +1,6 @@
import { useGlobal } from '@/lib/global'
import React from 'react'
-import CONFIG_HEXO from '../config_hexo'
+import CONFIG from '../config'
/**
* 跳转到网页顶部
@@ -13,7 +13,7 @@ import CONFIG_HEXO from '../config_hexo'
const JumpToTopButton = ({ showPercent = true, percent }) => {
const { locale } = useGlobal()
- if (!CONFIG_HEXO.WIDGET_TO_TOP) {
+ if (!CONFIG.WIDGET_TO_TOP) {
return <>
}
return (
window.scrollTo({ top: 0, behavior: 'smooth' })} >
diff --git a/themes/hexo/components/MenuGroupCard.js b/themes/hexo/components/MenuGroupCard.js
index e481c2e6..25dba50c 100644
--- a/themes/hexo/components/MenuGroupCard.js
+++ b/themes/hexo/components/MenuGroupCard.js
@@ -1,7 +1,7 @@
import React from 'react'
import Link from 'next/link'
import { useGlobal } from '@/lib/global'
-import CONFIG_HEXO from '../config_hexo'
+import CONFIG from '../config'
const MenuGroupCard = (props) => {
const { postCount, categoryOptions, tagOptions } = props
@@ -11,9 +11,9 @@ const MenuGroupCard = (props) => {
const tagSlot =
{tagOptions?.length}
const links = [
- { name: locale.COMMON.ARTICLE, to: '/archive', slot: archiveSlot, show: CONFIG_HEXO.MENU_ARCHIVE },
- { name: locale.COMMON.CATEGORY, to: '/category', slot: categorySlot, show: CONFIG_HEXO.MENU_CATEGORY },
- { name: locale.COMMON.TAGS, to: '/tag', slot: tagSlot, show: CONFIG_HEXO.MENU_TAG }
+ { name: locale.COMMON.ARTICLE, to: '/archive', slot: archiveSlot, show: CONFIG.MENU_ARCHIVE },
+ { name: locale.COMMON.CATEGORY, to: '/category', slot: categorySlot, show: CONFIG.MENU_CATEGORY },
+ { name: locale.COMMON.TAGS, to: '/tag', slot: tagSlot, show: CONFIG.MENU_TAG }
]
return (
diff --git a/themes/hexo/components/MenuItemCollapse.js b/themes/hexo/components/MenuItemCollapse.js
index 3ec10f5e..a05c627f 100644
--- a/themes/hexo/components/MenuItemCollapse.js
+++ b/themes/hexo/components/MenuItemCollapse.js
@@ -42,8 +42,8 @@ export const MenuItemCollapse = ({ link }) => {
{/* 折叠子菜单 */}
{hasSubMenu &&
- {link.subMenus.map(sLink => {
- return
+ {link.subMenus.map((sLink, index) => {
+ return
{link?.icon && } {sLink.title}
diff --git a/themes/hexo/components/MenuItemDrop.js b/themes/hexo/components/MenuItemDrop.js
index e812d91d..2dfb6f79 100644
--- a/themes/hexo/components/MenuItemDrop.js
+++ b/themes/hexo/components/MenuItemDrop.js
@@ -29,9 +29,9 @@ export const MenuItemDrop = ({ link }) => {
{/* 子菜单 */}
{hasSubMenu &&
{link.subMenus.map((sLink, index) => {
- return -
+ return
-
- {link?.icon && }{sLink.title}
+ {link?.icon && }{sLink.title}
})}
diff --git a/themes/hexo/components/MenuListSide.js b/themes/hexo/components/MenuListSide.js
index cda25159..1a3b2f5b 100644
--- a/themes/hexo/components/MenuListSide.js
+++ b/themes/hexo/components/MenuListSide.js
@@ -2,17 +2,17 @@ import React from 'react'
import { useGlobal } from '@/lib/global'
import BLOG from '@/blog.config'
import { MenuItemCollapse } from './MenuItemCollapse'
-import CONFIG_HEXO from '../config_hexo'
+import CONFIG from '../config'
export const MenuListSide = (props) => {
const { customNav, customMenu } = props
const { locale } = useGlobal()
let links = [
- { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_HEXO.MENU_ARCHIVE },
- { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_HEXO.MENU_SEARCH },
- { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_HEXO.MENU_CATEGORY },
- { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_HEXO.MENU_TAG }
+ { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE },
+ { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH },
+ { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY },
+ { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG }
]
if (customNav) {
diff --git a/themes/hexo/components/MenuListTop.js b/themes/hexo/components/MenuListTop.js
index ff40d24e..a2fd66ad 100644
--- a/themes/hexo/components/MenuListTop.js
+++ b/themes/hexo/components/MenuListTop.js
@@ -1,6 +1,6 @@
import React from 'react'
import { useGlobal } from '@/lib/global'
-import CONFIG_HEXO from '../config_hexo'
+import CONFIG from '../config'
import BLOG from '@/blog.config'
import { MenuItemDrop } from './MenuItemDrop'
@@ -9,11 +9,11 @@ export const MenuListTop = (props) => {
const { locale } = useGlobal()
let links = [
- { id: 1, icon: 'fa-solid fa-house', name: locale.NAV.INDEX, to: '/', show: CONFIG_HEXO.MENU_INDEX },
- { id: 2, icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_HEXO.MENU_SEARCH },
- { id: 3, icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_HEXO.MENU_ARCHIVE }
- // { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_HEXO.MENU_CATEGORY },
- // { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_HEXO.MENU_TAG }
+ { id: 1, icon: 'fa-solid fa-house', name: locale.NAV.INDEX, to: '/', show: CONFIG.MENU_INDEX },
+ { id: 2, icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH },
+ { id: 3, icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE }
+ // { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY },
+ // { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG }
]
if (customNav) {
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 (
-