文章推荐功能

components/BlogPostListScroll.js

@@ -74,7 +74,7 @@ const BlogPostListScroll = ({ posts = [], tags, currentSearch, currentCategory,
       {/* 文章列表 */}
         <div className='grid 3xl:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-5'>
           {postsToShow.map(post => (
-            <BlogPostCard key={post.id} post={post} tags={tags} />
+            <BlogPostCard key={post.id} post={post} />
           ))}
         </div>
 

components/PostsCategories.js

@@ -11,7 +11,7 @@ const PostsCategories = ({ currentCategory, categories }) => {
       <div id='category-list' className='duration-500 dark:border-gray-600 dark:bg-gray-800 w-66'>
         {Object.keys(categories).map(category => {
           return <Link key={category} href={`/category/${category}`}>
-            <div className={(currentCategory === category ? 'bg-gray-200 dark:bg-black' : '') + ' dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}><i className='fa fa-folder-open-o mr-4'/>{category} {categories[category]}</div>
+            <div className={(currentCategory === category ? 'bg-gray-200 dark:bg-black' : '') + ' dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}><i className='fa fa-folder-open-o mr-4'/>{category}({categories[category]})</div>
           </Link>
         })}
       </div>

components/RecommendPosts.js

@@ -0,0 +1,47 @@
+import React from 'react'
+import Link from 'next/link'
+
+/**
+ * 洗牌乱序：从数组的最后位置开始，从前面随机一个位置，对两个数进行交换，直到循环完毕
+ * @param arr
+ * @returns {*}
+ */
+function shuffleSort (arr) {
+  let i = arr.length - 1
+  while (i > 0) {
+    const rIndex = Math.floor(Math.random() * i)
+    const temp = arr[rIndex]
+    arr[rIndex] = arr[i]
+    arr[i] = temp
+    i--
+  }
+  return arr
+}
+
+const RecommendPosts = ({ currentPost, totalPosts }) => {
+  let filteredPosts = totalPosts
+  const currentTag = currentPost.tags[0]
+
+  // 筛选同标签
+  if (currentPost.tags && currentPost.tags.length) {
+    filteredPosts = totalPosts.filter(
+      post => post && post.tags && post.tags.includes(currentTag) && post.slug !== currentPost.slug
+    )
+  }
+  shuffleSort(filteredPosts)
+
+  // 筛选前5个
+  if (filteredPosts.length > 5) {
+    filteredPosts = filteredPosts.slice(0, 5)
+  }
+
+  return <div className='dark:text-gray-300'>
+    <h2 className='text-3xl mb-2'>推荐文章</h2>
+    <ul className='list-disc px-5'>
+      {filteredPosts.map(post => (
+        <li key={post.id} ><Link href={`/article/${post.slug}`}><div className='hover:underline cursor-pointer py-1'>{post.title}</div></Link></li>
+      ))}
+    </ul>
+  </div>
+}
+export default RecommendPosts

pages/article/[slug].js

@@ -22,6 +22,7 @@ import 'prismjs/components/prism-markup'
 import 'prismjs/components/prism-python'
 import 'prismjs/components/prism-javascript'
 import 'prismjs/components/prism-typescript'
+import RecommendPosts from '@/components/RecommendPosts'
 
 const mapPageUrl = id => {
   return 'https://www.notion.so/' + id.replace(/-/g, '')
@@ -105,9 +106,12 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
           )}
         </div>
 
-        <hr/>
-        <div className='flex text-2xl justify-center py-5 dark:text-gray-200'>
-          - 💖 本 文 结 束 😚 感 谢 您 的 阅 读 💖 -
+        <RecommendPosts currentPost={post} totalPosts={posts}/>
+
+        <div id='end-slogan' className='flex justify-between text-2xl justify-center my-12 dark:text-gray-200'>
+          <div>———</div>
+          <div>💖 本 文 结 束 😚 感 谢 您 的 阅 读 💖</div>
+          <div>———</div>
         </div>
         <div className='flex opacity-50 justify-center pb-1 dark:text-gray-200'>
           打赏一杯咖啡~