feat: 文档底部上/下一页切换

e2e/playground/basic/docs/guide/configure-site.tsx

@@ -0,0 +1,5 @@
+export default function ConfigureSite() {
+  return (
+    <h2>configure-site</h2>
+  )
+}

e2e/playground/basic/docs/rpress.config.ts

@@ -17,8 +17,12 @@ export default defineConfig({
               link: '/guide/start'
             },
             {
-              text: '配置站点',
+              text: '用法',
               link: '/guide/usage'
+            },
+            {
+              text: '配置站点',
+              link: '/guide/configure-site'
             }
           ]
         }

src/runtime/theme-default/Layout/DocLayout/index.tsx

@@ -1,6 +1,7 @@
 import { useLocation } from 'react-router-dom'
 import { Content, usePageData } from '../../../'
 import { Sidebar } from '../../components/Sidebar/'
+import { DocFooter } from '../../components/DocFooter'
 import styles from './index.module.scss'
 
 export function DocLayout() {
@@ -22,6 +23,7 @@ export function DocLayout() {
           <div className="island-doc">
             <Content />
           </div>
+          <DocFooter />
         </div>
       </div>
     </div>

src/runtime/theme-default/components/DocFooter/index.module.scss

@@ -0,0 +1,44 @@
+.prev,
+.next {
+  width: 50%;
+}
+
+.pager-link {
+  display: block;
+  border: 1px solid var(--island-c-divider-light);
+  border-radius: 8px;
+  padding: 8px 16px 8px;
+  width: 100%;
+  height: 100%;
+  transition: border-color 0.25s;
+}
+
+.pager-link:hover {
+  border-color: var(--island-c-brand);
+}
+
+.pager-link:hover .title {
+  color: var(--island-c-brand-dark);
+}
+
+.pager-link.next {
+  margin-left: auto;
+  text-align: right;
+}
+
+.desc {
+  display: block;
+  line-height: 20px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--island-c-text-2);
+}
+
+.title {
+  display: block;
+  line-height: 20px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--island-c-brand);
+  transition: color 0.25s;
+}

src/runtime/theme-default/components/DocFooter/index.tsx

@@ -0,0 +1,31 @@
+import { usePrevNextPage } from '../../utils/usePrevNextPage'
+import styles from './index.module.scss'
+
+export function DocFooter() {
+  const { prevPage, nextPage } = usePrevNextPage()
+  return (
+    <footer mt="8">
+      <div flex="~" gap="2" divider-top="~" pt="6">
+        <div flex="~ col" className={styles.prev}>
+          {prevPage && (
+            <a href={prevPage.link} className={styles.pagerLink}>
+              <span className={styles.desc}>上一页</span>
+              <span className={styles.title}>{prevPage.text}</span>
+            </a>
+          )}
+        </div>
+        <div flex="~ col" className={styles.next}>
+          {nextPage && (
+            <a
+              href={nextPage.link}
+              className={`${styles.pagerLink} ${styles.next}`}
+            >
+              <span className={styles.desc}>下一页</span>
+              <span className={styles.title}>{nextPage.text}</span>
+            </a>
+          )}
+        </div>
+      </div>
+    </footer>
+  )
+}

src/runtime/theme-default/utils/usePrevNextPage.ts

@@ -0,0 +1,34 @@
+import { useMemo } from 'react'
+import { useLocation } from 'react-router-dom'
+import { usePageData } from '../../'
+import type { SidebarItem } from 'shared/types'
+
+export function usePrevNextPage() {
+  const { pathname } = useLocation()
+  const { siteData } = usePageData()
+  const sidebar = siteData.themeConfig?.sidebar || {}
+
+  const flattenTitles = useMemo(() => {
+    const res: SidebarItem[] = []
+    // 遍历 Sidebar 数据，收集所有的文章信息，并平铺到一个数组里面
+    Object.keys(sidebar).forEach((key) => {
+      const groups = sidebar[key] || []
+      groups.forEach((group) => {
+        group.items.forEach((item) => {
+          res.push(item)
+        })
+      })
+    })
+    return res
+  }, [sidebar])
+
+  const pageIndex = flattenTitles.findIndex((item) => item.link === pathname)
+
+  const prevPage = flattenTitles[pageIndex - 1] || null
+  const nextPage = flattenTitles[pageIndex + 1] || null
+
+  return {
+    prevPage,
+    nextPage,
+  }
+}