1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
---
import config from 'virtual:starlight/user-config';
const route = Astro.locals.starlightRoute;
const base = config.base || '';
const slug = route.entry?.slug || route.id || '';
const parts = slug.split('/').filter(Boolean);
// Build breadcrumb trail
const breadcrumbs: { label: string; href: string }[] = [];
let currentPath = '';
for (let i = 0; i < parts.length; i++) {
currentPath += '/' + parts[i];
breadcrumbs.push({
label: labelMap(parts[i]) || parts[i],
href: base + currentPath + '/',
});
}
// Replace last breadcrumb label with page title
if (breadcrumbs.length > 0) {
breadcrumbs[breadcrumbs.length - 1].label = route.entry?.data?.title || breadcrumbs[breadcrumbs.length - 1].label;
}
function labelMap(segment: string): string | null {
const map: Record<string, string> = {
'ippan-situmon': '一般質問',
'gian-tou': '議案等',
'hattatu': '発達関連',
'blog': 'ふらっとブログ',
'r7d': '令和7年度', 'r6d': '令和6年度', 'r5d': '令和5年度', 'r4d': '令和4年度',
'r3d': '令和3年度', 'r2d': '令和2年度', 'r1d': '令和元年度',
'6gatu': '6月定例会', '9gatu': '9月定例会',
'12gatu': '12月定例会', '3gatu': '3月定例会',
};
return map[segment] || null;
}
---
{breadcrumbs.length > 0 && (
<nav class="breadcrumbs" aria-label="パンくず">
<ol>
<li><a href="/">ホーム</a></li>
{breadcrumbs.map((crumb, i) => (
<li>
{i < breadcrumbs.length - 1 ? (
<a href={crumb.href}>{crumb.label}</a>
) : (
<span>{crumb.label}</span>
)}
</li>
))}
</ol>
</nav>
)}
<style>
.breadcrumbs ol {
list-style: none;
padding: 0;
margin: 0 0 0.5rem;
font-size: 0.85rem;
color: var(--sl-color-gray-3);
line-height: 1.6;
}
.breadcrumbs li {
display: inline;
}
.breadcrumbs li:not(:last-child)::after {
content: '›';
margin: 0 0.25rem;
}
.breadcrumbs a {
text-decoration: none;
color: var(--sl-color-gray-3);
}
.breadcrumbs a:hover {
color: var(--sl-color-accent);
}
.breadcrumbs span {
color: var(--sl-color-text);
}
</style>
|
