update docs

Author: Innei

content/docs/themes/yohaku/config.mdx

@@ -45,9 +45,16 @@ Yohaku 的配置沿用 Shiro 的配置体系，在 Mix Space 后台「配置与
 
 ### Title 模板 (`title.template`)
 
-包括多个元素（如 `h1`, `code`, `span`），每个元素都可以自定义文本内容和样式（通过 CSS 类）。
+包括多个元素（如 `span`, `code`, `h1` 等），每个元素都可以自定义文本内容和样式。
 
-**如何使用**: 修改 `text` 和 `class` 字段来自定义标题的文本内容和样式。你可以通过添加或删除元素来调整标题的结构。
+| 字段 | 类型 | 说明 |
+|------|------|------|
+| `type` | `string` | 渲染标签，如 `span`、`code`、`br`。`br` 表示显式换行。 |
+| `text` | `string` | 文本内容。 |
+| `class` | `string` | Tailwind CSS 类名。 |
+| `style` | `object` | **推荐**。内联样式对象，可直接写 CSS 属性（如 `fontWeight`、`color`、`animation` 等），不依赖 Tailwind JIT 扫描，且能跟随 CSS 变量自动适配暗色主题。 |
+
+**如何使用**: 修改 `text` 和 `style` 字段来自定义标题的文本内容和样式。你可以通过添加或删除元素来调整标题的结构。
 
 ### 描述 (`description`)
 
@@ -208,15 +215,60 @@ interface Hitokoto {
     "hero": {
       "title": {
         "template": [
-          { "type": "h1", "text": "Hi, I'm ", "class": "font-light text-4xl" },
-          { "type": "h1", "text": "Name", "class": "font-medium mx-2 text-4xl" },
-          { "type": "h1", "text": "👋。", "class": "font-light text-4xl" },
+          {
+            "type": "span",
+            "text": "Hi, I'm ",
+            "style": { "fontWeight": 300, "opacity": 0.85 }
+          },
+          {
+            "type": "span",
+            "text": "Innei",
+            "style": {
+              "fontWeight": 500,
+              "color": "var(--color-accent)",
+              "letterSpacing": "-0.02em"
+            }
+          },
+          {
+            "type": "span",
+            "text": " 👋",
+            "style": {
+              "fontWeight": 300,
+              "display": "inline-block",
+              "transform": "rotate(-8deg)"
+            }
+          },
           { "type": "br" },
-          { "type": "h1", "text": "A ", "class": "font-light text-4xl" },
+          {
+            "type": "span",
+            "text": "A NodeJS Full Stack ",
+            "style": { "fontWeight": 300, "opacity": 0.8 }
+          },
           {
             "type": "code",
             "text": "<Developer />",
-            "class": "font-medium mx-2 text-3xl rounded p-1"
+            "style": {
+              "display": "inline-block",
+              "fontFamily": "var(--font-mono)",
+              "fontSize": "0.72em",
+              "fontWeight": 500,
+              "padding": "0.25em 0.55em",
+              "borderRadius": "0.35em",
+              "backgroundColor": "color-mix(in srgb, var(--color-accent) 10%, transparent)",
+              "color": "var(--color-accent)",
+              "border": "1px solid color-mix(in srgb, var(--color-accent) 22%, transparent)"
+            }
+          },
+          {
+            "type": "span",
+            "style": {
+              "display": "inline-block",
+              "width": "2px",
+              "height": "0.9em",
+              "backgroundColor": "var(--color-accent)",
+              "marginLeft": "2px",
+              "animation": "blink 1.2s linear infinite"
+            }
           }
         ]
       },