From 601f3f06ce957158db585ec3eb1040f2342e4531 Mon Sep 17 00:00:00 2001
From: joyzhao <zhaoguiyang18@gmail.com>
Date: Thu, 19 Jun 2025 13:30:10 +0800
Subject: [PATCH] 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    | 6 +++---
 src/pages/blog/posts/modern-ui-tailwind.md    | 2 +-
 src/pages/blog/tags/[tag].astro               | 6 +++---
 src/pages/zh/blog/categories/[category].astro | 6 +++---
 src/pages/zh/blog/posts/modern-ui-tailwind.md | 2 +-
 src/pages/zh/blog/tags/[tag].astro            | 6 +++---
 6 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/pages/blog/categories/[category].astro b/src/pages/blog/categories/[category].astro
index 4ab49c1..ada5190 100644
--- a/src/pages/blog/categories/[category].astro
+++ b/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>
diff --git a/src/pages/blog/posts/modern-ui-tailwind.md b/src/pages/blog/posts/modern-ui-tailwind.md
index e78cc13..697c643 100644
--- a/src/pages/blog/posts/modern-ui-tailwind.md
+++ b/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"
 ---
diff --git a/src/pages/blog/tags/[tag].astro b/src/pages/blog/tags/[tag].astro
index 0f3ff70..a044c36 100644
--- a/src/pages/blog/tags/[tag].astro
+++ b/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>
diff --git a/src/pages/zh/blog/categories/[category].astro b/src/pages/zh/blog/categories/[category].astro
index 4fdc87c..2372856 100644
--- a/src/pages/zh/blog/categories/[category].astro
+++ b/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>
diff --git a/src/pages/zh/blog/posts/modern-ui-tailwind.md b/src/pages/zh/blog/posts/modern-ui-tailwind.md
index e04d1c3..7e12689 100644
--- a/src/pages/zh/blog/posts/modern-ui-tailwind.md
+++ b/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"
 ---
diff --git a/src/pages/zh/blog/tags/[tag].astro b/src/pages/zh/blog/tags/[tag].astro
index e0e108d..21c0820 100644
--- a/src/pages/zh/blog/tags/[tag].astro
+++ b/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>