feature:

加入Header
2026-05-14 07:26:52 +00:00 · 2021-12-22 21:44:05 +08:00
parent b83566e4f4
commit efd1b0b2c5
10 changed files with 123 additions and 34 deletions
--- a/components/Analytics.js
+++ b/components/Analytics.js
@@ -0,0 +1,24 @@
+import { useGlobal } from '@/lib/global'
+import { faChartBar } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+/**
+ * 统计网站信息
+ * @param {*} param0
+ * @returns
+ */
+export default function Analytics ({ postCount }) {
+  const { locale } = useGlobal()
+
+  return <section className='hidden lg:block mb-5 bg-white dark:bg-gray-800 rounded-xl hover:shadow-2xl duration-200 py-4 shadow-md'>
+    <div className='px-5 text-sm font-light pb-1 text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faChartBar} className='mr-2' />{locale.COMMON.ANALYTICS}</div>
+    <div className='mt-2 text-center dark:text-gray-300 font-light text-xs'>
+        <span className='px-1 '>
+            <strong className='font-medium'>{postCount}</strong>{locale.COMMON.POSTS}</span>
+        <span className='px-1 busuanzi_container_site_uv hidden'>
+        | <strong className='pl-1 busuanzi_value_site_uv font-medium'></strong>{locale.COMMON.VISITORS}</span>
+        <span className='px-1 busuanzi_container_site_pv hidden'>
+        | <strong className='pl-1 busuanzi_value_site_pv font-medium'></strong>{locale.COMMON.VIEWS}</span>
+      </div>
+</section>
+}
--- a/components/BlogPostListScroll.js
+++ b/components/BlogPostListScroll.js
@@ -53,7 +53,7 @@ const BlogPostListScroll = ({ posts = [], tags, currentSearch, currentCategory,
  if (!postsToShow || postsToShow.length === 0) {
    return <BlogPostListEmpty currentSearch={currentSearch} />
  } else {
-    return <div id='post-list-wrapper' className='mt-20 md:mt-0' ref={targetRef}>
+    return <div id='post-list-wrapper' className='mt-10 md:mt-0' ref={targetRef}>

      {/* 文章列表 */}
      <div className='flex flex-wrap'>
--- a/components/Header.js
+++ b/components/Header.js
@@ -0,0 +1,34 @@
+import { faArrowDown } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { useEffect, useState } from 'react'
+import Typed from 'typed.js'
+
+/**
+ *
+ * @returns 头图
+ */
+export default function Header () {
+  const [typed, changeType] = useState()
+  useEffect(() => {
+    if (!typed) {
+      changeType(new Typed('#typed', {
+        stringsElement: '#typed-strings', typeSpeed: 200, showCursor: false
+      }))
+    }
+  })
+  const scrollToCenter = () => {
+    document.getElementById('wrapper').scrollIntoView({ behavior: 'smooth' })
+  }
+  return <div className='h-screen w-full'>
+      <div className='absolute z-10 flex h-screen items-center justify-center w-full'>
+          <div id="typed-strings">
+        <h2 className='text-xs text-white font-serif'>唐风集里，收卷波澜。</h2>
+        </div>
+        <div id="typed" className='text-4xl md:text-7xl text-center text-white font-serif'></div>
+      <div onClick={scrollToCenter} className='cursor-pointer w-full text-center text-2xl animate-bounce absolute bottom-10 text-white'><FontAwesomeIcon icon={faArrowDown} /></div>
+    </div>
+    <div className='bg-black bg-cover bg-center h-screen md:-mt-14'
+        style={{ backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0,0,0,0.4), rgba(0, 0, 0, 0.5) ),url("https://pic2.zhimg.com/v2-9dfb9bd28656a13d7d57793c853dfb52_r.jpg")' }}>
+    </div>
+</div>
+}
--- a/components/SideAreaLeft.js
+++ b/components/SideAreaLeft.js
@@ -4,10 +4,11 @@ import MenuButtonGroup from '@/components/MenuButtonGroup'
 import SearchInput from '@/components/SearchInput'
 import Toc from '@/components/Toc'
 import { useGlobal } from '@/lib/global'
-import { faAngleDoubleRight, faChartBar, faThList } from '@fortawesome/free-solid-svg-icons'
+import { faAngleDoubleRight, faThList } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
 import React from 'react'
+import Analytics from './Analytics'

 /**
 * 侧边平铺
@@ -41,17 +42,7 @@ const SideAreaLeft = ({ title, tags, currentTag, post, posts, categories, curren
      </section>

      {/* 统计 */}
-      <section className='hidden lg:block mb-5 bg-white dark:bg-gray-800 rounded-xl hover:shadow-2xl duration-200 py-4 shadow-md'>
-          <div className='px-5 text-sm font-light pb-1 text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faChartBar} className='mr-2' />{locale.COMMON.ANALYTICS}</div>
-          <div className='mt-2 text-center dark:text-gray-300 font-light text-xs'>
-              <span className='px-1 '>
-                  <strong className='font-medium'>{postCount}</strong>{locale.COMMON.POSTS}</span>
-              <span className='px-1 busuanzi_container_site_uv hidden'>
-              | <strong className='pl-1 busuanzi_value_site_uv font-medium'></strong>{locale.COMMON.VISITORS}</span>
-              <span className='px-1 busuanzi_container_site_pv hidden'>
-              | <strong className='pl-1 busuanzi_value_site_pv font-medium'></strong>{locale.COMMON.VIEWS}</span>
-            </div>
-      </section>
+      <Analytics postCount={postCount}/>

      {/* 分类  */}
      {!post && categories && (
--- a/components/SideAreaRight.js
+++ b/components/SideAreaRight.js
@@ -10,7 +10,12 @@ import {
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
 import React from 'react'
+import Analytics from './Analytics'
 import CategoryGroup from './CategoryGroup'
+import InfoCard from './InfoCard'
+import MenuButtonGroup from './MenuButtonGroup'
+import SearchInput from './SearchInput'
+import Toc from './Toc'

 /**
 * 侧边平铺
@@ -32,13 +37,29 @@ const SideAreaRight = ({
  posts,
  categories,
  currentCategory,
-  currentSearch
+  currentSearch,
+  targetRef
 }) => {
  const { locale } = useGlobal()
+  const postCount = posts?.length || 0
+  const showToc = post && post.toc && post.toc.length > 1

  return (
    <>
-      <section className="rounded-xl shadow-md py-4 px-2 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200">
+
+<section className='hidden lg:block mb-5 bg-white dark:bg-gray-800 rounded-xl hover:shadow-2xl duration-200 py-8 shadow-md'>
+        <InfoCard postCount={postCount} />
+      </section>
+
+      {/* 菜单 */}
+      <section className='hidden lg:block mb-5 py-5 rounded-xl shadow-md bg-white dark:bg-gray-800  hover:shadow-2xl duration-200'>
+        <MenuButtonGroup allowCollapse={true} />
+        <div className='px-5 pt-2'>
+           <SearchInput currentTag={currentTag} currentSearch={currentSearch} />
+        </div>
+      </section>
+
+      <section className="rounded-xl shadow-md mb-5 py-4 px-2 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200">
        {/* 展示广告  */}
        <ins
          className="adsbygoogle"
@@ -51,10 +72,21 @@ const SideAreaRight = ({
        ></ins>
      </section>

+      <Analytics postCount={postCount}/>
+
      <div className="sticky top-8">
+          {showToc && (
+          <section className='pb-10 mb-5 rounded-xl shadow-md bg-white dark:bg-gray-800 hover:shadow-2xl duration-200'>
+            <div className='border-b text-center text-2xl bg-white text-black rounded-t-xl dark:border-gray-700 dark:bg-gray-700 dark:text-white py-6 px-6'>
+              {locale.COMMON.TABLE_OF_CONTENTS}
+            </div>
+            <Toc toc={post.toc} targetRef={targetRef} />
+          </section>
+          )}
+
        {/* 最新文章 */}
        {posts && (
-          <section className="rounded-xl shadow-md py-4 mt-5 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200">
+          <section className="rounded-xl shadow-md py-4 mb-5 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200">
            <div className="text-sm pb-2 px-5  flex flex-nowrap justify-between">
              <div className="font-light text-gray-600  dark:text-gray-200">
                <FontAwesomeIcon icon={faArchive} className="mr-2" />
@@ -66,9 +98,13 @@ const SideAreaRight = ({
          </section>
        )}

+        {/* <section className="rounded-xl shadow-md py-4 px-5 mb-5 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200">
+          <SearchInput currentTag={currentTag} currentSearch={currentSearch}/>
+        </section> */}
+
        {/* 标签云  */}
        {tags && (
-          <section className="rounded-xl shadow-md py-4 mt-5 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200">
+          <section className="rounded-xl shadow-md py-4 mb-5 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200">
            <div className="text-sm pb-1 px-5 flex flex-nowrap justify-between font-light dark:text-gray-200">
              <div className="text-gray-600 dark:text-gray-200">
                <FontAwesomeIcon icon={faTags} className="mr-2" />
@@ -89,7 +125,7 @@ const SideAreaRight = ({

        {/* 分类  */}
        {post && categories && (
-          <section className='rounded-xl shadow-md py-4 mt-5 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200'>
+          <section className='rounded-xl shadow-md py-4 mb-5 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200'>
            <div className='text-sm px-5 mb-2 flex flex-nowrap justify-between font-light'>
              <div className='pb-1 text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faThList} className='mr-2' />{locale.COMMON.CATEGORY}</div>
              <Link href='/category' passHref>
--- a/components/TopNav.js
+++ b/components/TopNav.js
@@ -9,13 +9,13 @@ const TopNav = ({ tags, currentTag, post, posts, categories, currentCategory })
  const drawer = useRef()
  const { locale } = useGlobal()

-  return (<div id='top-nav' className='block lg:hidden'>
+  return (<div id='top-nav'>
    {/* 侧面抽屉 */}
    <SideBarDrawer post={post} currentTag={currentTag} cRef={drawer} tags={tags} posts={posts} categories={categories} currentCategory={currentCategory}/>

    {/* 导航栏 */}
-    <div id='sticky-nav' className='flex fixed w-full top-0 z-20 transform duration-500 glassmorphism'>
-      <div className='w-full flex justify-between items-center p-4 shadow'>
+    <div id='sticky-nav' className='dark flex fixed md:relative w-full top-0 z-20 transform duration-500'>
+      <div className='w-full flex justify-between items-center p-4 glassmorphism'>
        {/* 左侧LOGO 标题 */}
        <div className='flex flex-none flex-grow-0'>
          <div className='relative w-10' ><Image
@@ -44,7 +44,7 @@ const TopNav = ({ tags, currentTag, post, posts, categories, currentCategory })
            <a>{locale.NAV.ABOUT}</a>
          </Link>
          <div onClick={() => { drawer.current.handleSwitchSideDrawerVisible() }}
-               className='cursor-pointer dark:text-gray-300'>
+               className='cursor-pointer dark:text-gray-300 block md:hidden'>
            {locale.NAV.SEARCH}
          </div>
        </div>
--- a/layouts/BaseLayout.js
+++ b/layouts/BaseLayout.js
@@ -1,14 +1,15 @@
 import CommonHead from '@/components/CommonHead'
 import FloatDarkModeButton from '@/components/FloatDarkModeButton'
 import Footer from '@/components/Footer'
+import Header from '@/components/Header'
 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 throttle from 'lodash.throttle'
+import { useRouter } from 'next/router'
 import PropTypes from 'prop-types'
 import React, { useCallback, useEffect, useRef } from 'react'
 /**
@@ -65,18 +66,20 @@ const BaseLayout = ({
  const { onLoading } = useGlobal()
  const targetRef = useRef(null)

-  return (<div id='wrapper'>
+  return (<div>

      <CommonHead meta={meta} />

      {/* 顶部导航栏 */}
      <TopNav tags={tags} post={post} posts={totalPosts} currentSearch={currentSearch} categories={categories} currentCategory={currentCategory} />

-      <div className='flex justify-center flex-1 mx-auto md:pt-8 pb-12'>
+      {useRouter().asPath === '/' && <Header/>}

-          <div id='left' className='hidden lg:block flex-col w-72'>
+      <div id='wrapper' className='flex justify-center flex-1 mx-auto md:pt-12 pb-12'>
+
+          {/* <div id='left' className='hidden lg:block flex-col w-72'>
            <SideAreaLeft targetRef={targetRef} title={meta.title} post={post} posts={totalPosts} tags={tags} currentSearch={currentSearch} currentTag={currentTag} categories={categories} currentCategory={currentCategory} />
-          </div>
+          </div> */}

          <div id='center' className='flex-grow max-w-4xl min-h-screen md:mx-10' ref={targetRef}>
            {onLoading
@@ -87,7 +90,7 @@ const BaseLayout = ({
            }
          </div>

-          <div id='right' className='hidden 2xl:block flex-col w-72'>
+          <div id='right' className='hidden lg:block flex-col w-72 mr-5'>
            <SideAreaRight post={post} posts={totalPosts} tags={tags} currentSearch={currentSearch} currentTag={currentTag} categories={categories} currentCategory={currentCategory}/>
          </div>

--- a/lib/notion/getAllTags.js
+++ b/lib/notion/getAllTags.js
@@ -6,7 +6,7 @@
 * @param tagOptions tags的下拉选项
 * @returns {Promise<{}|*[]>}
 */
-export async function getAllTags ({ allPosts, sliceCount = 16, tagOptions }) {
+export async function getAllTags ({ allPosts, sliceCount = 12, tagOptions }) {
  if (!allPosts) {
    return []
  }
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
    "react-dom": "17.0.2",
    "react-notion-x": "^4.11.0",
    "smoothscroll-polyfill": "^0.4.4",
+    "typed.js": "^2.0.12",
    "use-ackee": "^3.0.0"
  },
  "devDependencies": {
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -150,13 +150,13 @@ nav {
 }

 .glassmorphism{
-  background: rgba(255, 255, 255, 0.5);
-  -webkit-backdrop-filter: blur(10px);
-  backdrop-filter: blur(10px);
+  background: rgba(255, 255, 255, 0.2);
+  -webkit-backdrop-filter: blur(5px);
+  backdrop-filter: blur(5px);
 }

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