feat(theme): use v-html in VPDocFooter (#1580)

examples/configured/.vitepress/config.js

@@ -16,6 +16,15 @@ export default defineConfig({
             }
           ]
         },
+        {
+          text: '& &#60;Text Literals &> <code>code</code>',
+          items: [
+            {
+              text: '& &#60;Test Page &> <code>code</code>',
+              link: '/text-literals/'
+            }
+          ]
+        },
         {
           text: 'Static Data',
           items: [

examples/configured/__test__/multisidebar.spec.ts

@@ -17,6 +17,7 @@ describe('test multi sidebar sort root', () => {
     const sidebarContent = await sidebarLocator.allTextContents()
     expect(sidebarContent).toEqual([
       'Frontmatter',
+      '& <Text Literals &> code',
       'Static Data',
       'Multi Sidebar Test'
     ])

examples/configured/text-literals/index.md

@@ -0,0 +1,5 @@
+---
+title: Text Literals
+---
+
+# Text Literals Test

src/client/theme-default/components/VPDocFooter.vue

@@ -42,14 +42,14 @@ const showFooter = computed(() => {
     <div v-if="control.prev || control.next" class="prev-next">
       <div class="pager">
         <a v-if="control.prev" class="pager-link prev" :href="normalizeLink(control.prev.link)">
-          <span class="desc">{{ theme.docFooter?.prev ?? 'Previous page' }}</span>
+          <span class="desc" v-html="theme.docFooter?.prev ?? 'Previous page'"></span>
-          <span class="title">{{ control.prev.text }} </span>
+          <span class="title" v-html="control.prev.text"></span>
         </a>
       </div>
       <div class="pager" :class="{ 'has-prev': control.prev }">
         <a v-if="control.next" class="pager-link next" :href="normalizeLink(control.next.link)">
-          <span class="desc">{{ theme.docFooter?.next ?? 'Next page' }}</span>
+          <span class="desc" v-html="theme.docFooter?.next ?? 'Next page'"></span>
-          <span class="title">{{ control.next.text }}</span>
+          <span class="title" v-html="control.next.text"></span>
         </a>
       </div>
     </div>