feature：剥离主题目录

2026-05-24 15:09:51 +00:00 · 2022-01-15 20:14:53 +08:00
parent 7aa1ba7e5b
commit a6903b1d52
82 changed files with 670 additions and 471 deletions
--- a/themes/NEXT/BaseLayout.js
+++ b/themes/NEXT/BaseLayout.js
@@ -0,0 +1,118 @@
+import BLOG from '@/blog.config'
+import CommonHead from '@/components/CommonHead'
+import FloatDarkModeButton from './components/FloatDarkModeButton'
+import Footer from './components/Footer'
+import JumpToBottomButton from './components/JumpToBottomButton'
+import JumpToTopButton from './components/JumpToTopButton'
+import LoadingCover from './components/LoadingCover'
+import SideAreaLeft from './components/SideAreaLeft'
+import SideAreaRight from './components/SideAreaRight'
+import TopNav from './components/TopNav'
+import { useGlobal } from '@/lib/global'
+import PropTypes from 'prop-types'
+import React, { useEffect, useRef, useState } from 'react'
+import smoothscroll from 'smoothscroll-polyfill'
+
+/**
+ * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
+ * @param children
+ * @param layout
+ * @param fullWidth
+ * @param tags
+ * @param meta
+ * @param post
+ * @param totalPosts
+ * @param currentSearch
+ * @param currentCategory
+ * @param currentTag
+ * @param categories
+ * @param customMeta
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const BaseLayout = ({
+  children,
+  layout,
+  fullWidth,
+  headerSlot,
+  tags,
+  meta,
+  post,
+  postCount,
+  sideBarSlot,
+  floatSlot,
+  rightAreaSlot,
+  currentSearch,
+  currentCategory,
+  currentTag,
+  categories,
+  ...customMeta
+}) => {
+  const { onLoading } = useGlobal()
+  const targetRef = useRef(null)
+
+  const [show, switchShow] = useState(false)
+  const [percent, changePercent] = useState(0) // 页面阅读百分比
+  const scrollListener = () => {
+    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 !== show) {
+      switchShow(shouldShow)
+    }
+    changePercent(per)
+  }
+  useEffect(() => {
+    smoothscroll.polyfill()
+    document.addEventListener('scroll', scrollListener)
+    return () => document.removeEventListener('scroll', scrollListener)
+  }, [show])
+
+  return (<>
+
+      <CommonHead meta={meta} />
+
+      <TopNav tags={tags} postCount={postCount} post={post} slot={sideBarSlot} currentSearch={currentSearch} categories={categories} currentCategory={currentCategory} />
+
+      <>{headerSlot}</>
+
+      <div className='h-0.5 w-full bg-gray-700 dark:bg-gray-600 hidden lg:block'/>
+
+      <main id='wrapper' className='flex justify-center flex-1 pb-12'>
+          <SideAreaLeft targetRef={targetRef} post={post} postCount={postCount} tags={tags} currentSearch={currentSearch} currentTag={currentTag} categories={categories} currentCategory={currentCategory}/>
+          <section id='center' className={`${BLOG.topNavType !== 'normal' ? 'mt-14' : ''} lg:max-w-3xl xl:max-w-4xl flex-grow md:mt-0 min-h-screen w-full`} ref={targetRef}>
+            {onLoading
+              ? <LoadingCover/>
+              : <>
+                {children}
+              </>
+            }
+          </section>
+          <SideAreaRight targetRef={targetRef} post={post} slot={rightAreaSlot} postCount={postCount} tags={tags} currentSearch={currentSearch} currentTag={currentTag} categories={categories} currentCategory={currentCategory}/>
+      </main>
+
+      {/* 右下角悬浮 */}
+      <div className='right-8 bottom-10 lg:right-2 lg:bottom-2 fixed justify-end z-20 font-sans'>
+        <div className={(show ? 'animate__animated ' : 'hidden') + ' animate__fadeInUp rounded-md glassmorphism justify-center duration-500  animate__faster flex space-x-2 items-center cursor-pointer '}>
+          <JumpToTopButton percent={percent}/>
+          <JumpToBottomButton />
+          <FloatDarkModeButton/>
+          {floatSlot}
+        </div>
+      </div>
+
+      <Footer title={meta.title}/>
+      </>
+  )
+}
+
+BaseLayout.propTypes = {
+  children: PropTypes.node
+}
+
+export default BaseLayout