文章预览优化

components/BlogPostCard.js

@@ -1,12 +1,12 @@
 import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
+import { faAngleRight, faFolder } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import Image from 'next/image'
 import Link from 'next/link'
 import React from 'react'
-import Image from 'next/image'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faAngleDoubleRight, faFolder } from '@fortawesome/free-solid-svg-icons'
-import TagItemMini from './TagItemMini'
 import { Code, Collection, CollectionRow, Equation, NotionRenderer } from 'react-notion-x'
-import { useGlobal } from '@/lib/global'
+import TagItemMini from './TagItemMini'
 
 const BlogPostCard = ({ post, showSummary }) => {
   const { locale } = useGlobal()
@@ -17,7 +17,7 @@ const BlogPostCard = ({ post, showSummary }) => {
 
       <div className='lg:p-8 p-4 flex flex-col w-full'>
         <Link href={`${BLOG.path}/article/${post.slug}`} passHref>
-          <a className={`cursor-pointer font-bold text-3xl flex ${showPreview ? 'justify-center' : 'justify-start'} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
+          <a className={`cursor-pointer font-bold hover:underline text-3xl flex ${showPreview ? 'justify-center' : 'justify-start'} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
             {post.title}
           </a>
         </Link>
@@ -43,7 +43,7 @@ const BlogPostCard = ({ post, showSummary }) => {
           {post.summary}
         </p>}
 
-        {showPreview && post?.blockMap && <div className='max-h-screen overflow-ellipsis truncate max-w-full'>
+        {showPreview && post?.blockMap && <div className='overflow-ellipsis truncate'>
           <NotionRenderer
             bodyClassName='max-h-full'
             recordMap={post.blockMap}
@@ -57,12 +57,11 @@ const BlogPostCard = ({ post, showSummary }) => {
           />
         </div> }
 
-        <div className='border-b-2 w-full border-dashed py-2'></div>
-
-        <div className='flex items-center  pt-6 justify-end leading-tight'>
+        <div className='flex-col items-center justify-center article-cover'>
           <Link href={`${BLOG.path}/article/${post.slug}`} passHref>
-              <a className='bg-black p-2 text-white cursor-pointer'>{locale.COMMON.ARTICLE_DETAIL}
-                <FontAwesomeIcon icon={faAngleDoubleRight} /></a>
+              <a className='hover:bg-opacity-100 hover:scale-105 transform duration-300 rounded-md p-2 text-red-500 cursor-pointer'>
+                {locale.COMMON.ARTICLE_DETAIL}
+                <FontAwesomeIcon className='ml-1' icon={faAngleRight} /></a>
           </Link>
         </div>
       </div>

components/StickyBar.js

@@ -1,3 +1,4 @@
+import BLOG from '@/blog.config'
 import throttle from 'lodash.throttle'
 import { useCallback, useEffect } from 'react'
 
@@ -13,6 +14,9 @@ let windowTop = 0
 const StickyBar = ({ children }) => {
   if (!children) return <></>
   const scrollTrigger = useCallback(throttle(() => {
+    if (BLOG.topNavType === 'normal') {
+      return
+    }
     const scrollS = window.scrollY
     if (scrollS >= windowTop && scrollS > 10) {
       const stickyBar = document.querySelector('#sticky-bar')
@@ -35,7 +39,7 @@ const StickyBar = ({ children }) => {
   }, [])
 
   return (
-    <div id='sticky-bar' className='sticky flex-grow justify-center top-14 md:top-0 duration-500 z-10 pb-16'>
+    <div id='sticky-bar' className='sticky flex-grow justify-center top-0 duration-500 z-10 pb-16'>
       <div className='glassmorphism dark:border-gray-600 px-5 absolute shadow-md border w-full hidden-scroll'>
           <div id='tag-container' className="md:pl-3 overflow-x-auto">
               { children }

lib/notion/getPostBlocks.js

@@ -2,12 +2,12 @@ import BLOG from '@/blog.config'
 import { NotionAPI } from 'notion-client'
 import { getDataFromCache, setDataToCache } from '@/lib/cache/cache_manager'
 
-export async function getPostBlocks (id, from) {
+export async function getPostBlocks (id, from, slice) {
   const cacheKey = 'page_block_' + id
   let pageBlock = await getDataFromCache(cacheKey)
   if (pageBlock) {
     console.log('[请求缓存]:', `from:${from}`, `id:${id}`)
-    return pageBlock
+    return filterPostBlocks(id, pageBlock, slice)
   }
   const authToken = BLOG.notionAccessToken || null
   const api = new NotionAPI({ authToken })
@@ -20,24 +20,57 @@ export async function getPostBlocks (id, from) {
     return null
   }
 
-  // 去掉不用的字段
-  for (const j in pageBlock?.block) {
-    const b = pageBlock?.block[j]
-    if (b) {
-      delete b.role
-      delete b.value?.version
-      delete b.value?.created_time
-      delete b.value?.last_edited_time
-      delete b.value?.created_by_table
-      delete b.value?.created_by_id
-      delete b.value?.last_edited_by_table
-      delete b.value?.last_edited_by_id
-      delete b.value?.space_id
-    }
-  }
-
   if (pageBlock) {
     await setDataToCache(cacheKey, pageBlock)
+    return filterPostBlocks(id, pageBlock, slice)
   }
   return pageBlock
 }
+
+/**
+ *
+ * @param {*} id 页面ID
+ * @param {*} pageBlock 页面元素
+ * @param {*} slice 截取数量
+ * @returns
+ */
+function filterPostBlocks (id, pageBlock, slice) {
+  const clonePageBlock = deepClone(pageBlock)
+  let count = 0
+
+  for (const i in clonePageBlock?.block) {
+    const b = clonePageBlock?.block[i]
+    if (slice && slice > 0 && count > slice) {
+      delete clonePageBlock?.block[i]
+      continue
+    }
+    count++
+    delete b?.role
+    delete b?.value?.version
+    delete b?.value?.created_time
+    delete b?.value?.last_edited_time
+    delete b?.value?.created_by_table
+    delete b?.value?.created_by_id
+    delete b?.value?.last_edited_by_table
+    delete b?.value?.last_edited_by_id
+    delete b?.value?.space_id
+  }
+
+  // 去掉不用的字段
+  if (id === BLOG.notionPageId) {
+    return clonePageBlock
+  }
+  return clonePageBlock
+}
+
+function deepClone (obj) {
+  const newObj = Array.isArray(obj) ? [] : {}
+  if (obj && typeof obj === 'object') {
+    for (const key in obj) {
+      if (Object.prototype.hasOwnProperty.call(obj, key)) {
+        newObj[key] = (obj && typeof obj[key] === 'object') ? deepClone(obj[key]) : obj[key]
+      }
+    }
+  }
+  return newObj
+}

pages/index.js

@@ -28,7 +28,7 @@ export async function getStaticProps () {
     )
     for (const i in postsToShow) {
       const post = postsToShow[i]
-      const blockMap = await getPostBlocks(post.id, 'slug')
+      const blockMap = await getPostBlocks(post.id, 'slug', 12)
       if (blockMap) {
         post.blockMap = blockMap
       }

pages/page/[page].js

@@ -54,7 +54,7 @@ export async function getStaticProps ({ params: { page } }) {
 
   for (const i in postsToShow) {
     const post = postsToShow[i]
-    const blockMap = await getPostBlocks(post.id, 'slug')
+    const blockMap = await getPostBlocks(post.id, 'slug', 12)
     if (blockMap) {
       post.blockMap = blockMap
     }

styles/globals.css

@@ -163,4 +163,29 @@ nav {
 
 .medium-zoom-overlay{
   background: none !important;
+}
+
+.article-cover{
+  -webkit-text-size-adjust: 100%;
+  font-size: 14px;
+  font-family: -apple-system,SF UI Text,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
+  -webkit-font-smoothing: antialiased;
+  color: rgba(0,0,0,.75);
+  font-variant-ligatures: common-ligatures;
+  line-height: 1.625;
+  tab-size: 4;
+  outline: 0;
+  font-weight: normal;
+  -webkit-box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  position: relative;
+  z-index: 998;
+  padding-top: 160px;
+  bottom: -1px;
+  margin-top: -200px;
+  text-align: center;
+  width: 100%;
+  background-image: linear-gradient(-180deg,rgba(255,255,255,0) 0%,#fff 70%);
+  padding-bottom: 34px;
 }