reonokiy/blog
1
0
Fork 0
mirror of https://github.com/reonokiy/blog.nokiy.net.git synced 2025-06-16 19:51:07 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: improve view transition naming and post metadata handling

Browse source 
- Remove hardcoded 'theme-introduction' slug from multilingual post files
- Update view transition names to be more consistent and dynamic
- Separate date and reading time into individual transition elements
- Ensure fallback for slug in transition and link generation
This commit is contained in:
radishzzz 2025-02-15 21:31:01 +00:00
parent 9d6de20b6a
commit 67bc3a63c9
7 changed files with 28 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/pages/index.astro
View file

@ -38,19 +38,23 @@ const postsByYear = await getPostsByYear()
<li class="mt-7">
{/* Post Title */}
<a
class="hover:c-primary"
href={`/posts/${post.data.slug || post.slug}`}
transition:name={`post-title-${post.data.slug}`}>
class="hover:c-primary"
href={`/posts/${post.data.slug || post.slug}`}
transition:name={`post-${post.data.slug || post.slug}`}
>
{post.data.title}
</a>
{/* Post Date */}
<div
class="mb-9 block text-5.6 leading-11 font-time lg:ml-4 lg:inline"
transition:name={`post-time-${post.data.slug}`}
>
{/* Post Date */}
<div class="mb-9 block text-5.6 leading-11 font-time lg:ml-4 lg:inline">
<span transition:name={`date-${post.data.slug || post.slug}`}>
{post.data.published.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-')}
{post.remarkPluginFrontmatter?.minutes && <span class="ml-2"> {post.remarkPluginFrontmatter.minutes} min</span>}
</div>
</span>
{post.remarkPluginFrontmatter?.minutes && (
<span class="ml-2" transition:name={`time-${post.data.slug || post.slug}`}>
{post.remarkPluginFrontmatter.minutes} min
</span>
)}
</div>
</li>
))}
</ul>

14
src/pages/posts/[slug].astro
View file

@ -25,10 +25,16 @@ const { Content, remarkPluginFrontmatter } = await post.render()
postImage={post.data.image}
>
<article class="heti">
<h1 transition:name={`post-title-${post.data.slug}`}>{post.data.title}</h1>
<time transition:name={`post-time-${post.data.slug}`}>
{post.data.published.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit' }).replace('/', '-')}
{remarkPluginFrontmatter.minutes && <span> · {remarkPluginFrontmatter.minutes} min</span>}
<h1 transition:name={`post-${post.data.slug || post.slug}`}>{post.data.title}</h1>
<time>
<span transition:name={`date-${post.data.slug || post.slug}`}>
{post.data.published.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit' }).replace('/', '-')}
</span>
{remarkPluginFrontmatter.minutes && (
<span transition:name={`time-${post.data.slug || post.slug}`}>
· {remarkPluginFrontmatter.minutes} min
</span>
)}
</time>
<Content />
</article>