Client Intro
Waline officially provides @waline/client, written in Vue + TypeScript, the size is only 53kb gzip.
Import
You can use CDN or npm to import Waline client, and we provide multiple versions of files to meet different scenarios.
If you have problems during this process, see:
Use Waline
The easiest way to use Waline is the way in the quick start, import the init function from Waline and initialize the Waline instance through init(yourOptions).
In init options, two options el and serverURL are required. The former is the element or element selector mounted by Waline, and the latter is the server address. For all initialization parameters of @waline/client, see Client Reference → API for details.
Comment Counts
@waline/client also provides a sub-package of comment statistics, you can use it to display comment numbers in blog post list or other pages without comments. , see Features → Comment Count for details
Pageview Counts
Waline supports pageview statistics. If you don't need comment service but just pageview function, Waline provides a statistics plugin whose Gzip size is < 1KB.
About @waline/client pageview count, see Features → Pageview Count
Comment Format Support
@waline/client supports many comment syntax. Besides standard Markdown and GFM syntax extensions, you can also embed HTML tags, use mathematical formulas in comment box, see Features → Supported syntax for details.
@waline/client also supports real-time preview of comment input in the comment box, but some functions are dropped by default due to size reasons. If you wish to restore these functions, see:
Article Reaction
Feel that writing a comment is too complicated? Waline allows your visitors to quickly express reactions to articles, such as likes, dislikes, doubts, boredom, surprises, etc. You can manually enable this feature, see Features → Article Reactions .
Comment Features
Waline supports many basic functions, including login, avatar, multilingual and real-time preview.
Waline allows you to set interaction level labels and custom labels for users, see User Labels for details.
Emoji tab
@waline/client supports multiple Emoji tabs, and allows users to easily introduce Emoji tabs through presets. In addition to the official presets, you can easily create your own presets.
For details about the expression tab of @waline/client, see:
Inset Image
@waline/client has built-in image upload support, and by default images are converted to base64. Of course, you can also use your own image hosting service.
For the image upload settings of @waline/client, see Cookbook → Customize Image Upload for details.
Emoji Search
@waline/client provides meme search function through giphy, and allows you to customize search service, see:
Multilingual Support
@waline/client has built-in support for multiple languages, and you can add language support or modify UI text based on this, see:
Accessibility Support
Waline fully supports all accessibility standards:
- All icons and controls have their corresponding accessibility labels.
- You can interact with all of Waline's controls using either a keyboard or a head-mounted pointing device.
This is our little support for the visually impaired and mobility impaired people around the world! ❤️
Customize Outlook
Waline brings built-in dark mode support, and in order to facilitate users to adjust the Waline style, Waline provides many configurable CSS variables (CSS Variables).
See Custom Styles for details.
Advanced Development
Single Page Application Support
Waline brings support for SPA(Single Page Aapplication, Single Page Application).
If you want to use it in a website or application based on the history API, you can use the update() method on the initialized instance to refresh the configuration of the comment area, or use the destroy() method on the instance to destroy it Waline. To learn more about the reactivity of @waline/client, see Cookbook → Reactivity.
Ecosystem
You can easily use Waline through plugins on Hexo, VuePress and other tools, and even use third-party clients.
For third-party clients, themes and plugins that support Waline, see Learn more → Ecosystem.
