[Feature] Blog Category

CONTRIBUTING.md

@@ -56,6 +56,41 @@ pnpm dev
 
 文件名统一使用 kebab-case，如 `hello-world.md`。
 
+1. 博客置顶
+
+   若有置顶某篇博客的需求，需要确保该博客文章在 frontmatter 中包含 `pinned: true` 字段。例如：
+
+   ```
+   ---
+   title: 2024 年飞桨开源社区年度报告
+   date: 2025-02-07
+   ...
+   pinned: true
+   ---
+
+   文章内容...
+   ```
+
+2. 博客分类
+
+   需要确保每篇博客文章在 frontmatter 中包含 `category` 字段，以便实现博客的分类展示。例如：
+
+   ```
+   ---
+   title: 文章标题
+   date: 2025-04-01
+   category: community-activity
+   ---
+
+   文章内容...
+   ```
+
+   | category 字段      | 含义                           |
+   | ------------------ | ------------------------------ |
+   | community-activity | 飞桨开源社区动态、活动进展     |
+   | developer-story    | 飞桨社区开发者访谈、开发者故事 |
+   | insights           | 前沿洞察、技术分享             |
+
 ### 图片文件
 
 图片文件统一放置在 [`src/images`](./src/images) 目录下，每篇博客对应一个子目录，子目录名即为博客的文件名，比如 `hello-world.md` 对应的图片目录为 `src/images/hello-world`。

src/.vitepress/theme/BlogCategories.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps<{
+  activeCategory: string
+  onChange: (category: string) => void
+}>()
+
+const categories = [
+  { id: 'all', name: 'ALL' },
+  { id: 'community-activity', name: '飞桨开源社区动态' },
+  { id: 'developer-story', name: '飞桨社区开发者访谈' },
+  { id: 'insights', name: '前沿洞察' },
+]
+</script>
+
+<template>
+  <div class="blog-categories mb-8">
+    <div class="flex flex-wrap gap-2">
+      <button
+        v-for="category in categories"
+        :key="category.id"
+        :class="[
+          'px-4 py-2 rounded-full text-sm font-medium transition-colors',
+          activeCategory === category.id
+            ? 'bg-blue-600 text-white'
+            : 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700',
+        ]"
+        @click="onChange(category.id)"
+      >
+        {{ category.name }}
+      </button>
+    </div>
+  </div>
+</template>

src/.vitepress/theme/Home.vue

@@ -1,22 +1,63 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useData, useRoute } from 'vitepress'
+import { computed, ref, onMounted } from 'vue'
+import { useData, useRoute, useRouter } from 'vitepress'
 import { data as postsData } from './loaders/posts.data.js'
 import Date from './Date.vue'
 import Pagination from './Pagination.vue'
+import BlogCategories from './BlogCategories.vue'
+import {
+  getCurrentCategory,
+  updateCategoryInUrl,
+  navigateToCategory,
+} from './utils/categoryUtils.client.js'
 
 const route = useRoute()
+const router = useRouter()
 const { posts, postsPerPage, numPages } = postsData
 
 const { frontmatter, site } = useData()
 
+// 博客分类相关功能
+const activeCategory = ref('all')
+
+const filteredPosts = computed(() => {
+  if (activeCategory.value === 'all') {
+    return posts
+  }
+  return posts.filter((post) => post.category === activeCategory.value)
+})
+
+onMounted(() => {
+  const categoryParam = getCurrentCategory()
+  if (
+    categoryParam &&
+    ['all', 'community-activity', 'developer-story', 'insights'].includes(categoryParam)
+  ) {
+    activeCategory.value = categoryParam
+  }
+})
+
+// 修改分类切换函数
+const changeCategory = (category) => {
+  activeCategory.value = category
+
+  // 更新URL参数，不刷新页面
+  updateCategoryInUrl(category)
+
+  // 如果不在首页，跳转回首页
+  if (route.path !== '/') {
+    navigateToCategory(category)
+  }
+}
+
 const pageIndex = computed(() => {
   return route.path === '/' ? 1 : Number(route.path.split('/')[2])
 })
+
 const postsInPage = computed(() => {
   const start = (pageIndex.value - 1) * postsPerPage
   const end = start + postsPerPage
-  return posts.slice(start, end)
+  return filteredPosts.value.slice(start, end)
 })
 </script>
 
@@ -31,6 +72,9 @@ const postsInPage = computed(() => {
       <p class="text-lg leading-7 text-gray-500 dark:text-white">
         {{ frontmatter.subtext || site.description }}
       </p>
+
+      <!-- 添加分类选项组件 -->
+      <BlogCategories :active-category="activeCategory" :on-change="changeCategory" />
     </div>
     <ul class="divide-y divide-gray-200 dark:divide-slate-200/5">
       <li class="py-12" v-for="{ title, url, date, excerpt, pinned } of postsInPage">
@@ -56,9 +100,9 @@ const postsInPage = computed(() => {
       </li>
     </ul>
     <Pagination
-      :num-pages="numPages"
+      :num-pages="Math.ceil(filteredPosts.length / postsPerPage)"
       :page-index="pageIndex"
-      v-if="postsInPage.length !== posts.length"
+      v-if="filteredPosts.length > postsPerPage"
     />
   </div>
 </template>

src/.vitepress/theme/Layout.vue

@@ -6,13 +6,19 @@ import NotFound from './NotFound.vue'
 import About from './About.vue'
 
 const { page, frontmatter, site } = useData()
+
+// 添加重置分类的函数，确保回到首页时不带all参数
+function resetCategory() {
+  window.location.href = window.location.origin
+}
 </script>
 
 <template>
   <div class="antialiased dark:bg-neutral-900 min-h-screen">
     <div class="max-w-3xl mx-auto px-4 sm:px-6 xl:max-w-5xl xl:px-0">
       <nav class="flex justify-between items-center py-10 font-bold">
-        <a class="text-xl" href="/" :aria-label="site.title">
+        <!-- 修改首页链接，添加 @click 事件 处理器 -->
+        <a class="text-xl" href="/" @click="resetCategory" :aria-label="site.title">
           <!-- TODO(SigureMo): Update this logo -->
           <img class="inline-block mr-2" style="width: 120px" alt="logo" src="/logo.png" />
           <span v-if="!frontmatter.index" class="hidden md:inline dark:text-white">{{

src/.vitepress/theme/Pagination.vue

@@ -1,10 +1,31 @@
 <script setup lang="ts">
 import { withBase } from 'vitepress'
+import { useRoute } from 'vitepress'
+import { ref, onMounted } from 'vue'
+import { getCurrentCategory } from './utils/categoryUtils.client.js'
+
+const route = useRoute()
 
 const { numPages, pageIndex } = defineProps<{
   numPages: number
   pageIndex: number
 }>()
+
+const currentCategory = ref(null)
+
+onMounted(() => {
+  currentCategory.value = getCurrentCategory()
+})
+
+function getPageLink(pageNum) {
+  const basePath = pageNum === 1 ? '/' : `/pages/${pageNum}`
+
+  if (currentCategory.value) {
+    return withBase(`${basePath}?category=${currentCategory.value}`)
+  }
+
+  return withBase(basePath)
+}
 </script>
 
 <template>
@@ -17,7 +38,7 @@ const { numPages, pageIndex } = defineProps<{
       }"
       v-for="i in numPages"
       :key="i"
-      :href="withBase(i === 1 ? '/index.html' : `/pages/${i}.html`)"
+      :href="getPageLink(i)"
       >{{ i }}</a
     >
   </div>

src/.vitepress/theme/loaders/posts.ts

@@ -12,6 +12,7 @@ export interface Post {
   }
   excerpt: string | undefined
   pinned?: boolean
+  category?: string
 }
 
 export interface PostsData {
@@ -80,6 +81,7 @@ export default function createPostsLoader(getPostsPerPage: () => number) {
           excerpt,
           date: formatDate(frontmatter.date),
           pinned: frontmatter.pinned === true,
+          category: frontmatter.category || 'all',
         }))
         .sort((a, b) => {
           if (a.pinned && !b.pinned) {

src/.vitepress/theme/utils/categoryUtils.client.js

@@ -0,0 +1,38 @@
+/**
+ * 从URL获取当前分类参数
+ * @returns {string|null} 分类参数值或null
+ */
+export function getCurrentCategory() {
+  const urlParams = new URLSearchParams(window.location.search)
+  return urlParams.get('category')
+}
+
+/**
+ * 更新URL中的分类参数但不刷新页面
+ * @param {string} category 分类名称
+ */
+export function updateCategoryInUrl(category) {
+  const url = new URL(window.location.href)
+
+  if (category === 'all') {
+    // 如果选择"all"，则移除category参数
+    url.searchParams.delete('category')
+  } else {
+    // 否则设置category参数
+    url.searchParams.set('category', category)
+  }
+
+  window.history.pushState({}, '', url)
+}
+
+/**
+ * 导航到指定分类的首页
+ * @param {string} category 分类名称
+ */
+export function navigateToCategory(category) {
+  if (category === 'all') {
+    window.location.href = '/'
+  } else {
+    window.location.href = `/?category=${category}`
+  }
+}

src/posts/2023-os-report.md

@@ -5,6 +5,7 @@ author:
    name: 梦师傅
    github: Ligoml
 pinned: true
+category: community-activity
 ---
 
 什么是开源项目和开源社区？国内活跃度 Top 的开源社区，都有哪些有趣的人和事？开源社区之于开源项目有何重要意义？

src/posts/2024-summary.md

@@ -5,6 +5,7 @@ author:
    name: 孙钟恺
    github: sunzhongkai588
 pinned: true
+category: community-activity
 ---
 
 2024 年已悄然落幕。这一年，飞桨开源社区在挑战与机遇中不断成长与突破。在这新年伊始，我们为大家呈上一份 2024 年度报告，以此致敬每一位开发者的努力与贡献。

src/posts/buaa-starter.md

@@ -4,6 +4,7 @@ date: 2024-11-27
 author:
    name: 小莹莹
    github: E-Pudding
+category: community-activity
 ---
 
 <style>

src/posts/ccf-pku.md

@@ -4,6 +4,7 @@ date: 2024-11-17
 author:
    name: 小莹莹
    github: E-Pudding
+category: community-activity
 ---
 
 <style>

src/posts/chengdu-kaiyuanshe.md

@@ -4,7 +4,7 @@ date: 2023-11-02
 author:
    name: 孙师傅
    github: sunzhongkai588
-   # avatar:
+category: community-activity # avatar:
 ---
 
 2023 年 10 月 28 日、29 日参加开源社举办的「第八届中国开源年会」的精彩瞬间，以及与咱 Paddle 社区成都开发者们的线下见面～

src/posts/chuan-story.md

@@ -9,6 +9,7 @@ co_authors:
      github: wenxiaohahaha
    - name: 田川（川川）
      github: gouzil
+category: developer-story
 ---
 
 “桨声川水悠悠过，长路漫漫风光留”，这次我们要采访的是小伙伴们都熟悉的励志富哥儿——**川川师傅**✨

src/posts/deepseek-tech-visualized.md

@@ -4,6 +4,7 @@ date: 2025-2-20
 author:
    name: Jun
    github: jzhang533
+category: insights
 ---
 
 Visualized deepseek technologies.

src/posts/hackathon-5th-episode01.md

@@ -7,6 +7,7 @@ author:
 co_authors:
    - name: 花花
      github: Tulip-hua
+category: community-activity
 ---
 
 向大家快速介绍飞桨黑客松第五期活动上线以来的进展（9.25-11.3）

src/posts/hackathon-5th-episode02.md

@@ -7,6 +7,7 @@ author:
 co_authors:
    - name: 花花
      github: Tulip-hua
+category: community-activity
 ---
 
 向大家快速介绍飞桨黑客松第五期开展以来的进展（11.4-12.1）

src/posts/hackathon-5th-episode03.md

@@ -7,6 +7,7 @@ author:
 co_authors:
    - name: 梦师傅
      github: Ligoml
+category: community-activity
 ---
 
 让我们看看哪些最强“Hacker”脱颖而出！

src/posts/hackathon-6th-summary.md

@@ -4,6 +4,7 @@ date: 2024-08-23
 author:
    name: 孙钟恺
    github: sunzhongkai588
+category: community-activity
 ---
 
 飞桨黑客马拉松第六期，新赛制，新玩法，难度更深，挑战更大！

src/posts/hackathon-7th-summary.md

@@ -4,6 +4,7 @@ date: 2025-01-26
 author:
    name: 孙钟恺
    github: sunzhongkai588
+category: community-activity
 ---
 
 飞桨黑客马拉松第七期，老赛制，新赛题，熟悉的配方，不一样的味道！

src/posts/huanggua-story.md

@@ -9,6 +9,7 @@ co_authors:
      github: wenxiaohahaha
    - name: 黄锦源（黄瓜大帝）
      github: Berniehuang2008
+category: developer-story
 ---
 
 他来了，他来了，他带着满满的故事，迈着自信的步伐向我们走来了！虽然刚满 15 岁，但**小小黄瓜**的开源史却已有好几年！学校趣事？开源经历？迷人帅照？成山作业？你都能在本篇博客看到！

src/posts/huangjiyi-story.md

@@ -9,6 +9,7 @@ co_authors:
      github: wenxiaohahaha
    - name: 黄济懿（黄师傅）
      github: huangjiyi
+category: developer-story
 ---
 
 从积极参与社区开源任务，到加入飞桨成为 ~~（练习生）~~ 实习生，到最终正式成为飞桨研发团队的一员。以兴趣为起点， **黄济懿师傅** 将我们展示了一条通往职业的道路，希望他的故事能够激励所有对开源充满热情的开发者们。接下来，原神启动 🚀！