feature：封装组件

2026-05-14 07:26:52 +00:00 · 2021-12-30 17:15:14 +08:00
parent 7a5aac0a20
commit 540f3ac8ed
10 changed files with 78 additions and 71 deletions
--- a/components/ArticleDetail.js
+++ b/components/ArticleDetail.js
@@ -38,9 +38,9 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
  const date = formatDate(post?.date?.start_date || post.createdTime, locale.LOCALE)

  return (<>
-      <div id="article-wrapper" ref={targetRef} className="flex-grow mt-14 md:mt-0 max-w-5xl mx-auto w-screen md:w-full ">
+      <div id="article-wrapper" ref={targetRef} className="flex-grow max-w-5xl mx-auto w-screen md:w-full ">
          <article itemScope itemType="https://schema.org/Movie"
-            className="shadow hover:shadow-2xl duration-300 animate__fadeIn animate__animated subpixel-antialiased py-10 px-5 lg:pt-24 md:px-24 xl:px-32 dark:border-gray-700 bg-white dark:bg-gray-800"
+            className="shadow md:hover:shadow-2xl duration-300 animate__fadeIn animate__animated subpixel-antialiased py-10 px-5 lg:pt-24 md:px-24 xl:px-32 dark:border-gray-700 bg-white dark:bg-gray-800"
          >

            <header>
@@ -101,7 +101,7 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
            </header>

            {/* Notion文章主体 */}
-            <section id='notion-article' className='overflow-x-auto overflow-y-hidden px-1'>
+            <section id='notion-article' className='px-1'>
              {blockMap && (
                <NotionRenderer
                  className={`${BLOG.font}`}
@@ -117,7 +117,7 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
              )}
            </section>

-            <section className="px-1 py-2 my-1 text-sm font-light  text-gray-600  dark:text-gray-400">
+            <section className="px-1 py-2 my-1 text-sm font-light overflow-auto text-gray-600  dark:text-gray-400">
              {/* 文章内嵌广告 */}
              <ins className="adsbygoogle"
                style={{ display: 'block', textAlign: 'center' }}
@@ -156,7 +156,7 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
          </article>

          {/* 评论互动 */}
-          <div className="mt-5 lg:px-40 hover:shadow-2xl duration-200 shadow w-screen md:w-full overflow-x-auto dark:border-gray-700 bg-white dark:bg-gray-700">
+          <div className="mt-5 lg:px-40 md:hover:shadow-2xl duration-200 shadow w-screen md:w-full overflow-x-auto dark:border-gray-700 bg-white dark:bg-gray-700">
            <Comment frontMatter={post} />
          </div>
      </div>
--- a/components/BlogPostCard.js
+++ b/components/BlogPostCard.js
@@ -9,7 +9,7 @@ import TagItemMini from './TagItemMini'
 const BlogPostCard = ({ post, tags }) => {
  return (
    <div key={post.id} className='shadow animate__animated animate__fadeIn flex xl:flex-row flex-col-reverse justify-between md:hover:shadow-xl duration-300
-       w-full bg-white dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-600'>
+       rounded-md w-full bg-white dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-600'>

      <div className='p-8 flex flex-col justify-between w-full'>
        <Link href={`${BLOG.path}/article/${post.slug}`} passHref>
--- a/components/BlogPostListScroll.js
+++ b/components/BlogPostListScroll.js
@@ -56,7 +56,7 @@ const BlogPostListScroll = ({ posts = [], tags, currentSearch, currentCategory,
    return <div id='post-list-wrapper' className='mt-10 md:mt-0' ref={targetRef}>

      {/* 文章列表 */}
-      <div className='flex flex-wrap space-y-8'>
+      <div className='flex flex-wrap space-y-8 mx-5 md:mx-0'>
        {postsToShow.map(post => (
          <BlogPostCard key={post.id} post={post} tags={tags}/>
        ))}
--- a/components/SideBar.js
+++ b/components/SideBar.js
@@ -54,7 +54,7 @@ const SideBar = ({ title, tags, currentTag, post, posts, categories, currentCate
          <div className='text-sm px-5 flex flex-nowrap justify-between font-light'>
            <div className='text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faThList} className='mr-2' />{locale.COMMON.CATEGORY}</div>
            <Link href='/category' passHref>
-              <a className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
+              <a className='mb-3 text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
                {locale.COMMON.MORE} <FontAwesomeIcon icon={faAngleDoubleRight} />
              </a>
            </Link>
--- a/components/StickyBar.js
+++ b/components/StickyBar.js
@@ -1,3 +1,8 @@
+import throttle from 'lodash.throttle'
+import { useCallback, useEffect } from 'react'
+
+let windowTop = 0
+
 /**
 * 标签组导航条，默认隐藏仅在移动端显示
 * @param tags
@@ -7,9 +12,31 @@
 */
 const StickyBar = ({ children }) => {
  if (!children) return <></>
+  const scrollTrigger = useCallback(throttle(() => {
+    const scrollS = window.scrollY
+    if (scrollS >= windowTop && scrollS > 10) {
+      const stickyBar = document.querySelector('#sticky-bar')
+      stickyBar && stickyBar.classList.replace('top-14', 'top-0')
+      windowTop = scrollS
+    } else {
+      const stickyBar = document.querySelector('#sticky-bar')
+      stickyBar && stickyBar.classList.replace('top-0', 'top-14')
+      windowTop = scrollS
+    }
+  }, 200))
+
+  // 监听滚动
+  useEffect(() => {
+    window.addEventListener('scroll', scrollTrigger)
+    scrollTrigger()
+    return () => {
+      window.removeEventListener('scroll', scrollTrigger)
+    }
+  }, [])
+
  return (
    <div id='sticky-bar' className='sticky flex-grow justify-center top-14 md:top-0 duration-500 z-10 pb-16'>
-      <div className='bg-white dark:bg-gray-800 dark:border-gray-600 px-5 absolute rounded-none md:rounded-xl shadow-xl border w-full hidden-scroll'>
+      <div className='glassmorphism dark:border-gray-600 px-5 absolute rounded-none md:rounded-xl shadow-xl border w-full hidden-scroll'>
          <div id='tag-container' className="md:pl-3 overflow-x-auto">
              { children }
          </div>
--- a/components/TopNav.js
+++ b/components/TopNav.js
@@ -3,14 +3,46 @@ import SideBarDrawer from '@/components/SideBarDrawer'
 import { useGlobal } from '@/lib/global'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
-import { useRef } from 'react'
+import { useCallback, useEffect, useRef } from 'react'
 import Image from 'next/image'
 import { faBars } from '@fortawesome/free-solid-svg-icons'
+import throttle from 'lodash.throttle'

-const TopNav = ({ tags, currentTag, post, posts, categories, currentCategory }) => {
+let windowTop = 0
+
+/**
+ * 顶部导航
+ * @param {*} param0
+ * @returns
+ */
+const TopNav = ({ tags, currentTag, post, posts, categories, currentCategory, autoHide = true }) => {
  const drawer = useRef()
  const { locale } = useGlobal()

+  const scrollTrigger = useCallback(throttle(() => {
+    const scrollS = window.scrollY
+    if (scrollS >= windowTop && scrollS > 10) {
+      const nav = document.querySelector('#sticky-nav')
+      nav && nav.classList.replace('top-0', '-top-16')
+      windowTop = scrollS
+    } else {
+      const nav = document.querySelector('#sticky-nav')
+      nav && nav.classList.replace('-top-16', 'top-0')
+      windowTop = scrollS
+    }
+  }, 200))
+
+  // 监听滚动
+  useEffect(() => {
+    if (autoHide) {
+      scrollTrigger()
+      window.addEventListener('scroll', scrollTrigger)
+    }
+    return () => {
+      autoHide && window.removeEventListener('scroll', scrollTrigger)
+    }
+  }, [])
+
  return (<div id='top-nav'>
    {/* 侧面抽屉 */}
    <SideBarDrawer post={post} currentTag={currentTag} cRef={drawer} tags={tags} posts={posts} categories={categories} currentCategory={currentCategory}/>
--- a/layouts/BaseLayout.js
+++ b/layouts/BaseLayout.js
@@ -8,9 +8,8 @@ import SideAreaLeft from '@/components/SideAreaLeft'
 import SideAreaRight from '@/components/SideAreaRight'
 import TopNav from '@/components/TopNav'
 import { useGlobal } from '@/lib/global'
-import throttle from 'lodash.throttle'
 import PropTypes from 'prop-types'
-import React, { useCallback, useEffect, useRef } from 'react'
+import React, { useRef } from 'react'
 /**
 * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
 * @param children
@@ -43,26 +42,6 @@ const BaseLayout = ({
  categories,
  ...customMeta
 }) => {
-  let windowTop = 0
-  const scrollTrigger = useCallback(throttle(() => {
-    const scrollS = window.scrollY
-    if (scrollS >= windowTop && scrollS > 10) {
-      handleScrollDown()
-      windowTop = scrollS
-    } else {
-      handleScrollUp()
-      windowTop = scrollS
-    }
-  }, 200))
-
-  // 监听滚动
-  useEffect(() => {
-    window.addEventListener('scroll', scrollTrigger)
-    scrollTrigger()
-    return () => {
-      window.removeEventListener('scroll', scrollTrigger)
-    }
-  }, [])
  const { onLoading } = useGlobal()
  const targetRef = useRef(null)

@@ -78,7 +57,7 @@ const BaseLayout = ({
          <aside id='left' className='hidden lg:block flex-col w-60 mr-4'>
            <SideAreaLeft targetRef={targetRef} post={post} posts={totalPosts} tags={tags} currentSearch={currentSearch} currentTag={currentTag} categories={categories} currentCategory={currentCategory}/>
          </aside>
-          <section id='center' className='flex-grow max-w-4xl min-h-screen' ref={targetRef}>
+          <section id='center' className='flex-grow mt-14 md:mt-0 max-w-4xl min-h-screen overflow-x-auto' ref={targetRef}>
            {onLoading
              ? <LoadingCover/>
              : <>
@@ -99,37 +78,6 @@ const BaseLayout = ({
  )
 }

-/**
- * 隐藏导航
- * 划到页面下方
- */
-const handleScrollDown = () => {
-  if (document) {
-    const nav = document.querySelector('#sticky-nav')
-    nav && nav.classList.replace('top-0', '-top-16')
-
-    const stickyBar = document.querySelector('#sticky-bar')
-    stickyBar && stickyBar.classList.replace('top-14', 'top-0')
-
-    const tocDrawerButton = document.querySelector('#toc-drawer-button')
-    tocDrawerButton && tocDrawerButton.classList.replace('hidden', 'block')
-  }
-}
-
-/**
- * 显示导航
- * 划到顶部
- */
-const handleScrollUp = () => {
-  if (document) {
-    const nav = document.querySelector('#sticky-nav')
-    nav && nav.classList.replace('-top-16', 'top-0')
-
-    const stickyBar = document.querySelector('#sticky-bar')
-    stickyBar && stickyBar.classList.replace('top-0', 'top-14')
-  }
-}
-
 BaseLayout.propTypes = {
  children: PropTypes.node
 }
--- a/pages/category/index.js
+++ b/pages/category/index.js
@@ -16,7 +16,7 @@ export default function Category ({ tags, allPosts, categories }) {
    type: 'website'
  }
  return <BaseLayout meta={meta} totalPosts={allPosts} tags={tags}>
-      <div className='bg-white dark:bg-gray-700 px-10 py-10 rounded-xl shadow-lg'>
+      <div className='bg-white dark:bg-gray-700 px-10 py-10 shadow'>
        <div className='dark:text-gray-200 mb-5'><FontAwesomeIcon icon={faThList} className='mr-4' />{locale.COMMON.CATEGORY}:</div>
        <div id='category-list' className='duration-200 flex flex-wrap'>
          {Object.keys(categories).map(category => {
--- a/pages/tag/index.js
+++ b/pages/tag/index.js
@@ -16,7 +16,7 @@ export default function Tag ({ tags, allPosts, categories }) {
    type: 'website'
  }
  return <BaseLayout meta={meta} categories={categories} totalPosts={allPosts}>
-      <div className='bg-white dark:bg-gray-700 px-10 py-10 rounded-xl shadow-lg'>
+      <div className='bg-white dark:bg-gray-700 px-10 py-10 shadow'>
        <div className='dark:text-gray-200 mb-5'><FontAwesomeIcon icon={faTags} className='mr-4'/>{locale.COMMON.TAGS}:</div>
        <div id='tags-list' className='duration-200 flex flex-wrap'>
          { tags.map(tag => {
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -150,13 +150,13 @@ nav {
 }

 .glassmorphism{
-  background: rgba(255, 255, 255, 0.2);
-  -webkit-backdrop-filter: blur(3px);
-  backdrop-filter: blur(3px);
+  background: hsla(0, 0%, 100%, .75);
+  -webkit-backdrop-filter: blur(5px);    
+  backdrop-filter: blur(5px);   
 }

 .dark .glassmorphism{
-  background: rgba(31, 41, 55, 0.2);
+  background: rgba(31, 41, 55, .75);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
 }