fix(routing): encode special characters in tag and category URLs

Handle special characters in tag and category URLs by encoding them properly to prevent routing issues. Also update the UI/UX tag to UI in blog posts.

src/pages/blog/categories/[category].astro

@@ -26,7 +26,7 @@ export async function getStaticPaths() {
   
   // 为每个分类生成路径
   return Array.from(uniqueCategories).map(category => ({
-    params: { category },
+    params: { category: encodeURIComponent(category) },
     props: { category }
   }));
 }
@@ -153,7 +153,7 @@ const pageDescription = `Explore articles about ${formattedCategory}. Dive into
             </h3>
             <div class="space-y-2">
               {categories.map((cat) => (
-                <a href={`/blog/categories/${cat.toLowerCase()}`} 
+                <a href={`/blog/categories/${encodeURIComponent(cat.toLowerCase())}`} 
                    class={`block transition-colors duration-200 ${cat.toLowerCase() === decodedCategory.toLowerCase() ? 'text-purple-500 font-medium' : 'text-muted-foreground hover:text-purple-500'}`}>
                   {cat}
                 </a>
@@ -171,7 +171,7 @@ const pageDescription = `Explore articles about ${formattedCategory}. Dive into
             </h3>
             <div class="flex flex-wrap gap-2">
               {tags.map((tag) => (
-                <a href={`/blog/tags/${tag.slice(1).toLowerCase()}`} 
+                <a href={`/blog/tags/${encodeURIComponent(tag.slice(1).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>

src/pages/blog/posts/modern-ui-tailwind.md

@@ -4,7 +4,7 @@ description: "Discover how to create beautiful, responsive user interfaces using
 image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=250&fit=crop&crop=center"
 date: "April 15, 2025"
 readTime: "6 min read"
-tags: ["CSS", "Tailwind", "UI/UX"]
+tags: ["CSS", "Tailwind", "UI"]
 slug: "modern-ui-tailwind"
 layout: "../../../layouts/BlogPostLayout.astro"
 ---

src/pages/blog/tags/[tag].astro

@@ -20,9 +20,9 @@ export async function getStaticPaths() {
     }
   });
   
-  // 为每个标签生成路径
+  // 为每个标签生成路径，对包含特殊字符的标签进行编码
   return Array.from(uniqueTags).map(tag => ({
-    params: { tag },
+    params: { tag: encodeURIComponent(tag) },
     props: { tag }
   }));
 }
@@ -166,7 +166,7 @@ const pageDescription = `Explore articles tagged with #${formattedTag}. Dive int
                 const tagName = tagItem.slice(1).toLowerCase();
                 const isCurrentTag = tagName === decodedTag.toLowerCase();
                 return (
-                  <a href={`/blog/tags/${tagName}`} 
+                  <a href={`/blog/tags/${encodeURIComponent(tagName)}`} 
                      class={`inline-block px-3 py-1 text-sm rounded-full transition-all duration-200 ${isCurrentTag ? 'bg-purple-500/20 text-purple-500 font-medium' : 'bg-muted text-muted-foreground hover:bg-purple-500/20 hover:text-purple-500'}`}>
                     {tagItem}
                   </a>

src/pages/zh/blog/categories/[category].astro

@@ -26,7 +26,7 @@ export async function getStaticPaths() {
   
   // 为每个分类生成路径
   return Array.from(uniqueCategories).map(category => ({
-    params: { category },
+    params: { category: encodeURIComponent(category) },
     props: { category }
   }));
 }
@@ -153,7 +153,7 @@ const pageDescription = `探索关于${formattedCategory}的文章。深入了
             </h3>
             <div class="space-y-2">
               {categories.map((cat) => (
-                <a href={`/zh/blog/categories/${cat.toLowerCase()}`} 
+                <a href={`/zh/blog/categories/${encodeURIComponent(cat.toLowerCase())}`} 
                    class={`block transition-colors duration-200 ${cat.toLowerCase() === decodedCategory.toLowerCase() ? 'text-purple-500 font-medium' : 'text-muted-foreground hover:text-purple-500'}`}>
                   {cat}
                 </a>
@@ -171,7 +171,7 @@ const pageDescription = `探索关于${formattedCategory}的文章。深入了
             </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(1).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>

src/pages/zh/blog/posts/modern-ui-tailwind.md

@@ -4,7 +4,7 @@ description: "探索如何使用 Tailwind CSS 创建美观、响应式的用户
 image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=250&fit=crop&crop=center"
 date: "2025年4月20日"
 readTime: "6分钟阅读"
-tags: ["CSS", "Tailwind", "UI/UX"]
+tags: ["CSS", "Tailwind", "UI"]
 slug: "modern-ui-tailwind"
 layout: "../../../../layouts/BlogPostLayout.astro"
 ---

src/pages/zh/blog/tags/[tag].astro

@@ -20,9 +20,9 @@ export async function getStaticPaths() {
     }
   });
   
-  // 为每个标签生成路径
+  // 为每个标签生成路径，对包含特殊字符的标签进行编码
   return Array.from(uniqueTags).map(tag => ({
-    params: { tag },
+    params: { tag: encodeURIComponent(tag) },
     props: { tag }
   }));
 }
@@ -166,7 +166,7 @@ const pageDescription = `浏览带有 #${formattedTag} 标签的文章。深入
                 const tagName = tagItem.slice(1).toLowerCase();
                 const isCurrentTag = tagName === decodedTag.toLowerCase();
                 return (
-                  <a href={`/zh/blog/tags/${tagName}`} 
+                  <a href={`/zh/blog/tags/${encodeURIComponent(tagName)}`} 
                      class={`inline-block px-3 py-1 text-sm rounded-full transition-all duration-200 ${isCurrentTag ? 'bg-purple-500/20 text-purple-500 font-medium' : 'bg-muted text-muted-foreground hover:bg-purple-500/20 hover:text-purple-500'}`}>
                     {tagItem}
                   </a>