样式微调、加入背景色，加入Tidio在线聊天

README.md

@@ -63,13 +63,14 @@
     - Notion token 的有效期只有 180 天，请确保在 Vercel Dashboard 上手动更新，我们可能会在未来切换到官方 API 来解决这个问题。此外，如果数据库是非公开到，Notion 中的图片可能无法正常显示到网页上。
 - **稍微等等就可以访问了！** 简单吗?
 
-## 技术细节
+## 引用技术
 
 - **生成**: Next.js SSG 和 Incremental Static Regeneration
 - **页面渲染**: [React-notion-x](https://github.com/NotionX/react-notion-x)
 - **样式**: Tailwind CSS 和 `@tailwindcss/jit` compiler
 - **评论**: Gitalk,Cusdis,Utterances
 - **图标**：[fontawesome](https://fontawesome.com/v4.7/icons/?d=gallery)
+- **背景**: 动态几何线条[react-canvas-nest](https://github.com/flyerH/react-canvas-nest)
 
 ## 页面样式主题
 - 仿照 [fukasawa](https://andersnoren.se/themes/fukasawa)

blog.config.js

@@ -1,9 +1,9 @@
 const BLOG = {
-  title: '1024技术分享',
-  author: 'tangly1024',
+  title: '唐里1024',
+  author: '唐哼哼',
   email: 'tlyong1992@hotmail.com',
   link: 'https://tangly1024.com',
-  description: '分享有趣的技术',
+  description: '分享有趣的技术与思考',
   lang: 'zh-CN', // ['zh-CN','en-US']
   notionPageId: process.env.NOTION_PAGE_ID || 'bee1fccfa3bd47a1a7be83cc71372d83', // Important page_id！！！
   notionAccessToken: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public
@@ -59,7 +59,8 @@ const BLOG = {
   },
   isProd: process.env.VERCEL_ENV === 'production', // distinguish between development and production environment (ref: https://vercel.com/docs/environment-variables#system-environment-variables)
   googleAdsenseId: 'ca-pub-2708419466378217',
-  DaoVoiceId: '' // 在线聊天 DaoVoice http://dashboard.daovoice.io/get-started
+  DaoVoiceId: '', // 在线聊天 DaoVoice http://dashboard.daovoice.io/get-started
+  TidioId: '8lgekxyr9hr9m7archbs0a4a2gu9ckbg' // 在线聊天 https://www.tidio.com/
 }
 // export default BLOG
 module.exports = BLOG

components/Drawer.js

@@ -63,7 +63,7 @@ const Drawer = ({ post, currentTag, cRef, tags }) => {
       </div>
     </div>
     {/* 背景蒙版 */}
-    <div className={(showDrawer ? 'block' : 'hidden') + ' fixed top-0 left-0 z-30 w-full h-full bg-black bg-opacity-50'}
+    <div id='drawer-background' className={(showDrawer ? 'block' : 'hidden') + ' fixed top-0 left-0 z-30 w-full h-full bg-black bg-opacity-50'}
          onClick={handleMenuClick} />
   </>
 }

components/DrawerRight.js

@@ -44,7 +44,7 @@ const DrawerRight = ({ post, cRef }) => {
       </div>
     </div>
     {/* 背景蒙版 */}
-    <div className={(showDrawer ? 'block' : 'hidden') + ' fixed top-0 left-0 z-30 w-full h-full bg-black bg-opacity-50'}
+    <div id='right-drawer-background' className={(showDrawer ? 'block' : 'hidden') + ' fixed top-0 left-0 z-30 w-full h-full bg-black bg-opacity-50'}
          onClick={handleMenuClick} />
   </div>
 }

components/JumpToTop.js

@@ -20,7 +20,6 @@ const JumpToTop = ({ targetRef, showPercent = true }) => {
     const scrollY = window.pageYOffset
     const fullHeight = clientHeight - window.outerHeight
     const shouldShow = scrollY > 100
-    console.log(clientHeight, scrollY, fullHeight, shouldShow)
     if (shouldShow !== show) {
       switchShow(shouldShow)
     }
@@ -38,8 +37,8 @@ const JumpToTop = ({ targetRef, showPercent = true }) => {
       <div className='flex-wrap transform hover:scale-125 duration-200 '>
         <div
           onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
-          style={{ backgroundColor: 'rgb(56, 144, 255)' }}
-          className={(show ? 'animate__fadeInUp' : 'animate__fadeOutUp') + ' p-1 cursor-pointer rounded-full animate__animated animate__faster shadow-xl'}>
+          style={{ 'box-shadow': 'rgba(41, 50, 60, 0.5) 0px 2px 16px' }}
+          className={(show ? 'animate__fadeInUp' : 'animate__fadeOutUp') + ' bg-gray-800 p-2 cursor-pointer rounded-full animate__animated animate__faster shadow-2xl'}>
           <div className='text-center'>
             <div className='w-10 text-xl text-gray-100' title={locale.POST.TOP} ><i className='fa fa-arrow-up'/> </div>
             {showPercent && (<div className='w-10 text-xs text-gray-100 dark:text-gray-200 text-center'>{percent}%</div>)}

components/Logo.js

@@ -4,8 +4,10 @@ import React from 'react'
 
 const Logo = () => {
   return <Link href='/'>
-      <div className='mx-auto text-center cursor-pointer text-3xl dark:bg-gray-900 dark:text-gray-300 font-semibold dark:hover:bg-gray-600 bg-gray-700 text-white p-2 hover:scale-105 hover:shadow-2xl duration-200 transform'>{BLOG.title}</div>
-
+      <div title={BLOG.title} className='mx-auto border text-center cursor-pointer text-xl  dark:text-gray-300 font-semibold dark:hover:bg-gray-600 text-white p-2 hover:scale-105 hover:shadow-2xl duration-200 transform'>
+        <span className='text-red-600'>Tangly</span>
+        <span className='text-blue-400'>1024</span>
+      </div>
      {/* <div className='transform hover:scale-110 duration-200 cursor-pointer'><img src='http://to-a.ru/DmOleR/img1' width={100} alt={BLOG.title} /></div> */}
 
   </Link>

components/ThirdPartyScript.js

@@ -25,6 +25,14 @@ const ThirdPartyScript = () => {
       }}
       />
     </>)}
+
+    {BLOG.TidioId && (<>
+      {/* Tidio在线反馈 */}
+      <script async
+              src={`//code.tidio.co/${BLOG.TidioId}.js`}
+      />
+    </>)}
+
     {/* 代码统计 */}
     {BLOG.isProd && (<>
         {/* GoogleAdsense */}

layouts/BaseLayout.js

@@ -8,6 +8,7 @@ import TopNav from '@/components/TopNav'
 import Footer from '@/components/Footer'
 import SideBar from '@/components/SideBar'
 import JumpToTop from '@/components/JumpToTop'
+import ReactCanvasNest from 'react-canvas-nest'
 
 const BaseLayout = ({ children, layout, fullWidth, tags, meta, post, ...customMeta }) => {
   let windowTop = 0
@@ -36,15 +37,16 @@ const BaseLayout = ({ children, layout, fullWidth, tags, meta, post, ...customMe
   return (
     <div id='wrapper' className={[BLOG.font, theme].join(' ')}>
       <CommonHead meta={meta} />
+       <ReactCanvasNest style = {{ zIndex: 0, position: 'fixed' }} />
 
       <TopNav tags={tags} post={post} />
       {/* Middle Wrapper */}
       <main className='flex bg-gray-100'>
         <SideBar tags={tags} post={post} />
         <div className='flex flex-grow' ref={targetRef}>
-          {children}
-          <JumpToTop targetRef={targetRef} showPercent={true} />
+            {children}
         </div>
+        <JumpToTop targetRef={targetRef} showPercent={true} />
       </main>
 
       <Footer />

package.json

@@ -34,6 +34,7 @@
     "preact": "^10.5.13",
     "qrcode.react": "^1.0.1",
     "react": "17.0.2",
+    "react-canvas-nest": "^1.1.1",
     "react-cusdis": "^2.0.1",
     "react-dom": "17.0.2",
     "react-notion-x": "^4.6.5",

pages/article/[slug].js

@@ -38,7 +38,7 @@ const BlogPost = ({ post, blockMap, tags, prev, next }) => {
     <div id='article-wrapper' ref={targetRef} className='flex-grow bg-gray-100 dark:bg-gray-800'>
       {/* 中央区域 wrapper */}
       <header
-        className='hover:scale-105 hover:shadow-2xl duration-200 transform mx-auto max-w-5xl mt-16 lg:mt-20 md:flex-shrink-0 animate__fadeIn animate__animated'>
+        className='hover:shadow-2xl duration-200 mx-auto max-w-5xl mt-16 lg:mt-20 md:flex-shrink-0 animate__fadeIn animate__animated'>
         {/* 封面图 */}
         {post.page_cover && post.page_cover.length > 1 && (
           <img className='bg-center object-cover w-full' style={{ maxHeight: '40rem' }}
@@ -153,7 +153,6 @@ const BlogPost = ({ post, blockMap, tags, prev, next }) => {
       </section>
     </aside>
 
-    {/* 右下角悬浮菜单 */}
   </BaseLayout>
 }