优化标题逻辑

templates/default.html

@@ -115,14 +115,14 @@
         .square-2 { top: 45%; right: 80px; }
         .square-3 { bottom: 20%; left: 100px; transform: rotate(45deg); }
         
-        /* Topic section */
-        .topic-wrapper {
+        /* Video title section */
+        .video-title-wrapper {
             position: relative;
             max-width: 800px;
             text-align: center;
         }
         
-        .topic-ornament-top {
+        .video-title-ornament-top {
             position: absolute;
             top: -40px;
             left: 50%;
@@ -145,7 +145,7 @@
             background: rgba(149, 165, 166, 0.65);
         }
         
-        .topic {
+        .video-title {
             font-size: 68px;
             font-weight: 600;
             color: #1a252f;
@@ -154,7 +154,7 @@
             position: relative;
         }
         
-        .topic::after {
+        .video-title::after {
             content: '';
             position: absolute;
             bottom: -20px;
@@ -460,15 +460,15 @@
     </div>
     
     <div class="page-container">
-        <div class="topic-wrapper">
+        <div class="video-title-wrapper">
             <!-- Top ornament -->
-            <div class="topic-ornament-top">
+            <div class="video-title-ornament-top">
                 <div class="ornament-line"></div>
                 <div class="ornament-dot"></div>
                 <div class="ornament-line"></div>
             </div>
             
-            <div class="topic">{{topic}}</div>
+            <div class="video-title">{{title}}</div>
         </div>
         
         <div class="image-wrapper">

templates/modern.html

@@ -149,12 +149,12 @@
         }
         
         /* Header with icon decoration */
-        .topic-wrapper {
+        .video-title-wrapper {
             position: relative;
             text-align: center;
         }
         
-        .topic-decoration {
+        .video-title-decoration {
             position: absolute;
             top: -30px;
             left: 50%;
@@ -163,17 +163,17 @@
             gap: 8px;
         }
         
-        .topic-dot {
+        .video-title-dot {
             width: 10px;
             height: 10px;
             border-radius: 50%;
         }
         
-        .topic-dot:nth-child(1) { background: #FF6B9D; }
-        .topic-dot:nth-child(2) { background: #4ECDC4; }
-        .topic-dot:nth-child(3) { background: #FFE66D; }
+        .video-title-dot:nth-child(1) { background: #FF6B9D; }
+        .video-title-dot:nth-child(2) { background: #4ECDC4; }
+        .video-title-dot:nth-child(3) { background: #FFE66D; }
         
-        .topic {
+        .video-title {
             font-size: 72px;
             font-weight: bold;
             color: white;
@@ -184,8 +184,8 @@
             display: inline-block;
         }
         
-        .topic::before,
-        .topic::after {
+        .video-title::before,
+        .video-title::after {
             content: '';
             position: absolute;
             width: 70px;
@@ -194,11 +194,11 @@
             top: 50%;
         }
         
-        .topic::before {
+        .video-title::before {
             left: -90px;
         }
         
-        .topic::after {
+        .video-title::after {
             right: -90px;
         }
         
@@ -492,11 +492,11 @@
     </div>
     
     <div class="page-container">
-        <div class="topic-wrapper">
-            <div class="topic-decoration">
-                <div class="topic-dot"></div>
-                <div class="topic-dot"></div>
-                <div class="topic-dot"></div>
+        <div class="video-title-wrapper">
+            <div class="video-title-decoration">
+                <div class="video-title-dot"></div>
+                <div class="video-title-dot"></div>
+                <div class="video-title-dot"></div>
             </div>
             
             <!-- Bookmark decoration -->
@@ -504,7 +504,7 @@
                 <path d="M2 0h20v32l-10-6-10 6V0z"/>
             </svg>
             
-            <div class="topic">{{topic}}</div>
+            <div class="video-title">{{title}}</div>
         </div>
         
         <div class="image-wrapper">

templates/neon.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>{{topic}}</title>
+  <title>{{title}}</title>
   <style>
     :root {
       --bg: #0b0f1a;
@@ -865,7 +865,7 @@
 
     <!-- Header -->
     <header class="header" role="banner">
-      <h1 class="title">{{topic}}</h1>
+      <h1 class="title">{{title}}</h1>
       <div class="title-meta" role="list">
         <div class="chip" role="listitem"><span class="dot"></span>读书短视频</div>
         <div class="chip" role="listitem"><span class="dot pink"></span>思维提升</div>
@@ -874,7 +874,7 @@
     </header>
 
     <!-- Media -->
-    <section class="media" role="img" aria-label="Illustration for the topic">
+    <section class="media" role="img" aria-label="Illustration for the video">
       <!-- Corner indicators -->
       <div class="corner-indicator tl"></div>
       <div class="corner-indicator tr"></div>
@@ -893,7 +893,7 @@
         <div class="badge-dot pink"></div>
       </div>
       
-      <img src="{{image}}" alt="图像：{{topic}}">
+      <img src="{{image}}" alt="图像：{{title}}">
     </section>
 
     <!-- Caption -->