在项目中导入

大约 1 分钟...

Waline 官方客户端提供多种版本的文件。你可以通过多种方式引入并使用官方客户端。

NPM 包

Waline 官方客户端已通过 @waline/client 发布到 npmopen in new window,你可以通过以下命令安装:

pnpm add -D @waline/client

有关于 @waline/client 导出的模块,详见 客户端参考 → 文件

在普通项目中导入

以下是一个在普通的网站项目中导入并使用 @waline/client 的示例。

import { init } from '@waline/client';

import '@waline/client/dist/waline.css';

init({
  el: '#waline',
  // ...
});

在 Vue 项目中导入

由于 @waline/client 本身基于 Vue3,因此我们直接导出了一个响应式的 Vue 组件。

组件的所有属性都是响应式的,你可以在 客户端参考 → 组件属性 找到全部支持的属性。

案例
<template>
  <Waline :serverURL="serverURL" :path="path" />
</template>
<script setup>
import { Waline } from '@waline/client/component';
import { computed } from 'vue';
import { useRoute } from 'vue-router';

const serverURL = 'https://waline.vercel.app';
const path = computed(() => useRoute().path);
</script>

由于我们使用了响应式的 path,当路由变动时,@waline/client 会自动刷新并显示相应路由的评论。

在 React 项目中导入

只需要简单的包装,你就可以将 Waline 转为 React 组件:

import React, { useEffect, useRef } from 'react';
import { init } from '@waline/client';

import type { WalineInstance, WalineInitOptions } from '@waline/client';

export type WalineOptions = Omit<WalineInitOptions, 'el'> & { path: string };

export const Waline = (props: WalineOptions) => {
  const walineInstanceRef = useRef<WalineInstance | null>(null);
  const containerRef = React.createRef<HTMLDivElement>();

  useEffect(() => {
    walineInstanceRef.current = init({
      ...props,
      el: containerRef.current,
    });

    return () => walineInstanceRef.current?.destroy();
  }, []);

  useEffect(() => {
    walineInstanceRef.current?.update(props);
  }, props);

  return <div ref={containerRef} />;
};
友情提示:评论区仅作评论展示,如有问题咨询请去 Github Discussion 中提问。
你认为这篇文章怎么样?
  • 0
  • 0
  • 0
  • 0
  • 0
  • 0
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.14.7