合并

src/api/index.ts

@@ -7,12 +7,13 @@ import {
   Categories,
   Post,
   PostList,
-  SpecificPostsList,
+  SpecificPostListRaw,
   Tags
 } from '@/models/Post.class'
 import { Article, Page } from '@/models/Article.class'
 import { Statistic } from '@/models/Statistic.class'
 import { SearchIndexes } from '@/models/Search.class'
+import { paginator } from '@/utils'
 
 // GET /api/site.json
 export async function fetchHexoConfig(): Promise<AxiosResponse<any>> {
@@ -35,16 +36,35 @@ export async function fetchArchivesList(
 
 // GET /api/tags/:TagName.json
 export async function fetchPostsListByTag(
-  tagName: string
+  tagName: string,
+  page: number,
+  pageSize: number
 ): Promise<AxiosResponse<any>> {
-  return request.get<SpecificPostsList>(`/tags/${tagName}.json`)
+  const response = await request.get<SpecificPostListRaw>(
+    `/tags/${tagName}.json`
+  )
+
+  response.data.postlist = paginator(response.data.postlist, page, pageSize)
+
+  return response
 }
 
 // GET /api/categories/:slug.json
 export async function fetchPostsListByCategory(
-  categoryName: string
-): Promise<AxiosResponse<any>> {
-  return request.get<SpecificPostsList>(`/categories/${categoryName}.json`)
+  categoryName: string,
+  page: number,
+  pageSize: number
+) {
+  const response = await request.get<SpecificPostListRaw>(
+    `/categories/${categoryName}.json`
+  )
+
+  response.data.pageSize = pageSize
+  response.data.total = response.data.postlist.length
+  response.data.pageCount = Math.ceil(response.data.postlist.length / pageSize)
+  response.data.postlist = paginator(response.data.postlist, page, pageSize)
+
+  return response
 }
 
 // GET /api/articles/:Slug.json

src/components/Link/LinkCategoryList.vue

@@ -2,13 +2,13 @@
   <template v-if="links">
     <template v-for="category in Object.keys(links)" :key="category">
       <MainTitle
-        :title="convertToLocale(category)"
+        :title="localizeLink(category)"
         :count="links[category].length"
         margins="mb-2"
         :uppercase="false"
       />
       <span class="text-ob-dim mb-8 text-lg">
-        {{ t(`${convertToLocale(category)}-desc`) }}
+        {{ t(`${localizeLink(category + '-desc')}`) }}
       </span>
       <ul :class="linkWrapperClasses(category)">
         <template v-for="[i, link] of links[category].entries()" :key="i">
@@ -17,7 +17,7 @@
             :link="link.link"
             :avatar="link.avatar"
             :description="link.description"
-            :type="convertToLocale(link.label)"
+            :type="localizeLink(link.label)"
             :vip="link.label === 'links-badge-vip'"
             :category-mode="true"
           />
@@ -32,7 +32,7 @@ import { Link } from '@/models/Article.class'
 import { PropType, defineComponent } from 'vue'
 import LinkCard from './LinkCard.vue'
 import { MainTitle } from '../Title'
-import { convertToLocale } from '@/utils'
+import { localizeLink } from '@/utils/localization'
 import { useI18n } from 'vue-i18n'
 
 export default defineComponent({
@@ -55,7 +55,7 @@ export default defineComponent({
           'xl:grid-cols-4': category === 'links-badge-vip'
         }
       },
-      convertToLocale,
+      localizeLink,
       t
     }
   }

src/components/Link/LinkList.vue

@@ -13,7 +13,7 @@
           :link="link.link"
           :avatar="link.avatar"
           :description="link.description"
-          :type="convertToLocale(link.label)"
+          :type="localizeLink(link.label)"
           :vip="link.label === 'links-badge-vip'"
         />
       </template>
@@ -24,7 +24,7 @@
 <script lang="ts">
 import { Link } from '@/models/Article.class'
 import { PropType, defineComponent } from 'vue'
-import { convertToLocale } from '@/utils'
+import { localizeLink } from '@/utils/localization'
 import { SubTitle } from '../Title'
 
 export default defineComponent({
@@ -38,7 +38,7 @@ export default defineComponent({
     }
   },
   setup() {
-    return { convertToLocale }
+    return { localizeLink }
   }
 })
 </script>

src/models/Post.class.ts

@@ -1,5 +1,16 @@
 import { Social } from './ThemeConfig.class'
 
+export interface PostRaw {
+  [key: string]: Array<any> | string | { [key: string]: any }
+}
+
+export interface SpecificPostListRaw {
+  pageCount: number
+  pageSize: number
+  total: number
+  postlist: PostRaw[]
+}
+
 export class NavPost {
   title = ''
   uid = ''
@@ -77,9 +88,7 @@ export class Post {
   feature = false
   pinned = false
 
-  constructor(raw?: {
-    [key: string]: Array<any> | string | { [key: string]: any }
-  }) {
+  constructor(raw?: PostRaw) {
     if (raw) {
       for (const key of Object.keys(this)) {
         if (Object.prototype.hasOwnProperty.call(raw, key)) {
@@ -152,13 +161,13 @@ export class SpecificPostsList {
   pageSize = 0
   total = 0
 
-  constructor(raw?: { [key: string]: [] }) {
+  constructor(raw?: SpecificPostListRaw) {
     if (raw && raw.postlist) {
       Object.assign(this, {
-        data: raw.postlist.map((one: { [key: string]: [] }) => new Post(one)),
-        pageCount: raw.postlist.length,
-        pageSize: raw.postlist.length,
-        total: raw.postlist.length
+        data: raw.postlist.map(one => new Post(one)),
+        pageCount: raw.pageCount,
+        pageSize: raw.pageSize,
+        total: raw.total
       })
     }
   }

src/pages/index.vue

@@ -75,7 +75,7 @@
           :pageSize="pagination.pageSize"
           :pageTotal="pagination.pageTotal"
           :page="pagination.page"
-          @pageChange="pageChangeHanlder"
+          @pageChange="pageChangeHandler"
         />
       </div>
       <div>
@@ -135,6 +135,7 @@ export default defineComponent({
     const categoryStore = useCategoryStore()
     const { updateTitleByText } = usePageTitle()
     const { t } = useI18n()
+    const DEFAULT_PAGE_SIZE = 12
 
     /** Variables Section */
 
@@ -152,7 +153,7 @@ export default defineComponent({
     const activeTab = ref('')
     const articleOffset = ref(0)
     const pagination = ref({
-      pageSize: 12,
+      pageSize: DEFAULT_PAGE_SIZE,
       pageTotal: 0,
       page: 1
     })
@@ -188,11 +189,7 @@ export default defineComponent({
       activeTab.value = slug
       backToArticleTop()
       if (slug !== '') {
-        posts.value = new PostList()
-        postStore.fetchPostsByCategory(slug).then(postList => {
-          posts.value = postList
-          pagination.value.pageTotal = postList.total
-        })
+        fetchSlugData(slug)
       } else {
         fetchPostData()
       }
@@ -216,14 +213,32 @@ export default defineComponent({
       await postStore.fetchPostsList(pagination.value.page).then(() => {
         posts.value = postStore.posts
         pagination.value.pageTotal = postStore.posts.total
-        pagination.value.pageSize = postStore.posts.pageSize
       })
     }
 
-    const pageChangeHanlder = async (page: number) => {
+    const fetchSlugData = async (slug: string) => {
+      posts.value = new PostList()
+      await postStore
+        .fetchPostsByCategory(
+          slug,
+          pagination.value.page,
+          pagination.value.pageSize
+        )
+        .then(postList => {
+          posts.value = postList
+          pagination.value.pageTotal = postList.total
+        })
+    }
+
+    const pageChangeHandler = async (page: number) => {
       pagination.value.page = page
       backToArticleTop()
-      await fetchPostData()
+
+      if (activeTab.value) {
+        await fetchSlugData(activeTab.value)
+      } else {
+        await fetchPostData()
+      }
     }
 
     return {
@@ -255,7 +270,7 @@ export default defineComponent({
       activeTabStyle,
       activeTab,
       pagination,
-      pageChangeHanlder,
+      pageChangeHandler,
       t
     }
   }

src/stores/post.ts

@@ -68,16 +68,24 @@ export const usePostStore = defineStore({
         }, 200)
       )
     },
-    async fetchPostsByCategory(category: string): Promise<SpecificPostsList> {
-      const { data } = await fetchPostsListByCategory(category)
+    async fetchPostsByCategory(
+      category: string,
+      page: number = 1,
+      pageSize: number = 12
+    ): Promise<SpecificPostsList> {
+      const { data } = await fetchPostsListByCategory(category, page, pageSize)
       return new Promise(resolve =>
         setTimeout(() => {
           resolve(new SpecificPostsList(data))
         }, 200)
       )
     },
-    async fetchPostsByTag(slug: string): Promise<SpecificPostsList> {
-      const { data } = await fetchPostsListByTag(slug)
+    async fetchPostsByTag(
+      slug: string,
+      page: number = 1,
+      pageSize: number = 12
+    ): Promise<SpecificPostsList> {
+      const { data } = await fetchPostsListByTag(slug, page, pageSize)
       return new Promise(resolve => {
         setTimeout(() => {
           resolve(new SpecificPostsList(data))

src/utils/index.ts

@@ -144,21 +144,6 @@ export function getDaysTillNow(from: string) {
   return Math.floor(timeDiff / (1000 * 3600 * 24))
 }
 
-export function convertToLocale(label: string) {
-  const locales = [
-    'links-badge-tech',
-    'links-badge-designer',
-    'links-badge-vip',
-    'links-badge-personal'
-  ]
-
-  if (locales.includes(label)) {
-    return `settings.${label}`
-  }
-
-  return label
-}
-
 export function cleanPath(path: string) {
   if (path !== '/' && path.at(-1) === '/') {
     return path.slice(0, -1)
@@ -184,3 +169,11 @@ export function throttle(func: () => void, timeFrame: number) {
     }
   }
 }
+
+export function paginator<T>(data: T[], page: number, pageSize: number) {
+  const skip = pageSize * (page - 1)
+  // slice function's endIndex will not be included
+  // therefore the ending index should be pageSize not pageSize - 1
+  const endIndex = skip > data.length - 1 ? undefined : pageSize * page
+  return data.slice(skip, endIndex)
+}

src/utils/localization.ts

@@ -0,0 +1,14 @@
+const SUPPORTED_LINK_LOCALES = [
+  'links-badge-tech',
+  'links-badge-designer',
+  'links-badge-vip',
+  'links-badge-personal'
+]
+
+export function localizeLink(label: string) {
+  if (SUPPORTED_LINK_LOCALES.includes(label.replace('-desc', ''))) {
+    return `settings.${label}`
+  }
+
+  return label.match('-desc') ? '' : label
+}