Medium V2.0

themes/Medium/components/BlogPostListPage.js

@@ -2,6 +2,7 @@ import BlogPostCard from './BlogPostCard'
 import BLOG from '@/blog.config'
 import BlogPostListEmpty from './BlogPostListEmpty'
 import PaginationSimple from './PaginationSimple'
+import { useRouter } from 'next/router'
 
 /**
  * 文章列表分页表格
@@ -12,7 +13,17 @@ import PaginationSimple from './PaginationSimple'
  * @constructor
  */
 const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
-  const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
+  let filteredPosts = Object.assign(posts)
+  const searchKey = getSearchKey()
+  if (searchKey) {
+    filteredPosts = posts.filter(post => {
+      const tagContent = post.tags ? post.tags.join(' ') : ''
+      const searchContent = post.title + post.summary + tagContent
+      return searchContent.toLowerCase().includes(searchKey.toLowerCase())
+    })
+  }
+  const filteredPostsCount = filteredPosts.length
+  const totalPage = Math.ceil(filteredPostsCount / BLOG.POSTS_PER_PAGE)
 
   if (!posts || posts.length === 0) {
     return <BlogPostListEmpty />
@@ -20,7 +31,7 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
     return (
       <div id="container" className='w-full justify-center'>
         {/* 文章列表 */}
-        {posts.map(post => (
+        {filteredPosts.map(post => (
           <BlogPostCard key={post.id} post={post} />
         ))}
         <PaginationSimple page={page} totalPage={totalPage} />
@@ -29,4 +40,12 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
   }
 }
 
+function getSearchKey () {
+  const router = useRouter()
+  if (router.query && router.query.s) {
+    return router.query.s
+  }
+  return null
+}
+
 export default BlogPostListPage