feature:

theme-Next新的样式

README.md

@@ -50,7 +50,7 @@
 - 将 [这个 Notion 模板](https://tanghh.notion.site/02ab3b8678004aa69e9e415905ef32a5) 制作副本，并分享这个页面给所有人
 - [Fork](https://github.com/tangly1024/NotionNext/fork) 这个项目
 - 在 `blog.config.js` 配置相关选项
-- _(可选)_ 用自己的图片替换 `/public` 文件夹里的 `avatar.svg`、`favicon.svg` 和 `favicon.ico`
+- _(可选)_ 用自己的图片替换 `/public` 文件夹里的 `avatar.jpg`、`favicon.svg` 和 `favicon.ico`
 - 在 [Vercel](https://vercel.com) 上部署这个项目, 设定一下环境变量：
   - `NOTION_PAGE_ID`: 你刚刚分享出去的 Notion 页面网址中的页面 ID，通常是网址中工作区地址后的 32 位字符串
   - `NOTION_ACCESS_TOKEN`（可选）: 如果你决定不分享你的数据库，你可以使用 token 来让网页从 Notion 数据库中抓取数据。你可以在你的浏览器 cookies 中找到它，名称是 `token_v2'。

blog.config.js

@@ -1,6 +1,6 @@
 const BLOG = {
-  title: '塘里博客',
-  author: '塘里1024',
+  title: '小唐笔记',
+  author: 'tangly1024',
   email: 'tlyong1992@hotmail.com',
   link: 'https://tangly1024.com',
   description: '分享编程技术与记录生活',

components/Analytics.js

@@ -10,13 +10,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 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'>
+  return <section className='hidden lg:block mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200 py-4'>
     <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>
+          <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>

components/ArticleDetail.js

@@ -39,7 +39,7 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
   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 ">
           <article itemScope itemType="https://schema.org/Movie"
-            className="rounded-xl 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"
+            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>
                 {post.type && !post.type.includes('Page') && post?.page_cover && (
@@ -154,7 +154,7 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
           </article>
 
           {/* 评论互动 */}
-          <div className="mt-5 lg:px-40 hover:shadow-2xl duration-200 shadow-lg rounded-xl 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 hover:shadow-2xl duration-200 shadow-lg w-screen md:w-full overflow-x-auto dark:border-gray-700 bg-white dark:bg-gray-700">
             <Comment frontMatter={post} />
           </div>
       </div>

components/BlogAround.js

@@ -13,12 +13,12 @@ export default function BlogAround ({ prev, next }) {
   }
   return <section className='text-gray-800 border-t dark:text-gray-300 flex flex-wrap lg:flex-nowrap lg:space-x-10 justify-between py-2'>
     <Link href={`/article/${prev.slug}`} passHref>
-      <a className='text-sm py-3 text-blue-500 hover:underline cursor-pointer'>
+      <a className='text-sm py-3 text-gray-400 hover:underline cursor-pointer'>
         <FontAwesomeIcon icon={faAngleDoubleLeft} className='mr-1' />{prev.title}
       </a>
     </Link>
     <Link href={`/article/${next.slug}`} passHref>
-      <a className='text-sm flex py-3 text-blue-500 hover:underline cursor-pointer'>{next.title}
+      <a className='text-sm flex py-3 text-gray-400 hover:underline cursor-pointer'>{next.title}
         <FontAwesomeIcon icon={faAngleDoubleRight} className='ml-1 my-1' />
       </a>
     </Link>

components/BlogPostArchive.js

@@ -14,13 +14,13 @@ const BlogPostArchive = ({ posts = [], archiveTitle }) => {
     return <></>
   } else {
     return <div ref={targetRef}>
-      <div className='pt-16 pb-4 text-3xl dark:text-white' id={archiveTitle}>{archiveTitle}</div>
+      <div className='pt-16 pb-4 text-3xl dark:text-gray-300' id={archiveTitle}>{archiveTitle}</div>
       <ul>
         {posts.map(post => (
-          <li key={post.id} className='border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-blue-500 transform duration-500'>
+          <li key={post.id} className='border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500'>
             <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>
-                <a className='dark:text-blue-400 overflow-x-hidden hover:underline cursor-pointer text-blue-600'>{post.title}</a>
+                <a className='dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600'>{post.title}</a>
               </Link>
             </div>
           </li>

components/BlogPostCard.js

@@ -8,7 +8,7 @@ import TagItemMini from './TagItemMini'
 
 const BlogPostCard = ({ post, tags }) => {
   return (
-    <div key={post.id} className='flex xl:flex-row flex-col-reverse justify-between md:hover:shadow-2xl md:shadow-md duration-300 md:rounded-xl
+    <div key={post.id} className='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'>
 
       <div className='p-8 flex flex-col justify-between w-full'>
@@ -18,7 +18,7 @@ const BlogPostCard = ({ post, tags }) => {
           </a>
         </Link>
 
-        <p className='my-4 text-gray-800 dark:text-gray-300 text-md font-light'>{post.summary}</p>
+        <p className='my-8 text-gray-700 dark:text-gray-300 text-md font-light leading-7 italic'>{post.summary}</p>
 
         <div className='flex items-center justify-between flex-wrap dark:text-gray-500 text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 '>
           <div>
@@ -41,8 +41,8 @@ const BlogPostCard = ({ post, tags }) => {
 
       {post?.page_cover && (
         <Link href={`${BLOG.path}/article/${post.slug}`} passHref>
-        <div className='h-60 w-full xl:max-w-xs relative md:rounded-t-xl xl:rounded-t-none xl:rounded-r-xl xl:h-full duration-200 cursor-pointer transform overflow-hidden'>
-          <Image className='hover:scale-105 transform duration-500 md:rounded-t-xl xl:rounded-t-none xl:rounded-r-xl' src={post?.page_cover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' />
+        <div className='h-60 w-full xl:max-w-xs relative xl:h-full duration-200 cursor-pointer transform overflow-hidden'>
+          <Image className='hover:scale-105 transform duration-500' src={post?.page_cover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' />
         </div>
       </Link>
       )}

components/CategoryGroup.js

@@ -10,9 +10,9 @@ const CategoryGroup = ({ currentCategory, categories }) => {
         const selected = currentCategory === category
         return <Link key={category} href={`/category/${category}`} passHref>
           <a className={(selected
-            ? 'hover:text-white dark:hover:text-white bg-blue-600 text-white '
-            : 'dark:text-gray-400 text-gray-500 hover:text-blue-500 dark:hover:text-blue-400') +
-            '  rounded-xl text-md w-full items-center duration-300  hover:underline px-3 mx-2 cursor-pointer py-2 font-light'}>
+            ? 'hover:text-white dark:hover:text-white bg-gray-600 text-white '
+            : 'dark:text-gray-400 text-gray-500 hover:text-white hover:bg-gray-500 dark:hover:text-white') +
+            '  text-sm w-full items-center duration-300 px-3 mx-2 cursor-pointer py-1 font-light'}>
             <FontAwesomeIcon icon={selected ? faFolderOpen : faFolder} className={`${selected ? 'text-white' : 'text-gray-400'} mr-2`} />{category}({categories[category]})
             </a>
         </Link>

components/CategoryList.js

@@ -19,7 +19,7 @@ const CategoryList = ({ currentCategory, categories }) => {
           <li
             className={`cursor-pointer border rounded-xl duration-200 mr-1 my-1 px-2 py-1 font-light text-sm whitespace-nowrap dark:text-gray-300 
                  ${selected
-                ? 'text-white bg-black dark:hover:bg-gray-900 dark:bg-black dark:border-gray-800'
+                ? 'text-white bg-gray-500 dark:hover:bg-gray-900 dark:bg-gray-500 dark:border-gray-800'
                 : 'bg-gray-100 text-gray-600 hover:bg-gray-300 dark:hover:bg-gray-700 dark:bg-gray-600 dark:border-gray-600'
               }`}
           >

components/Header.js

@@ -89,15 +89,15 @@ export default function Header () {
   return (
     <header
       id="header"
-      className="duration-500 w-full bg-cover bg-center md:-mt-14"
+      className="duration-500 w-full bg-cover bg-center md:-mt-14 bg-black"
       style={{
         height: 'calc(100vh + 1px)',
         backgroundImage:
           'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0,0,0,0.4), rgba(0, 0, 0, 0.5) ),url("./bg_image.jpg")'
       }}
     >
       <div className="absolute z-10 flex h-full items-center -mt-14 justify-center w-full text-4xl md:text-7xl text-white">
-        <div id="typed" className="flex text-center font-serif"></div>
+        <div id='typed' className='flex text-center font-serif'/>
       </div>
       <div
         onClick={() => {

components/InfoCard.js

@@ -6,17 +6,17 @@ import React from 'react'
 const InfoCard = ({ postCount }) => {
   return <>
     <div className='flex flex-col items-center justify-center cursor-pointer' onClick={ () => { Router.push('/') }}>
-        <div className='hover:rotate-45 hover:scale-125 transform duration-200 mx-auto'>
+        <div className='hover:rotate-45 hover:scale-125 transform duration-200'>
           <Image
           alt={BLOG.title}
           width={120}
           height={120}
           loading='lazy'
-          src='/avatar.svg'
+          src='/avatar.jpg'
           className='rounded-full border-black'
         />
         </div>
-        <div className='text-3xl font-serif dark:text-white mx-auto py-4 hover:scale-105 transform duration-200'>{BLOG.title}</div>
+        <div className='text-3xl font-serif dark:text-white py-2 hover:scale-105 transform duration-200'>{BLOG.title}</div>
     </div>
   </>
 }

components/LatestPostsGroup.js

@@ -32,9 +32,9 @@ const LatestPostsGroup = ({ posts, sliceCount = 5 }) => {
         const selected = currentPath === `${BLOG.path}/article/${post.slug}`
         return (
           <Link key={post.id} title={post.title} href={`${BLOG.path}/article/${post.slug}`} passHref>
-            <a className={(selected ? 'text-white  bg-blue-600 ' : 'text-gray-500 dark:text-gray-300 ') + ' my-1 px-5 flex font-light justify-between'}>
-              <div className={ 'text-xs py-1.5 flex overflow-x-hidden whitespace-nowrap overflow-hidden ' +
-                'hover:text-blue-500 dark:hover:text-blue-400 cursor-pointer hover:underline truncate' }>
+            <a className={ 'my-1 px-2 flex font-light'}>
+              <div className={ (selected ? 'text-white  bg-gray-600 ' : 'text-gray-500 dark:text-gray-400 ') + 'text-xs py-1.5 flex overflow-x-hidden whitespace-nowrap hover:bg-gray-500 px-3 w-full ' +
+                'hover:text-white dark:hover:text-white cursor-pointer truncate' }>
                 <FontAwesomeIcon icon={faFileAlt} className='mr-2'/>
                 {post.title}
               </div>

components/MenuButtonGroup.js

@@ -28,8 +28,8 @@ const MenuButtonGroup = ({ allowCollapse = false }) => {
         if (link.show) {
           const selected = (router.pathname === link.to) || (router.asPath === link.to)
           return <Link key={link.id + link.icon} title={link.to} href={link.to} >
-            <a className={'py-1 my-1 px-5 mx-2 rounded-xl hover:bg-blue-500 hover:text-white hover:shadow-lg cursor-pointer duration-100 font-light flex flex-nowrap items-center ' +
-              (selected ? 'bg-blue-600 text-white ' : ' ')} >
+            <a className={'py-1 my-1 px-5 mx-2 duration-300 text-base hover:bg-gray-500 hover:text-white hover:shadow-lg cursor-pointer duration-100 font-light flex flex-nowrap items-center ' +
+              (selected ? 'bg-gray-600 text-white ' : ' ')} >
               <div className='my-auto justify-center flex '>
                 <FontAwesomeIcon icon={link.icon} />
               </div>

components/NavBar.js

@@ -89,7 +89,7 @@ const Header = ({ navBarTitle, fullWidth = true }) => {
               alt={BLOG.title}
               width={28}
               height={28}
-              src='/avatar.svg'
+              src='/avatar.jpg'
               className='rounded-full'
             />
             <div

components/Progress.js

@@ -23,9 +23,9 @@ const Progress = ({ targetRef }) => {
     return () => document.removeEventListener('scroll', scrollListener)
   }, [percent])
 
-  return (<div className='h-4 w-full shadow-2xl bg-blue-400'>
-        <div className='text-center w-full absolute text-white text-xs'>{percent}%</div>
-        <div className='h-4 bg-blue-600 duration-200 rounded-r' style={{ width: `${percent}%` }}/>
+  return (<div className='h-4 w-full shadow-2xl bg-gray-400'>
+
+    <div className='h-4 bg-gray-600 duration-200' style={{ width: `${percent}%` }}><div className='text-right text-white text-xs'>{percent}%</div></div>
       </div>)
 }
 

components/SearchInput.js

@@ -42,7 +42,7 @@ const SearchInput = ({ currentTag, currentSearch }) => {
       ref={searchInputRef}
       type='text'
       placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
-      className={'w-full pl-2 transition focus:shadow-lg font-light leading-10 border-gray-300 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
+      className={'w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 border-gray-300 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
       onKeyUp={handleKeyUp}
       onChange={e => updateSearchKey(e.target.value)}
       defaultValue={currentSearch}

components/SideAreaLeft.js

@@ -1,12 +1,8 @@
-import CategoryGroup from '@/components/CategoryGroup'
 import InfoCard from '@/components/InfoCard'
 import MenuButtonGroup from '@/components/MenuButtonGroup'
 import SearchInput from '@/components/SearchInput'
 import Toc from '@/components/Toc'
 import { useGlobal } from '@/lib/global'
-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'
 
@@ -28,13 +24,13 @@ const SideAreaLeft = ({ title, tags, currentTag, post, posts, categories, curren
   const postCount = posts?.length || 0
   return <>
 
-    <div className={(!post ? 'sticky top-8 ' : ' ') + ' w-72'}>
-      <section className='hidden lg:block mb-5 bg-white dark:bg-gray-800 rounded-xl hover:shadow-2xl duration-200 py-8 shadow-md'>
+    <div className={(!post ? 'sticky top-8 ' : ' ') + ' w-60'}>
+      <section className='hidden lg:block mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200 py-6'>
         <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'>
+      <section className='hidden lg:block mb-5 py-4  bg-white dark:bg-gray-800  hover:shadow-xl duration-200'>
         <MenuButtonGroup allowCollapse={true} />
         <div className='px-5 pt-2'>
            <SearchInput currentTag={currentTag} currentSearch={currentSearch} />
@@ -45,24 +41,24 @@ const SideAreaLeft = ({ title, tags, currentTag, post, posts, categories, curren
       <Analytics postCount={postCount}/>
 
       {/* 分类  */}
-      {!post && categories && (
-        <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 className='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>
-          </div>
-          <CategoryGroup currentCategory={currentCategory} categories={categories} />
-        </section>
-      )}
+      {/* { categories && ( */}
+      {/*  <section className='  py-4 mb-5 bg-white dark:bg-gray-800 hover:shadow-xl 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 className='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> */}
+      {/*    </div> */}
+      {/*    <CategoryGroup currentCategory={currentCategory} categories={categories} /> */}
+      {/*  </section> */}
+      {/* )} */}
     </div>
 
     {showToc && (
-      <section className='sticky top-8 pb-20 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'>
+      <section className='sticky top-8 pb-20  bg-white dark:bg-gray-800 hover:shadow-xl duration-200'>
+        <div className='border-b text-center text-2xl bg-white text-black 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} />