feat: implement dynamic title and description in HTML template

- Updated index.html to use placeholders for title and description.
- Enhanced vite.config.ts to transform HTML and replace placeholders with site configuration values.

Signed-off-by: Innei <tukon479@gmail.com>
This commit is contained in:
Innei
2025-06-05 14:28:42 +08:00
parent 024df63885
commit 238cbb71e7
2 changed files with 15 additions and 3 deletions

View File

@@ -6,7 +6,8 @@
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<title>Photo Gallery</title>
<meta name="description" content="{{DESCRIPTION}}" />
<title>{{TITLE}}</title>
</head>
<body>
<div id="root">
@@ -192,7 +193,7 @@
animation: titleSlide 1s ease-out;
"
>
Photo Gallery
{{TITLE}}
</h1>
<div
style="
@@ -219,7 +220,7 @@
opacity: 0;
"
>
Capturing moments, creating memories
{{DESCRIPTION}}
</p>
</div>

View File

@@ -52,6 +52,17 @@ export default defineConfig({
siteUrl: siteConfig.url,
}),
process.env.analyzer && analyzer(),
{
name: 'html-transform',
transformIndexHtml: {
enforce: 'pre',
transform(html: string) {
return html
.replaceAll('{{TITLE}}', siteConfig.title)
.replaceAll('{{DESCRIPTION}}', siteConfig.description)
},
},
},
],
define: {
APP_DEV_CWD: JSON.stringify(process.cwd()),