feat: support line wrap for category description.

src/content/categories/article.yml

@@ -2,5 +2,6 @@ name: 文章
 slug: article
 description: |-
   我在寻找一个声音，期待着它把书影里的音符唱给你们听。
-  记录一本书、一个作者、一部电影及其与生活之间丝丝缕缕的情。我热爱书和电影，更热爱生活，希望我们都有着走不完的似水流年，说不完的逝水年华。
+  记录一本书、一个作者、一部电影及其与生活之间丝丝缕缕的情。
+  我热爱书和电影，更热爱生活，希望我们都有着走不完的似水流年，说不完的逝水年华。
 cover: /images/categories/article.jpg

src/content/categories/gossip.yml

@@ -1,5 +1,7 @@
 name: 杂谈
 slug: gossip
 description: |-
-  我读书不过为消遣，偶至有趣处，便欣然记下。不敢说集腋成裘，但聊作敝帚自珍。有伟人说，科学的世界像是海洋，他像在海边玩耍的孩子，偶尔捡拾到几只贝壳，他就很高兴。海洋的比喻也可用作浩瀚的文史，行走在文史的典籍里，偶尔捡到一些边角料，也同样令人兴奋。
+  我读书不过为消遣，偶至有趣处，便欣然记下。不敢说集腋成裘，但聊作敝帚自珍。
+  有伟人说，科学的世界像是海洋，他像在海边玩耍的孩子，偶尔捡拾到几只贝壳，他就很高兴。
+  海洋的比喻也可用作浩瀚的文史，行走在文史的典籍里，偶尔捡到一些边角料，也同样令人兴奋。
 cover: /images/categories/gossip.jpg

src/content/categories/novel.yml

@@ -1,5 +1,6 @@
 name: 小说
 slug: novel
 description: |-
-  在这个世界里没有朝霞的红，没有苔藓的绿，没有夜来香的黄，没有橡木的棕，也没有深海的蓝。有的只是孩子们张惶不安的丈量世界，换来一声叹息。
+  在这个世界里，没有朝霞的红，没有苔藓的绿，没有夜来香的黄，没有橡木的棕，也没有深海的蓝。
+  有的只是孩子们张惶不安地丈量世界，换来一声叹息。
 cover: /images/categories/novel.jpg

src/content/config.ts

@@ -53,7 +53,7 @@ const categoriesCollection = defineCollection({
     name: z.string().max(20),
     slug: slug(),
     cover: image(defaultCover),
-    description: z.string().max(999).optional(),
+    description: z.string().max(999).optional().default(''),
   }),
 });
 

src/layouts/posts/CategoriesLayout.astro

@@ -32,7 +32,7 @@ const { title } = Astro.props;
                         {category.name}
                       </a>
                       <div class="list-subtitle d-none d-md-block text-md text-secondary mt-2">
-                        <div class="h-1x">{category.description}</div>
+                        <div class="h-1x">{category.description.split('\n')[0]}</div>
                       </div>
                     </div>
                     <div class="list-footer mt-2">

src/layouts/posts/CategoryLayout.astro

@@ -21,7 +21,9 @@ const { currentPosts, totalPage } = slicePosts(posts, pageNum, options.settings.
     <div class="container">
       <div class="mb-3 mb-lg-4">
         <h1>{category.name}</h1>
-        <div class="text-muted mt-1">{category.description}</div>
+        <div class="text-muted mt-1">
+          {category.description.split('\n').map((line) => (line !== '' ? <p>{line}</p> : ''))}
+        </div>
       </div>
       <div class="row g-2 g-md-3 g-xxl-4 list-grouped">
         {currentPosts.map((post, index) => <PostSquare post={post} first={index === 0} />)}