feat(seo): implement dynamic page titles

This commit enhances SEO and user experience by setting dynamic page titles for detail pages and updating the global title configuration.

- Event, Hall of Fame, and News detail pages now use the specific item's title as the page title.
- The global `titleTemplate` and default `title` in `nuxt.config.ts` have been updated for better branding.
- These changes ensure each page has a unique, descriptive title, which is beneficial for search engine ranking and browser tab clarity.

.gitignore

@@ -22,3 +22,5 @@ logs
 .env
 .env.*
 !.env.example
+
+repomix-output.xml

app/pages/events/[slug].vue

@@ -56,6 +56,10 @@ const { data: event } = await useAsyncData('event-detail', () =>
     .path(`/events/${route.params.slug}`)
     .first()
 )
+
+useHead({
+  title: event.value?.title
+})
 </script>
 
 <style scoped></style>

app/pages/hall-of-fames/[slug].vue

@@ -24,7 +24,8 @@
               class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110" />
             <div
               class="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-all duration-300 flex items-center justify-center">
-              <Icon name="mdi:like" class="w-12 h-12 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300"/>
+              <Icon name="mdi:like"
+                class="w-12 h-12 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
             </div>
           </div>
         </div>
@@ -40,6 +41,10 @@ const { data: person } = await useAsyncData('hall-of-fames-detail', () =>
     .path(`/hall-of-fames/${route.params.slug}`)
     .first()
 )
+
+useHead({
+  title: person.value?.name
+})
 </script>
 
 <style></style>

app/pages/news/[slug].vue

@@ -24,6 +24,10 @@ const { data: n } = await useAsyncData('new-detail', () =>
     .path(`/news/${route.params.slug}`)
     .first()
 )
+
+useHead({
+  title: n.value?.title
+})
 </script>
 
 <style></style>

nuxt.config.ts

@@ -19,8 +19,8 @@ export default defineNuxtConfig({
   },
   app: {
     head: {
-      titleTemplate: "%s - 永平中学校友会",
-      title: "永平中学校友会",
+      titleTemplate: "%s | 永中校友会",
+      title: "永中校友圈",
       script: [
         {
           src: "/analytics.js",

public/Logo.svg

@@ -1,7 +1,8 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 26.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve">
+	 viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve"
+	 width="200" height="200">
 <style type="text/css">
 	.st0{fill:#FFCC00;stroke:#000000;stroke-width:8.0717;stroke-miterlimit:10;}
 	.st1{fill:#C51A1B;}
@@ -16,18 +17,6 @@
 	.st10{fill:#FFFFFF;}
 	.st11{fill:none;stroke:#FFFFFF;stroke-width:1.9665;stroke-miterlimit:10;}
 </style>
-<g id="Border">
-</g>
-<g id="Red_Circle">
-</g>
-<g id="Blue_Cirle">
-</g>
-<g id="Sun">
-</g>
-<g id="Triangle">
-</g>
-<g id="Decorations">
-</g>
 <g id="Text">
 	<g>
 		<g>