76 lines
1.7 KiB
Vue
76 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
const route = useRoute()
|
|
const { locale } = useI18n()
|
|
const gameDataStore = useGameDataStore()
|
|
const { gameName } = storeToRefs(gameDataStore)
|
|
const requestURL = useRequestURL()
|
|
|
|
// BreadcrumbList Schema 생성
|
|
const breadcrumbSchema = computed(() => {
|
|
if (!gameName.value) return null
|
|
|
|
const baseUrl = requestURL.origin
|
|
console.log("🚀 ~ baseUrl:", baseUrl)
|
|
const pathSegments = route.path.split('/').filter(Boolean)
|
|
const currentLocale = pathSegments[0] || locale.value
|
|
|
|
const itemListElement: Array<{
|
|
'@type': string
|
|
position: number
|
|
name: string
|
|
item: string
|
|
}> = [
|
|
{
|
|
'@type': 'ListItem',
|
|
position: 1,
|
|
name: gameName.value,
|
|
item: `${baseUrl}/${currentLocale}`,
|
|
},
|
|
]
|
|
|
|
// 로케일 이후의 경로 세그먼트들을 breadcrumb에 추가
|
|
pathSegments.slice(1).forEach((segment, index) => {
|
|
const path = `/${pathSegments.slice(0, index + 2).join('/')}`
|
|
const displayName = segment
|
|
.replace(/-/g, ' ')
|
|
.replace(/\b\w/g, l => l.toUpperCase())
|
|
|
|
itemListElement.push({
|
|
'@type': 'ListItem',
|
|
position: index + 2,
|
|
name: displayName,
|
|
item: `${baseUrl}${path}`,
|
|
})
|
|
})
|
|
|
|
console.log("🚀 ~ itemListElement:", itemListElement)
|
|
return {
|
|
'@context': 'https://schema.org',
|
|
'@type': 'BreadcrumbList',
|
|
itemListElement,
|
|
}
|
|
})
|
|
|
|
// Schema를 head에 추가
|
|
watchEffect(() => {
|
|
if (breadcrumbSchema.value) {
|
|
useHead({
|
|
script: [
|
|
{
|
|
type: 'application/ld+json',
|
|
innerHTML: JSON.stringify(breadcrumbSchema.value),
|
|
},
|
|
],
|
|
})
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<LayoutsHeader />
|
|
<main class="main-default relative">
|
|
<slot />
|
|
</main>
|
|
<LayoutsFooter />
|
|
</template>
|