feat(blog): add tagId and categoryId for multilingual routing support

- Add tagId and categoryId fields to blog post frontmatter and interfaces
- Update blog list, category, and tag pages to use IDs for routing
- Implement fallback to regular tags/categories when IDs are not available
- Improve tag and category links with hover effects and proper encoding
- Update post meta component to support multilingual routing

src/pages/zh/blog/index.astro

@@ -24,6 +24,9 @@ const blogPosts: BlogPost[] = allPosts.map((post) => {
     image: post.frontmatter.image || defaultImage,
     slug: slug,
     tags: post.frontmatter.tags || [],
+    tagId: post.frontmatter.tagId || [],
+    category: Array.isArray(post.frontmatter.category) ? post.frontmatter.category : post.frontmatter.category ? [post.frontmatter.category] : [],
+    categoryId: Array.isArray(post.frontmatter.categoryId) ? post.frontmatter.categoryId : post.frontmatter.categoryId ? [post.frontmatter.categoryId] : [],
     date: post.frontmatter.date || post.frontmatter.pubDate || '',
     readTime: post.frontmatter.readTime || post.frontmatter.readingTime || '5分钟阅读',
   };
@@ -65,7 +68,7 @@ allPosts.forEach(post => {
 
 // 转换为数组并排序
 const categories = Array.from(allCategories).sort();
-const tags = Array.from(allTags).map(tag => `#${tag}`).sort();
+const tags = Array.from(allTags).map(tag => `# ${tag}`).sort();
 
 ---
 
@@ -98,7 +101,7 @@ const tags = Array.from(allTags).map(tag => `#${tag}`).sort();
             </h3>
             <div class="space-y-2">
               {categories.map((category) => (
-                <a href={`/zh/blog/categories/${category.toLowerCase()}`} 
+                <a href={`/zh/blog/categories/${encodeURIComponent(category.toLowerCase())}`} 
                    class="block text-muted-foreground hover:text-purple-500 transition-colors duration-200">
                   {category}
                 </a>
@@ -116,7 +119,7 @@ const tags = Array.from(allTags).map(tag => `#${tag}`).sort();
             </h3>
             <div class="flex flex-wrap gap-2">
               {tags.map((tag) => (
-                <a href={`/zh/blog/tags/${tag.slice(1).toLowerCase()}`} 
+                <a href={`/zh/blog/tags/${encodeURIComponent(tag.slice(2).toLowerCase())}`} 
                    class="inline-block px-3 py-1 text-sm bg-muted text-muted-foreground rounded-full hover:bg-purple-500/20 hover:text-purple-500 transition-all duration-200">
                   {tag}
                 </a>