feat: handle titleTemplate in _dir.yml

nuxt-themes · Sep 14, 2022 · 3d11777 · 3d11777 · vercel · Sep 14, 2022
1 parent 5f57e50
commit 3d11777
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/theme/components/AppLayout.vue b/theme/components/AppLayout.vue
@@ -1,5 +1,15 @@
 <script setup lang="ts">
 const docus = useDocus()
+const { navigation, page } = useContent()
+const { navKeyFromPath } = useContentHelpers()
+
+const titleTemplate = computed(() => {
+  const appTitleTemplate = docus.value.head?.titleTemplate || `%s | ${docus.value.title}`
+  if (page.value) {
+    return page.value.head?.titleTemplate || navKeyFromPath(page.value._path, 'titleTemplate', navigation.value) || appTitleTemplate
+  }
+  return appTitleTemplate
+})
 
 defineProps({
   padded: {
@@ -9,13 +19,17 @@ defineProps({
 })
 
 useHead({
-  titleTemplate: `%s | ${docus.value.title}`,
+  titleTemplate: titleTemplate.value,
   meta: [
     { name: 'twitter:card', content: 'summary_large_image' }
   ]
 })
 
-useContentHead(docus.value)
+watch(titleTemplate, () => {
+  useHead({ titleTemplate: titleTemplate.value })
+})
+
+useContentHead(docus.value as any)
 </script>
 
 <template>

diff --git a/theme/nuxt.config.ts b/theme/nuxt.config.ts
@@ -60,7 +60,7 @@ export default defineNuxtConfig({
       preload: ['json', 'js', 'ts', 'html', 'css', 'vue', 'diff', 'shell', 'markdown', 'yaml', 'bash', 'ini']
     },
     navigation: {
-      fields: ['icon']
+      fields: ['icon', 'titleTemplate']
     }
   },
   colorMode: {