怎么在vitepress中部署 waline评论,希望各位大佬能教我一下 || How to deploy waline in vitepress, I hope you guys can teach me

[XingJi-love]

问题描述 | Describe the bug

怎么在vitepress中部署 waline评论

问题网站 | Website URL

https://vitepress.xingji.fun/

服务部署在哪里？ | Where your waline deploy?

Vercel (Default)

数据存储在哪里？| Where your comment data store?

LeanCloud(https://leancloud.app)

---

Problem description | Describe the bug

How to deploy waline comments in vitepress

Question Website | Website URL

https://vitepress.xingji.fun/

Where is the service deployed? | Where your waline deploy?

Vercel (Default)

Where is the data stored? | Where your comment data store?

LeanCloud(https://leancloud.app)

[track23]

没有用过vitepres，这是bing的第一条。https://j33h22.github.io/Articles/Technolgies/VitePress-Waline

看着挺简单的。

---

I have never used vitepres before, this is the first one for Bing. https://j33h22.github.io/Articles/Technolgies/VitePress-Waline

It looks pretty simple.

[MWTJC]

/.vitepress/theme/components 里，建一个Waline.vue，内容抄官方文档，const serverURL 填从外部可调用的Waline服务端网址，然后/.vitepress/theme/index.ts 里：
h函数法：

import Waline from './components/Waline.vue'

// ...

export default {
    extends: DefaultTheme,
    Layout: () => {
        const LayoutWrapper = {
            setup() {
                return () => h(DefaultTheme.Layout, null, {
                    // ...
                    'doc-after': () => h(Waline),
                    // ...
                })
            }
        }
        return h(LayoutWrapper)
    },
    enhanceApp({ app, router }) {
        app.component('Waline', Waline)
        }

    },

基础应该就行了

---

In /.vitepress/theme/components, create a Waline.vue, the content is copied from [official document] (https://waline.js.org/cookbook/import/project.html#imported in -vue-project), const serverURL fills in the Waline server URL that can be called from the outside, and then in /.vitepress/theme/index.ts:
h function method:

import Waline from './components/Waline.vue'

// ...

export default {
    extends: DefaultTheme,
    Layout: () => {
        const LayoutWrapper = {
            setup() {
                return () => h(DefaultTheme.Layout, null, {
                    // ...
                    'doc-after': () => h(Waline),
                    // ...
                })
            }
        }
        return h(LayoutWrapper)
    },
    enhanceApp({ app, router }) {
        app.component('Waline', Waline)
        }

    },

The basics should be enough