整理filterNavPages

components/AlgoliaSearchModal.js

@@ -132,7 +132,7 @@ export default function AlgoliaSearchModal({ cRef }) {
 
                 <Pagination totalPage={totalPage} page={page} switchPage={switchPage}/>
                 <div>{totalHit > 0 && <div>共搜索到 {totalHit} 条结果，用时 {useTime} 毫秒</div> }</div>
-                <div className='text-gray-600 mt-2'><span><i class="fa-brands fa-algolia"></i> Algolia 提供搜索服务</span> </div>
+                <div className='text-gray-600 mt-2'><span><i className="fa-brands fa-algolia"></i> Algolia 提供搜索服务</span> </div>
             </div>
 
             {/* 遮罩 */}

lib/notion/getNotionData.js

@@ -174,8 +174,8 @@ function getSiteInfo({ collection, block }) {
 }
 
 /**
- * 获取导航pages
- * 转为gitbook这类文档主题设计，精减的标题和内容
+ * 获取导航用的精减文章列表
+ * gitbook主题用到，只保留文章的标题分类标签分类信息，精减掉摘要密码日期等数据
  * 导航页面的条件，必须是Posts
  * @param {*} param0
  */
@@ -183,22 +183,8 @@ export function getNavPages({ allPages }) {
   const allNavPages = allPages.filter(post => {
     return post && post?.slug && (!post?.slug?.startsWith('http')) && post?.type === 'Post' && post?.status === 'Published'
   })
-  const result = allNavPages.map(item => ({ id: item.id, title: item.title || '', category: item.category || null, tags: item.tags || null, summary: item.summary || null, slug: item.slug }))
 
-  const groupedArray = result.reduce((groups, item) => {
-    const categoryName = item?.category ? item?.category : '' // 将category转换为字符串
-    const lastGroup = groups[groups.length - 1] // 获取最后一个分组
-
-    if (!lastGroup || lastGroup?.category !== categoryName) { // 如果当前元素的category与上一个元素不同，则创建新分组
-      groups.push({ category: categoryName, items: [] })
-    }
-
-    groups[groups.length - 1].items.push(item) // 将元素加入对应的分组
-
-    return groups
-  }, [])
-
-  return groupedArray
+  return allNavPages.map(item => ({ id: item.id, title: item.title || '', pageCover: item.pageCover || '', category: item.category || null, tags: item.tags || null, summary: item.summary || null, slug: item.slug }))
 }
 
 /**

pages/index.js

@@ -3,7 +3,6 @@ import { getPostBlocks } from '@/lib/notion'
 import { getGlobalData } from '@/lib/notion/getNotionData'
 import { generateRss } from '@/lib/rss'
 import { generateRobotsTxt } from '@/lib/robots.txt'
-
 import { useRouter } from 'next/router'
 import { getLayoutByTheme } from '@/themes/theme'
 
@@ -12,7 +11,6 @@ import { getLayoutByTheme } from '@/themes/theme'
  * @param {*} props
  * @returns
  */
-
 const Index = props => {
   // 根据页面路径加载不同Layout文件
   const Layout = getLayoutByTheme(useRouter())

themes/gitbook/components/NavPostList.js

@@ -10,12 +10,24 @@ import NavPostItem from './NavPostItem'
  * @constructor
  */
 const NavPostList = (props) => {
-  const { filteredPostGroups } = props
+  const { filteredNavPages } = props
   const router = useRouter()
   let selectedSth = false
+  const groupedArray = filteredNavPages?.reduce((groups, item) => {
+    const categoryName = item?.category ? item?.category : '' // 将category转换为字符串
+    const lastGroup = groups[groups.length - 1] // 获取最后一个分组
+
+    if (!lastGroup || lastGroup?.category !== categoryName) { // 如果当前元素的category与上一个元素不同，则创建新分组
+      groups.push({ category: categoryName, items: [] })
+    }
+
+    groups[groups.length - 1].items.push(item) // 将元素加入对应的分组
+
+    return groups
+  }, [])
 
   // 处理是否选中
-  filteredPostGroups?.map((group) => {
+  groupedArray?.map((group) => {
     let groupSelected = false
     for (const post of group?.items) {
       if (router.asPath.split('?')[0] === '/' + post.slug) {
@@ -28,16 +40,16 @@ const NavPostList = (props) => {
   })
 
   // 如果都没有选中默认打开第一个
-  if (!selectedSth && filteredPostGroups && filteredPostGroups?.length > 0) {
-    filteredPostGroups[0].selected = true
+  if (!selectedSth && groupedArray && groupedArray?.length > 0) {
+    groupedArray[0].selected = true
   }
 
-  if (!filteredPostGroups || filteredPostGroups.length === 0) {
+  if (!groupedArray || groupedArray.length === 0) {
     return <NavPostListEmpty />
   } else {
     return <div id='posts-wrapper' className='w-full flex-grow'>
             {/* 文章列表 */}
-            {filteredPostGroups?.map((group, index) => <NavPostItem key={index} group={group} onHeightChange={props.onHeightChange}/>)}
+            {groupedArray?.map((group, index) => <NavPostItem key={index} group={group} onHeightChange={props.onHeightChange}/>)}
         </div>
   }
 }

themes/gitbook/components/PageNavDrawer.js

@@ -10,7 +10,21 @@ import NavPostList from './NavPostList'
  */
 const PageNavDrawer = (props) => {
   const { pageNavVisible, changePageNavVisible } = useGitBookGlobal()
-  const { filteredPostGroups } = props
+  const { filteredNavPages } = props
+
+  const groupedArray = filteredNavPages.reduce((groups, item) => {
+    const categoryName = item?.category ? item?.category : '' // 将category转换为字符串
+    const lastGroup = groups[groups.length - 1] // 获取最后一个分组
+
+    if (!lastGroup || lastGroup?.category !== categoryName) { // 如果当前元素的category与上一个元素不同，则创建新分组
+      groups.push({ category: categoryName, items: [] })
+    }
+
+    groups[groups.length - 1].items.push(item) // 将元素加入对应的分组
+
+    return groups
+  }, [])
+
   const switchVisible = () => {
     changePageNavVisible(!pageNavVisible)
   }
@@ -23,7 +37,7 @@ const PageNavDrawer = (props) => {
                     ' overflow-y-hidden shadow-card w-72 duration-200 fixed left-1 top-16 rounded py-2 bg-white dark:bg-gray-600'}>
                 <div className='dark:text-gray-400 text-gray-600 h-96 overflow-y-scroll p-3'>
                     {/* 所有文章列表 */}
-                    <NavPostList filteredPostGroups={filteredPostGroups} />
+                    <NavPostList groupedArray={groupedArray} />
                 </div>
             </div>
         </div>

themes/gitbook/components/SearchInput.js

@@ -5,7 +5,7 @@ let lock = false
 
 const SearchInput = ({ currentSearch, cRef, className }) => {
   const searchInputRef = useRef()
-  const { setFilterPosts, allNavPages } = useGitBookGlobal()
+  const { setFilteredNavPages, allNavPages } = useGitBookGlobal()
 
   useImperativeHandle(cRef, () => {
     return {
@@ -17,31 +17,44 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
 
   const handleSearch = () => {
     let keyword = searchInputRef.current.value
-    const filterPosts = []
     if (keyword) {
       keyword = keyword.trim()
     } else {
-      setFilterPosts(allNavPages)
+      setFilteredNavPages(allNavPages)
     }
     const filterAllNavPages = deepClone(allNavPages)
-    for (const filterGroup of filterAllNavPages) {
-      for (let i = filterGroup.items.length - 1; i >= 0; i--) {
-        const post = filterGroup.items[i]
-        const articleInfo = post.title + ''
-        const hit = articleInfo.toLowerCase().indexOf(keyword.toLowerCase()) > -1
-        if (!hit) {
-          // 删除
-          filterGroup.items.splice(i, 1)
-        }
-      }
-      if (filterGroup.items && filterGroup.items.length > 0) {
-        filterPosts.push(filterGroup)
+    // for (const filterGroup of filterAllNavPages) {
+    //   for (let i = filterGroup.items.length - 1; i >= 0; i--) {
+    //     const post = filterGroup.items[i]
+    //     const articleInfo = post.title + ''
+    //     const hit = articleInfo.toLowerCase().indexOf(keyword.toLowerCase()) > -1
+    //     if (!hit) {
+    //       // 删除
+    //       filterGroup.items.splice(i, 1)
+    //     }
+    //   }
+    //   if (filterGroup.items && filterGroup.items.length > 0) {
+    //     filterPosts.push(filterGroup)
+    //   }
+    // }
+    for (let i = filterAllNavPages.length - 1; i >= 0; i--) {
+      const post = filterAllNavPages[i]
+      const articleInfo = post.title + ''
+      const hit = articleInfo.toLowerCase().indexOf(keyword.toLowerCase()) > -1
+      if (!hit) {
+        // 删除
+        filterAllNavPages.splice(i, 1)
       }
     }
 
     // 更新完
-    setFilterPosts(filterPosts)
+    setFilteredNavPages(filterAllNavPages)
   }
+
+  /**
+   * 回车键
+   * @param {*} e
+   */
   const handleKeyUp = (e) => {
     if (e.keyCode === 13) { // 回车
       handleSearch(searchInputRef.current.value)
@@ -49,6 +62,10 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
       cleanSearch()
     }
   }
+
+  /**
+   * 清理搜索
+   */
   const cleanSearch = () => {
     searchInputRef.current.value = ''
     handleSearch()

themes/gitbook/index.js

@@ -47,16 +47,17 @@ const LayoutBase = (props) => {
   const router = useRouter()
   const [tocVisible, changeTocVisible] = useState(false)
   const [pageNavVisible, changePageNavVisible] = useState(false)
-  const [filteredPostGroups, setFilteredPostGroups] = useState(allNavPages)
+  const [filteredNavPages, setFilteredNavPages] = useState(allNavPages)
 
   const showTocButton = post?.toc?.length > 1
 
   useEffect(() => {
-    setFilteredPostGroups(allNavPages)
+    console.log('更新导航', allNavPages)
+    setFilteredNavPages(allNavPages)
   }, [post])
 
   return (
-        <ThemeGlobalGitbook.Provider value={{ tocVisible, changeTocVisible, filteredPostGroups, setFilteredPostGroups, allNavPages, pageNavVisible, changePageNavVisible }}>
+        <ThemeGlobalGitbook.Provider value={{ tocVisible, changeTocVisible, filteredNavPages, setFilteredNavPages, allNavPages, pageNavVisible, changePageNavVisible }}>
             <Style/>
 
             <div id='theme-gitbook' className='bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300'>
@@ -72,7 +73,7 @@ const LayoutBase = (props) => {
                             <SearchInput className='my-3 rounded-md' />
                             <div className='mb-20'>
                                 {/* 所有文章列表 */}
-                                <NavPostList filteredPostGroups={filteredPostGroups} />
+                                <NavPostList filteredNavPages={filteredNavPages} />
                             </div>
 
                         </div>
@@ -146,7 +147,7 @@ const LayoutBase = (props) => {
                 </div>}
 
                 {/* 移动端导航抽屉 */}
-                <PageNavDrawer {...props} filteredPostGroups={filteredPostGroups} />
+                <PageNavDrawer {...props} filteredNavPages={filteredNavPages} />
 
                 {/* 移动端底部导航栏 */}
                 {/* <BottomMenuBar {...props} className='block md:hidden' /> */}

themes/heo/index.js

@@ -79,6 +79,7 @@ const LayoutBase = props => {
  * @returns
  */
 const LayoutIndex = (props) => {
+  console.log('首页', props)
   const headerSlot = <header>
         {/* 顶部导航 */}
         <div id='nav-bar-wrapper' className='h-16'><NavBar {...props} /></div>