mirror of
https://github.com/ChenQihan666/MyBlog-Next.git
synced 2026-08-14 11:29:33 +08:00
80e67a1dca
* feat: add modified datetime in blog posts Add modDatetime in blogSchema. Update Datetime component to accept modDatetime. Update sorting logic. Rename datetime to pubDatetime in Datetime component. Closes: #134 * feat: add published_time & modified_time meta tags * docs: update related blog posts to be up-to-date * fix: remove extra spaces in breadcrumbs
61 lines
1.5 KiB
Plaintext
61 lines
1.5 KiB
Plaintext
---
|
|
// Remove current url path and remove trailing slash if exists
|
|
const currentUrlPath = Astro.url.pathname.replace(/\/+$/, "");
|
|
|
|
// Get url array from path
|
|
// eg: /tags/tailwindcss => ['tags', 'tailwindcss']
|
|
const breadcrumbList = currentUrlPath.split("/").slice(1);
|
|
|
|
// if breadcrumb is Home > Posts > 1 <etc>
|
|
// replace Posts with Posts (page number)
|
|
breadcrumbList[0] === "posts" &&
|
|
breadcrumbList.splice(0, 2, `Posts (page ${breadcrumbList[1] || 1})`);
|
|
---
|
|
|
|
<nav class="breadcrumb" aria-label="breadcrumb">
|
|
<ul>
|
|
<li>
|
|
<a href="/">Home</a>
|
|
<span aria-hidden="true">></span>
|
|
</li>
|
|
{
|
|
breadcrumbList.map((breadcrumb, index) =>
|
|
index + 1 === breadcrumbList.length ? (
|
|
<li>
|
|
<span
|
|
class={`${index > 0 ? "lowercase" : "capitalize"}`}
|
|
aria-current="page"
|
|
>
|
|
{/* make the last part lowercase in Home > Tags > some-tag */}
|
|
{decodeURIComponent(breadcrumb)}
|
|
</span>
|
|
</li>
|
|
) : (
|
|
<li>
|
|
<a href={`/${breadcrumb}`}>{breadcrumb}</a>
|
|
<span aria-hidden="true">></span>
|
|
</li>
|
|
)
|
|
)
|
|
}
|
|
</ul>
|
|
</nav>
|
|
|
|
<style>
|
|
.breadcrumb {
|
|
@apply mx-auto mb-1 mt-8 w-full max-w-3xl px-4;
|
|
}
|
|
.breadcrumb ul li {
|
|
@apply inline;
|
|
}
|
|
.breadcrumb ul li a {
|
|
@apply capitalize opacity-70;
|
|
}
|
|
.breadcrumb ul li span {
|
|
@apply opacity-70;
|
|
}
|
|
.breadcrumb ul li:not(:last-child) a {
|
|
@apply hover:opacity-100;
|
|
}
|
|
</style>
|