Skip to content

Commit

Permalink
fix: fixed the initial page number error on the article list page
Browse files Browse the repository at this point in the history
  • Loading branch information
hacxy committed Jan 7, 2025
1 parent 70cff1b commit 5879af3
Show file tree
Hide file tree
Showing 17 changed files with 114 additions and 64 deletions.
2 changes: 1 addition & 1 deletion packages/docs/.vitepress/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export default defineConfigWithTheme<ThemeConfig>({
nav: [
{
text: '指南',
link: '/guide/introduction/',
link: '/guide/intro/',
activeMatch: '/guide/'
}
],
Expand Down
3 changes: 0 additions & 3 deletions packages/docs/guide/blog/frontmatter.md

This file was deleted.

9 changes: 0 additions & 9 deletions packages/docs/guide/blog/index.md

This file was deleted.

File renamed without changes.
30 changes: 30 additions & 0 deletions packages/docs/guide/intro/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
---
sidebar:
order: 9
title: 简介
text: 概述
---

# 概述

`VitePress Theme Mild` 以下简称(Mild Theme), 是一个且具备丰富能力的 VitePress 主题, 它基于默认主题开发, 保留了原有的默认主题的配置规则, 并在此基础上进行扩展, 加入了更多可自定义的配置项, 以及丰富的markdown能力, 并额外提供了更多布局, 例如: blog, 可以帮助你快速搭建个人博客或者技术文档.

## 为什么开发这个主题

[开发VitePress主题的初衷](https://hacxy.cn/docs/posts/dev-vitepress-theme/1.start.html)

## 案例

以下是正在使用这个主题的项目

**博客案例:**

- [hacxy.cn](https://hacxy.cn)

**文档案例**

- [vitepress-theme-mild](https://theme.hacxy.cn)

## 快速开始

[下一章: 快速开始](./quick-start.md)
File renamed without changes.
26 changes: 0 additions & 26 deletions packages/docs/guide/introduction/index.md

This file was deleted.

1 change: 1 addition & 0 deletions packages/docs/guide/layout/blog.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
# 博客页布局
1 change: 1 addition & 0 deletions packages/docs/guide/layout/doc.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
# 文档页布局
6 changes: 6 additions & 0 deletions packages/docs/guide/layout/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
sidebar:
title: 布局
---

# 概述
1 change: 1 addition & 0 deletions packages/docs/guide/layout/tag.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
# 标签页布局
41 changes: 36 additions & 5 deletions packages/docs/guide/sidebar/index.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,40 @@
---
sidebar:
title: 侧边栏
order: 8
sidebar: false
---

# 介绍
# 概述

待补充
`Mild Theme` 基于默认主题扩展了一项非常实用的能力, 它由默认主题提供的 [sidebar 配置](https://vitepress.dev/zh/reference/default-theme-sidebar) 所 "进化" 而来, 保留了原有的配置规则, 并提供了一个自动扫描文件路径生成侧边栏的选项.

## 自动侧边栏

自动侧边栏基于多侧边栏实现, 可以根据不同的页面路径来显示不同的侧边栏, 例如: 希望在文档中创建单独的侧边栏,例如“指南”页面和“配置参考”页面。

为此,首先将你的页面组织到每个所需部分的目录中:

```
.
├─ guide/
│ ├─ index.md
│ ├─ one.md
│ └─ two.md
└─ config/
├─ index.md
├─ three.md
└─ four.md
```

然后,更新配置以定义每个部分的侧边栏。你可以使用默认的方式传递一个对象, 对象的key必须是从vitepress根路径开始的绝对文件路径, 它必须以`/`做结尾, 这点和默认主题的sidebar多侧边栏配置相同, 不同的是对象的值, 除了可以传递一个数组之外, 还可以使用`"auto"`,这意味着主题会扫描这个路径下所有的`.md`文件, 并自动生成侧边栏.

```js
export default {
themeConfig: {
sidebar: {
// 当用户位于 `guide` 目录时,会显示此侧边栏
'/guide/': 'auto',
// 当用户位于 `config` 目录时,会显示此侧边栏
'/config/': 'auto'
}
}
};
```
3 changes: 0 additions & 3 deletions packages/docs/guide/tag/frontmatter.md

This file was deleted.

9 changes: 0 additions & 9 deletions packages/docs/guide/tag/index.md

This file was deleted.

4 changes: 2 additions & 2 deletions packages/docs/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,10 @@ hero:
actions:
- theme: brand
text: 介绍
link: /guide/introduction/
link: /guide/intro/
- theme: brand
text: 快速开始
link: /guide/introduction/quick-start
link: /guide/intro/quick-start
---

<style>
Expand Down
27 changes: 27 additions & 0 deletions packages/theme/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,39 @@ const MildTheme: Theme = {
extends: VPTheme,
Layout,
enhanceApp({ app, router }) {
const originalConsoleError = console.error;
// 重写 console.error 方法
console.error = function (message, ...optionalParams) {
// 检查错误消息是否包含特定的关键字
if (typeof message === 'string' && message.includes('Hydration completed but contains mismatches')) {
// 忽略特定的 hydration 错误
return;
}
// 调用原始的 console.error 方法,处理其他错误
originalConsoleError(message, ...optionalParams);
};

if ((import.meta as any).env.SSR) {
const { collect } = setup(app);
app.provide('css-render-collect', collect);
}

if (!(import.meta as any).env.SSR) {
if ((import.meta as any).hot) {
let scrollPosition = 0;
// 监听热模块替换之前的事件
(import.meta as any).hot.on('vite:beforeUpdate', () => {
// 保存当前的滚动位置
scrollPosition = window.scrollY || document.documentElement.scrollTop;
});

// 监听热模块替换之后的事件
(import.meta as any).hot.on('vite:afterUpdate', () => {
// 恢复保存的滚动位置
window.scrollTo(0, scrollPosition);
});
}

router.onBeforePageLoad = () => {
NProgress.start();
return true;
Expand Down
15 changes: 9 additions & 6 deletions packages/theme/src/components/BlogPage.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import { useUrlSearchParams } from '@vueuse/core';
import { NPagination } from 'naive-ui';
import { useData, useRouter } from 'vitepress';
import { computed, ref, watch, watchEffect } from 'vue';
import { computed, onMounted, ref, watch } from 'vue';
import { DEFAULT_PAGE_SIZE } from '../constants';
import { useArticleData } from '../hooks/useArticleData';
import { paginate } from '../utils/client/article';
Expand All @@ -12,8 +12,8 @@ const router = useRouter();
const { frontmatter } = useData();
const articleTitle = ref(frontmatter.value?.article?.title);
const pageSize = ref(frontmatter.value?.article?.pageSize || DEFAULT_PAGE_SIZE);
const params = useUrlSearchParams();
const currentPage = ref(Number(params.pageNum) || 1);
const params = useUrlSearchParams<{ pageNum: string }>();
const currentPage = ref(1);
const { articleData } = useArticleData();
const totalPages = computed(() => {
Expand All @@ -25,15 +25,18 @@ const posts = computed(() => {
return paginate(articleData.value, pageSize.value, currentPage.value);
});
watchEffect(() => {
onMounted(() => {
if (currentPage.value <= 0 || currentPage.value > totalPages.value) {
currentPage.value = 1;
}
params.pageNum = String(currentPage.value);
currentPage.value = Number(params.pageNum);
});
watch(currentPage, () => {
window.scrollTo({ top: 0, behavior: 'auto' });
if (currentPage.value <= 0 || currentPage.value > totalPages.value) {
currentPage.value = 1;
}
params.pageNum = String(currentPage.value);
});
router.onBeforeRouteChange = to => {
Expand Down

0 comments on commit 5879af3

Please sign in to comment.