doc: update doc layout

Author: tangjinzhou

site/src/components/DemoBox.vue

@@ -142,9 +142,14 @@ export default defineComponent({
     const docHtml = computed(() =>
       props.jsfiddle && props.jsfiddle.docHtml
         ? (
-            props.jsfiddle.docHtml
-              .replace('<h2 id="zh-CN">zh-CN</h2>', '')
-              .split('<h2 id="en-US">en-US</h2>')[globalConfig.isZhCN.value ? 0 : 1] || ''
+            props.jsfiddle.docHtml.replace(
+              `<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
+          <span aria-hidden="true" class="anchor">#</span>
+        </a></h2>`,
+              '',
+            ).split(`<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
+          <span aria-hidden="true" class="anchor">#</span>
+        </a></h2>`)[globalConfig.isZhCN.value ? 0 : 1] || ''
           ).trim()
         : '',
     );

site/src/layouts/Demo.vue

@@ -34,15 +34,15 @@ export default defineComponent({
       return props?.pageData?.html || '';
     });
     const description = computed(() => {
-      return docHtml.value.split('<h2 id="API">API</h2>')[0];
+      return docHtml.value.split('<h2 id="API">API <a class="header-anchor" href="#API">')[0];
     });
     const api = computed(() => {
       return `
       <h2 id="API"><span>API</span><a href="#API" class="anchor">#</a></h2>
-      ${docHtml.value.split('<h2 id="API">API</h2>')[1]}
+      ${docHtml.value.split('<h2 id="API">API <a class="header-anchor" href="#API">')[1]}
       `;
     });
-    return { frontmatter, description, api, route, showAd };
+    return { frontmatter, description, api, route, showAd, docHtml };
   },
 });
 </script>