跳至主要內容

客户端简介

大约 4 分钟...

Waline 官方提供了 @waline/clientopen in new window 客户端,使用 Vue + TypeScript 编写,大小仅为 53kb gzip。

引入

你可以使用 CDN 或 npm 引入 Waline 客户端,我们提供了多种版本的文件以应对的场景。

如果你在此过程中有问题,详见:

调用 Waline

使用 Waline 最简单的方式就是 快速上手中的方式,从 Waline 中导入 init 函数并通过 init(yourOptions) 初始化 Waline 实例。

在初始化选项中,elserverURL 两个选项是必填的。前者为 Waline 挂载的元素或元素选择器,后者为服务端地址。关于 @waline/client 的全部初始化参数,详见 客户端参考 → API

评论数统计

@waline/client 同时也提供评论数统计的分包,你可以在博客的文章列表或其他不含评论的页面调用它展示评论数。,详见 功能 → 评论数统计

浏览量统计

Waline 支持页面浏览量统计,如果你不需要评论服务而只是需要浏览量功能的话,Waline 提供了一个 Gzip 大小不足 1KB 大小的统计插件。

关于 @waline/client 的浏览量统计,详见 功能 → 浏览量统计

丰富的评论格式支持

@waline/client 支持丰富的格式。除了在评论区使用标准的 Markdown 与 GFM 语法扩展外,你还可以嵌入 HTML 标签、使用数学公式以及其他语法,详见 功能 → 支持语法

@waline/client 还支持在评论框中实时预览评论输入,但一些功能因体积原因被默认阉割。如果你希望恢复这些功能,详见:

文章反应

觉得评论太麻烦? Waline 允许你的访客快速表达对文章的反应,比如喜欢、不喜欢、疑惑、无聊、惊喜等,你可以手动启用这个功能,详见 功能 → 文章反应

评论功能

Waline 支持诸多基础功能,包括登录、头像、多语言 和实时预览等功能。

Waline 允许你为用户设置互动等级标签和自定义标签,详见 用户标签

表情选项卡

@waline/client 支持多 Emoji 选项卡,并允许用户通过预设便捷引入 Emoji 选项卡。在官方提供的预设之外,你可以很轻松的创建属于自己的预设。

有关 @waline/client 的表情选项卡,详见:

图片上传

@waline/client 内置了图像上传支持,默认将图片转为 Base64 内嵌,当然,你也可以使用自己喜欢的图床。

关于 @waline/client 的图片上传配置,详见 Cookbook → 自定义图片上传

表情包搜索

@waline/client 通过 giphyopen in new window 提供了表情包搜索功能,并允许你自定义表情包搜索服务,详见:

多语言支持

@waline/client 含有多种语言的内置支持,同时你可以在此基础上新增语言支持或修改 UI 文字,详见:

无障碍支持

Waline 完整支持了全部的无障碍标准:

  • 所有图标与控件均有其对应的无障碍标签。
  • 你可以使用键盘或头戴式指针设备完成与 Waline 所有控件的交互。

这是我们为全球视障及行动障碍人群做出的一点支持!❤️

自定义样式

Waline 带来了内置的暗黑模式支持,同时为了方便用户对 Waline 样式的调整,Waline 提供了很多可配置的 CSS 变量 (CSS Variables)。

详见 自定义样式

高级开发

单页应用支持

Waline 为 SPA(Single Page Application, 单页应用) 带来了支持。

如果你想要在基于 history API 的网站或应用中使用,你可以使用初始化得到的实例上的 update() 方法刷新评论区的配置,也可已使用实例上的 destroy() 方法销毁 Waline。想要了解 @waline/client 的响应性,详见 Cookbook → 响应性

生态环境

你可以很方便的在 Hexo,VuePress 等工具上通过插件使用 Waline,甚至使用第三方客户端。

有关支持 Waline 的第三方客户端、主题与插件,详见 了解更多 → 生态系统

友情提示:评论区仅作评论展示,如有问题咨询请去 Github Discussion 中提问。
你认为这篇文章怎么样?
  • 0
  • 0
  • 0
  • 0
  • 0
  • 0
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v3.1.3