mirror of
https://github.com/ChenQihan666/MyBlog-Next.git
synced 2026-08-14 11:29:33 +08:00
Sat Naing
49 lines
1.3 KiB
Plaintext
49 lines
1.3 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 > Post > 'article-name'
|
|
// replace 'article-name' to 'current post'
|
|
if (breadcrumbList[0] === "posts" && breadcrumbList.length > 1) {
|
|
breadcrumbList.splice(1, 1, "current post");
|
|
}
|
|
---
|
|
|
|
<nav class="breadcrumb" aria-label="breadcrumb">
|
|
<ul>
|
|
<li><a href="/">Home</a></li>
|
|
{
|
|
breadcrumbList.map((breadcrumb, index) => (
|
|
<li>
|
|
{index + 1 === breadcrumbList.length ? (
|
|
<span class={`${index > 0 ? "lowercase" : ""}`} aria-current="page">
|
|
{breadcrumb}
|
|
</span>
|
|
) : (
|
|
<a href={`/${breadcrumb}`}>{breadcrumb}</a>
|
|
)}
|
|
</li>
|
|
))
|
|
}
|
|
</ul>
|
|
</nav>
|
|
|
|
<style>
|
|
.breadcrumb {
|
|
@apply max-w-3xl mx-auto px-4 w-full mt-8 mb-1;
|
|
}
|
|
.breadcrumb ul li {
|
|
@apply inline opacity-70 capitalize;
|
|
}
|
|
.breadcrumb ul li + li {
|
|
@apply text-skin-base before:content-[">"];
|
|
}
|
|
.breadcrumb ul li:not(:last-child) {
|
|
@apply hover:opacity-100 hover:before:opacity-70;
|
|
}
|
|
</style>
|