クライアントの紹介

約2分...

Waline は公式に @waline/client を提供しています。Vue + TypeScript で書かれており、gzip サイズはわずか 100kb です。

インポート

Waline クライアントは CDN または npm でインポートできます。さまざまなシナリオに対応するため、複数のバージョンのファイルを用意しています。

この過程で問題が発生した場合は、次を参照してください：

Waline を使う

Waline を使う最も簡単な方法はクイックスタートで詳しく説明している方法です。Waline から init 関数をインポートし、init(yourOptions) で Waline インスタンスを初期化します。

init のオプションのうち、el と serverURL は必須です。前者は Waline をマウントする要素または要素セレクター、後者はサーバーのアドレスです。@waline/client のすべての初期化パラメータについてはクライアントリファレンス → API を参照してください。

コメント数

@waline/client はコメント統計用のサブパッケージも提供しています。これを使って、ブログの記事一覧やコメント欄のないページにコメント数を表示できます。詳しくは機能 → コメント数を参照してください。

閲覧数

Waline は閲覧数の統計に対応しています。コメントサービスは不要で閲覧数機能だけを使いたい場合、Waline は Gzip サイズが 1KB 未満の閲覧数統計プラグインを提供しています。

@waline/client の閲覧数カウントの詳細は機能 → 閲覧数を参照してください。

コメントの書式サポート

@waline/client は多くのコメント構文と豊富な書式に対応しています。標準の Markdown と GFM の拡張構文に加え、コメントしたユーザーは HTML タグの埋め込みや数式の利用なども行えます。その他の構文については機能 → 対応する書式を参照してください。

@waline/client はコメント欄での入力内容のリアルタイムプレビューにも対応しています。ただし、サイズの都合で一部の機能はデフォルトで省略されています。これらの機能を復元したい場合は、次を参照してください：

記事へのリアクション

コメントは面倒だと感じていませんか。Waline なら、訪問者が記事に対して「いいね」「よくないね」「疑問」「退屈」「驚き」といったリアクションを手軽に表明できます。この機能を手動で有効にする方法は機能 → 記事へのリアクションを参照してください。

コメント機能

Waline はログイン、アバター、多言語、リアルタイムプレビューといった基本的な機能を多数サポートしています。

Waline では、ユーザーにインタラクションレベルのラベルとカスタムラベルを設定できます。詳しくはユーザーラベルを参照してください。

絵文字タブ

@waline/client は複数の絵文字タブに対応しており、プリセットを通じて簡単に絵文字タブを導入できます。公式のプリセットに加えて、独自のプリセットも簡単に作成できます。

@waline/client の絵文字タブの詳細は次を参照してください：

画像の挿入

@waline/client は画像アップロードを標準でサポートしています。デフォルトでは画像は base64 に変換されます。独自の画像ホスティングサービスを利用することもできます。

@waline/client の画像アップロード設定の詳細はクックブック → 画像アップロードのカスタマイズを参照してください。

絵文字検索

@waline/client は giphy 経由でミームと絵文字の検索機能を提供しており、検索サービスをカスタマイズできます。次を参照してください：

多言語対応

@waline/client は多言語を標準でサポートしており、これを基に言語サポートを追加したり UI テキストを変更したりできます。次を参照してください：

アクセシビリティ対応

Waline はすべてのアクセシビリティ標準に完全対応しています：

すべてのアイコンとコントロールには、対応するアクセシビリティラベルがあります。
Waline のすべてのコントロールは、キーボードまたはヘッドマウント型ポインティングデバイスで操作できます。

これは、世界中の視覚障害や運動機能障害を持つ人々を支えるための私たちの取り組みです！ ❤️

カスタマイズ可能なスタイル

Waline はダークモードのサポートを標準で備えています。ユーザーが Waline のスタイルを調整しやすいように、設定可能な CSS 変数を多数提供しています。

詳しくはスタイルのカスタマイズを参照してください。

高度な開発

シングルページアプリケーション対応

Waline は SPA（シングルページアプリケーション）に対応しています。

history API ベースのウェブサイトやアプリケーションで Waline を使う場合は、初期化したインスタンスの update() メソッドでコメント欄の設定を更新したり、インスタンスの destroy() メソッドで Waline を破棄したりできます。@waline/client のリアクティブ性について詳しくはクックブック → リアクティブ性を参照してください。

エコシステム

Hexo や VuePress などのツールのプラグイン、さらにはサードパーティ製クライアントを通じて、簡単に Waline を利用できます。

Waline に対応したサードパーティ製クライアント、テーマ、プラグインについては詳しく知る → エコシステムを参照してください。

TIPS: コメントエリアはデモ用です。質問がある場合は、Github Discussion で質問してください。