From d913699a277f980ab1658e52866eb0c229eec0aa Mon Sep 17 00:00:00 2001
From: Codex Assistant <codex@example.com>
Date: Fri, 19 Sep 2025 10:29:24 +0800
Subject: [PATCH] Refine blog item metadata layout

---
 mhhung/components/BlogItem.js | 53 +++++++++++++----------------------
 1 file changed, 20 insertions(+), 33 deletions(-)

diff --git a/mhhung/components/BlogItem.js b/mhhung/components/BlogItem.js
index fa01f97..e62c8a8 100644
--- a/mhhung/components/BlogItem.js
+++ b/mhhung/components/BlogItem.js
@@ -46,39 +46,13 @@ export const BlogItem = props => {
           </h2>
 
           {/* 文章資訊 */}
-          <header className='text-md text-[var(--primary-color)] dark:text-gray-300 flex-wrap flex items-center leading-6'>
-            <div className='space-x-2'>
-              <span className='text-sm'>
-                發布於
-                <SmartLink
-                  className='p-1 hover:text-red-400 transition-all duration-200'
-                  href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}>
-                  {post.date?.start_date || post.createdTime}
-                </SmartLink>
-              </span>
-            </div>
-
-            <div className='text-sm'>
-              {/* {post.category && (
-                <SmartLink href={`/category/${post.category}`} className='p-1'>
-                  {' '}
-                  <span className='hover:text-red-400 transition-all duration-200'>
-                    <i className='fa-regular fa-folder mr-0.5' />
-                    {post.category}
-                  </span>
-                </SmartLink>
-              )} */}
-              {post?.tags &&
-                post?.tags?.length > 0 &&
-                post?.tags.map(t => (
-                  <SmartLink
-                    key={t}
-                    href={`/tag/${t}`}
-                    className=' hover:text-red-400 transition-all duration-200'>
-                    <span> #{t}</span>
-                  </SmartLink>
-                ))}
-            </div>
+          <header className='text-sm text-[var(--primary-color)] dark:text-gray-300 leading-6 mb-2'>
+            發布於
+            <SmartLink
+              className='p-1 hover:text-red-400 transition-all duration-200'
+              href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}>
+              {post.date?.start_date || post.createdTime}
+            </SmartLink>
           </header>
 
           <main className='text-[var(--primary-color)] dark:text-gray-300 line-clamp-4 overflow-hidden text-ellipsis relative leading-[1.7]'>
@@ -94,6 +68,19 @@ export const BlogItem = props => {
               </div>
             )}
           </main>
+
+          {post?.tags && post?.tags?.length > 0 && (
+            <div className='mt-2 text-sm text-[var(--primary-color)] dark:text-gray-300 flex flex-wrap gap-2'>
+              {post.tags.map(t => (
+                <SmartLink
+                  key={t}
+                  href={`/tag/${t}`}
+                  className=' hover:text-red-400 transition-all duration-200'>
+                  <span>#{t}</span>
+                </SmartLink>
+              ))}
+            </div>
+          )}
         </article>
       </div>
     </div>