[Feature] 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,23 +1,85 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useData, useRoute } from 'vitepress'
+import { computed, ref, onMounted } from 'vue'
+import { useData, useRoute, useRouter, withBase } 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'
 
 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)
+})
+
+// 从URL参数中恢复分类状态 - 兼容SSR
+onMounted(() => {
+  // 仅在客户端环境中执行
+  if (typeof window !== 'undefined') {
+    const urlParams = new URLSearchParams(window.location.search)
+    const categoryParam = urlParams.get('category')
+    if (
+      categoryParam &&
+      ['all', 'community-activity', 'developer-story', 'insights'].includes(categoryParam)
+    ) {
+      activeCategory.value = categoryParam
+    }
+  }
+})
+
+// 分类切换函数
+const changeCategory = (category) => {
+  activeCategory.value = category
+
+  // 仅在客户端环境执行URL操作
+  if (typeof window === 'undefined') return
+
+  // 获取基础路径
+  const baseUrl = withBase('/')
+
+  // 检查是否在首页
+  if (route.path !== '/') {
+    // 不在首页，需要导航到首页
+    if (category === 'all') {
+      // 修复：导航到纯首页，不带参数
+      router.go(baseUrl)
+    } else {
+      // 带分类参数导航到首页
+      router.go(`${baseUrl}?category=${category}`)
+    }
+  } else {
+    // 已经在首页，只更新URL参数，不刷新页面
+    if (category === 'all') {
+      // 纯首页URL，不带参数
+      window.history.pushState({}, '', baseUrl)
+    } else {
+      // 带分类参数的首页
+      window.history.pushState({}, '', `${baseUrl}?category=${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)
 })
+
+// 注意：移除了自定义的 withBase 函数，因为我们直接从 vitepress 导入
 </script>
 
 <template>
@@ -31,6 +93,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 +121,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

@@ -1,19 +1,28 @@
 <script setup lang="ts">
-import { useData } from 'vitepress'
+import { useData, withBase } from 'vitepress'
 import Home from './Home.vue'
 import Article from './Article.vue'
 import NotFound from './NotFound.vue'
 import About from './About.vue'
 
 const { page, frontmatter, site } = useData()
+
+// 添加一个函数来处理回到首页的点击事件
+function goToHomePage(event) {
+  // 仅在客户端环境执行
+  if (typeof window !== 'undefined') {
+    // 总是导航到不带任何参数的首页
+    window.location.href = withBase('/')
+    event.preventDefault()
+  }
+}
 </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">
-          <!-- TODO(SigureMo): Update this logo -->
+        <a class="text-xl" :href="withBase('/')" :aria-label="site.title" @click="goToHomePage">
           <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">{{
             site.title

src/.vitepress/theme/Pagination.vue

@@ -1,10 +1,47 @@
 <script setup lang="ts">
 import { withBase } from 'vitepress'
+import { useRoute } from 'vitepress'
+import { ref, onMounted, computed } from 'vue'
+
+const route = useRoute()
 
 const { numPages, pageIndex } = defineProps<{
   numPages: number
   pageIndex: number
 }>()
+
+// 保持分类状态的引用
+const currentCategory = ref(null)
+
+// 在客户端加载时获取当前分类
+onMounted(() => {
+  if (typeof window !== 'undefined') {
+    const urlParams = new URLSearchParams(window.location.search)
+    currentCategory.value = urlParams.get('category')
+  }
+})
+
+// 计算当前分类，同时在SSR和CSR下工作
+const categoryParam = computed(() => {
+  // 服务端渲染时使用路由参数
+  if (typeof window === 'undefined') {
+    return route.query.category || null
+  }
+  // 客户端渲染时使用状态变量
+  return currentCategory.value
+})
+
+// 生成带分类参数的页面链接
+function getPageUrl(pageNum: number) {
+  // 基础URL
+  const basePath = pageNum === 1 ? '/index.html' : `/pages/${pageNum}.html`
+
+  // 如果有分类且不是'all'，添加到URL
+  const category = categoryParam.value
+  return category && category !== 'all'
+    ? withBase(`${basePath}?category=${category}`)
+    : withBase(basePath)
+}
 </script>
 
 <template>
@@ -17,7 +54,7 @@ const { numPages, pageIndex } = defineProps<{
       }"
       v-for="i in numPages"
       :key="i"
-      :href="withBase(i === 1 ? '/index.html' : `/pages/${i}.html`)"
+      :href="getPageUrl(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/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 岁，但**小小黄瓜**的开源史却已有好几年！学校趣事？开源经历？迷人帅照？成山作业？你都能在本篇博客看到！