feat(theme): add archive article count, close #326 (#330)

theme/src/client/components/Blog/VPBlogArchives.vue

@@ -18,7 +18,8 @@ const { archives } = useArchives()
       <template v-for="archive in archives" :key="archive.label">
         <div class="archive">
           <h3 class="archive-title">
-            {{ archive.label }}
+            {{ archive.title }}
+            <span class="total">{{ archive.label }}</span>
           </h3>
           <VPShortPostList :post-list="archive.list" />
         </div>
@@ -58,6 +59,10 @@ const { archives } = useArchives()
 }
 
 .archive-title {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  padding-right: 16px;
   padding-bottom: 12px;
   padding-left: 16px;
   margin: 0 -16px;
@@ -67,6 +72,12 @@ const { archives } = useArchives()
   transition: border-bottom var(--vp-t-color);
 }
 
+.archive-title .total {
+  font-size: 16px;
+  font-weight: normal;
+  line-height: 16px;
+}
+
 @media (min-width: 768px) {
   .archives-title {
     display: none;
@@ -86,6 +97,7 @@ const { archives } = useArchives()
   }
 
   .archive-title {
+    padding-right: 24px;
     padding-left: 24px;
     margin: 0 -24px;
     border-bottom: solid 1px var(--vp-c-divider);

theme/src/client/composables/blog-archives.ts

@@ -1,20 +1,25 @@
 import type { PlumeThemeBlogPostItem } from '../../shared/index.js'
 import { computed } from 'vue'
+import { useRouteLocale } from 'vuepress/client'
 import { useLocalePostList } from './blog-data.js'
+import { getPresetLocaleData } from './preset-locales.js'
 
 export type ShortPostItem = Pick<PlumeThemeBlogPostItem, 'title' | 'path' | 'createTime'>
 
 export function useArchives() {
+  const locale = useRouteLocale()
   const list = useLocalePostList()
+
   const archives = computed(() => {
-    const archives: { label: string, list: ShortPostItem[] }[] = []
+    const archives: { title: string, label: string, list: ShortPostItem[] }[] = []
+    const countLocale = getPresetLocaleData(locale.value, 'archiveTotal')
 
     list.value.forEach((item) => {
       const createTime = item.createTime?.split(/\s|T/)[0] || ''
       const year = createTime.split('/')[0]
-      let current = archives.find(archive => archive.label === year)
+      let current = archives.find(archive => archive.title === year)
       if (!current) {
-        current = { label: year, list: [] }
+        current = { title: year, list: [], label: '' }
         archives.push(current)
       }
       current.list.push({
@@ -24,6 +29,10 @@ export function useArchives() {
       })
     })
 
+    archives.forEach((item) => {
+      item.label = countLocale.replace('{count}', item.list.length.toString())
+    })
+
     return archives
   })
 

theme/src/node/locales/en.ts

@@ -34,6 +34,7 @@ export const enPresetLocale: PresetLocale = {
   tag: 'Tags',
   archive: 'Archives',
   category: 'Categories',
+  archiveTotal: '{count} articles',
 }
 
 export const enSearchLocale: Partial<SearchLocaleOptions> = {

theme/src/node/locales/zh.ts

@@ -46,6 +46,7 @@ export const zhPresetLocale: PresetLocale = {
   tag: '标签',
   archive: '归档',
   category: '分类',
+  archiveTotal: '{count} 篇',
 }
 
 export const zhDocsearchLocale: DocSearchLocaleOptions = {

theme/src/shared/base.ts

@@ -47,6 +47,7 @@ export interface PresetLocale {
   tag: string
   archive: string
   category: string
+  archiveTotal: string
 }
 
 export interface ThemeTransition {