feature:

移动端平滑滚动；顶部菜单微调
2026-05-14 15:09:22 +00:00 · 2021-12-16 13:13:29 +08:00
parent 71cc59f0d1
commit abea65474d
9 changed files with 40 additions and 87 deletions
--- a/components/BlogPostArchive.js
+++ b/components/BlogPostArchive.js
@@ -17,10 +17,10 @@ const BlogPostArchive = ({ posts = [], archiveTitle }) => {
      <div className='pt-16 pb-4 text-3xl dark:text-white' id={archiveTitle}>{archiveTitle}</div>
      <ul>
        {posts.map(post => (
-          <li key={post.id} className='border-l-2 p-1  hover:scale-x-105 hover:border-blue-500 transform duration-500'>
+          <li key={post.id} className='border-l-2 p-1 text-sm hover:scale-x-105 hover:border-blue-500 transform duration-500  overflow-hidden whitespace-nowrap'>
            <div name={post?.date?.start_date}><span className='text-gray-400'>{post.date.start_date}</span> &nbsp;
              <Link href={`${BLOG.path}/article/${post.slug}`} passHref>
-                <span className='dark:text-blue-400 hover:underline cursor-pointer text-blue-600'>{post.title}</span>
+                <a className='dark:text-blue-400 hover:underline cursor-pointer text-blue-600'>{post.title}</a>
              </Link>
            </div>
          </li>
--- a/components/JumpToTopButton.js
+++ b/components/JumpToTopButton.js
@@ -2,6 +2,8 @@ import React, { useEffect, useState } from 'react'
 import { useGlobal } from '@/lib/global'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faArrowUp } from '@fortawesome/free-solid-svg-icons'
+import smoothscroll from 'smoothscroll-polyfill'
+
 let windowTop = 0

 /**
@@ -32,6 +34,7 @@ const JumpToTopButton = ({ targetRef, showPercent = true }) => {
    changePercent(per)
  }
  useEffect(() => {
+    smoothscroll.polyfill()
    document.addEventListener('scroll', scrollListener)
    return () => document.removeEventListener('scroll', scrollListener)
  }, [show])
--- a/components/TopNav.js
+++ b/components/TopNav.js
@@ -17,32 +17,32 @@ const TopNav = ({ tags, currentTag, post, posts, currentSearch, categories, curr

    {/* 导航栏 */}
    <div id='sticky-nav' className='fixed w-full top-0 z-20 transform duration-500 glassmorphism'>
-      <div className='w-full flex justify-between items-center p-4 shadow-xl'>
+      <div className='w-full flex justify-between items-center p-4 shadow-lg'>
        {/* 左侧LOGO */}
        <div className='flex'>
-          <div className='relative w-12' ><Image
+          <div className='relative w-10' ><Image
            alt={BLOG.title}
            layout='fill'
            loading='lazy'
            src='/avatar.svg'
-            className='rounded-full border-black'
+            className='border-black'
          /></div>
          <Link href='/' passHref>
            <a>
-             <h1 className='cursor-pointer ml-1 leading-7 text-xl hover:scale-105 duration-200 transform font-serif dark:text-gray-200 whitespace-nowrap overflow-x-hidden'>{BLOG.title }</h1>
+             <h1 className='cursor-pointer ml-2 text-xl hover:scale-105 duration-200 transform font-serif dark:text-gray-200 whitespace-nowrap overflow-x-hidden'>{BLOG.title }</h1>
            </a>
          </Link>
        </div>

        {/* 右侧功能 */}
-        <div className='mr-2 flex justify-end items-center text-sm flex-nowrap space-x-4 font-serif dark:text-gray-200'>
+        <div className='mr-1 flex justify-end items-center text-sm flex-nowrap space-x-4 font-serif dark:text-gray-200'>
        <Link href='/'>
            <a>{locale.NAV.INDEX}</a>
          </Link>
          <Link href='/archive'>
            <a>{locale.NAV.ARCHIVE}</a>
          </Link>
-          <Link href='/article/about'>
+          <Link href='/about'>
            <a>{locale.NAV.ABOUT}</a>
          </Link>
          <div onClick={() => { drawer.current.handleSwitchSideDrawerVisible() }}
--- a/layouts/BaseLayout.js
+++ b/layouts/BaseLayout.js
@@ -7,9 +7,7 @@ import Footer from '@/components/Footer'
 import SideBar from '@/components/SideBar'
 import JumpToTopButton from '@/components/JumpToTopButton'
 import { useGlobal } from '@/lib/global'
-import DarkModeButton from '@/components/DarkModeButton'
 import LoadingCover from '@/components/LoadingCover'
-import LeftFloatButton from '@/components/LeftFloatButton'
 import FloatDarkModeButton from '@/components/FloatDarkModeButton'

 /**
@@ -81,7 +79,7 @@ const BaseLayout = ({
        <div className='flex flex-grow min-h-screen' ref={targetRef}>
          {onLoading
            ? <LoadingCover/>
-            : <div className='flex-grow bg-gray-100 dark:bg-black shadow-inner'>
+            : <div className='flex-grow bg-gray-100 dark:bg-gray-900 shadow-inner'>
              {children}
            </div>
          }
--- a/package.json
+++ b/package.json
@@ -36,13 +36,14 @@
    "next": "^12.0.5",
    "notion-client": "^4.10.0",
    "notion-utils": "^4.10.0",
-    "react-notion-x": "^4.11.0",
    "preact": "^10.5.15",
+    "qrcode.react": "^1.0.1",
    "react": "17.0.2",
    "react-cookies": "^0.1.1",
    "react-cusdis": "^2.0.1",
    "react-dom": "17.0.2",
-    "qrcode.react": "^1.0.1",
+    "react-notion-x": "^4.11.0",
+    "smoothscroll-polyfill": "^0.4.4",
    "use-ackee": "^3.0.0"
  },
  "devDependencies": {
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -7,7 +7,6 @@ import 'katex/dist/katex.min.css'
 import BLOG from 'blog.config'
 import dynamic from 'next/dynamic'
 import { GlobalContextProvider } from '@/lib/global'
-// 解决React-FontAwesome图标问题
 import { config } from '@fortawesome/fontawesome-svg-core'
 import '@fortawesome/fontawesome-svg-core/styles.css'
 config.autoAddCss = false
--- a/pages/archive/index.js
+++ b/pages/archive/index.js
@@ -3,7 +3,7 @@ import BLOG from '@/blog.config'
 import BaseLayout from '@/layouts/BaseLayout'
 import { getNotionPageData } from '@/lib/notion/getNotionData'
 import StickyBar from '@/components/StickyBar'
-import React from 'react'
+import React, { useEffect } from 'react'
 import { useGlobal } from '@/lib/global'
 import BlogPostArchive from '@/components/BlogPostArchive'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -55,6 +55,22 @@ const Index = ({ allPosts, tags, categories }) => {
    }
  })

+  useEffect(
+    () => {
+      if (window) {
+        const anchor = window.location.hash
+        console.log('滚动', anchor)
+        if (anchor) {
+          setTimeout(() => {
+            const anchorElement = document.getElementById(anchor.substring(1))
+            if (anchorElement) { anchorElement.scrollIntoView({ block: 'start', behavior: 'smooth' }) }
+          }, 300)
+        }
+      }
+    },
+    []
+  )
+
  return (
    <BaseLayout meta={meta} tags={tags} categories={categories}>
      <div className=' pt-16 '>
--- a/pages/article/[slug].js
+++ b/pages/article/[slug].js
@@ -30,10 +30,7 @@ const Slug = ({ post, blockMap, tags, prev, next, allPosts, recommendPosts, cate
 }

 export async function getStaticPaths () {
-  const posts = []
-  // if (BLOG.isProd) {
-  //   posts = await getAllPosts({ from: 'slug - paths', includePage: true })
-  // }
+  const posts = await getAllPosts({ from: 'slug - paths', includePage: true })
  return {
    paths: posts.map(row => `${BLOG.path}/article/${row.slug}`),
    fallback: true
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -1,71 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
-<url><loc>https://tangly1024.com</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/archive</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/category</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/feed</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/search</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/tag</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/notion-next</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/nextjs-notion-starter-kit</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/notion-nobelium-vercel</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/fruition-notion</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/vercel</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/nextjs-react-fontawesome-big-icon</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/vercel-free-serverless-api</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/pay-cuts-for-civil-servants</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/notion-short-key</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/notion</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/mac-big-sur-cvs</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/start-a-business</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/a-routine-for-programmer</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/visual-studio-code-format-es-lint</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/window-clean-c</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/parallels-desktop16-macos-update-big-sur</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/guide-of-investment</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/nextjs-cookie-localStorage-darkMode</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/about-tailwindcss</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/what-is-mvp</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/tell-a-story</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/who-is-the-ghost</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/text-affects-mood</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/start-to-write</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/the-skill-of-article-title</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/how-to-read</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/ishot-screenshot</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/compressive-ability</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/learning-python-install</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/learning-python-web-crawler</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/learning-python-text-to-image</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/learning-python-video-to-text</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/nodejs-debug</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/spread-blog-by-seo</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/activation-code</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.501Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/breakfast</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.502Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/improve-the-physique</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.502Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/charlie-thomas-munger</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.502Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/welcome-to-fuzhou</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.502Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/PhD-thief</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.502Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/fart-hitler</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.502Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/why-to-write</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.502Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/start-to-praise</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.502Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/compare-build-happiness</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.502Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/git-ssl-error</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.502Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/chronic-gastritis</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.502Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/position-management</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.502Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/attempt-of-make-money</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.502Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/about</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.502Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/watermelon-saler</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.502Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/hao-huan-luo</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.502Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/playground</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.502Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/the-psychology-of-human-misjudgement</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.502Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/privacy-policy</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.502Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/hexo-install-butterfly</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.502Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/hexo-install-indigo</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.502Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/flow-pool</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.502Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/detail-marketing</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.502Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/mac-os-printer-full-paper</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.502Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/poor-economics</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.502Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/meta-universe-scam</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.502Z</lastmod></url>
-<url><loc>https://tangly1024.com/article/thinking-fast-and-slow</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-15T04:35:15.502Z</lastmod></url>
+<url><loc>https://tangly1024.com</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-16T03:34:52.290Z</lastmod></url>
+<url><loc>https://tangly1024.com/about</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-16T03:34:52.290Z</lastmod></url>
+<url><loc>https://tangly1024.com/archive</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-16T03:34:52.290Z</lastmod></url>
+<url><loc>https://tangly1024.com/category</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-16T03:34:52.290Z</lastmod></url>
+<url><loc>https://tangly1024.com/feed</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-16T03:34:52.290Z</lastmod></url>
+<url><loc>https://tangly1024.com/search</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-16T03:34:52.290Z</lastmod></url>
+<url><loc>https://tangly1024.com/tag</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2021-12-16T03:34:52.290Z</lastmod></url>
 </urlset>