CDN 経由で Waline をインポート

このクックブックでは、CDN 経由で Waline をインポートする方法を説明します。

中国本土のユーザーには unpkg の利用を推奨します。それ以外の国のユーザーには jsDelivr の利用を推奨します。

Waline を SSR フレンドリーにするため、V3 では Waline のスタイルを分離しました。つまり、Waline の CSS スタイルファイルとスクリプトファイルをそれぞれ読み込み、Waline を呼び出す必要があります。

コメント

通常はコメント一覧を表示したいはずです。その場合は次のように Waline をインポートします:

<!-- style file -->
<link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css" />
<!-- script file -->
<script type="module">
  import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';

  init({
    // options
  });
</script>

閲覧数とコメント

ホームページや記事一覧で記事の閲覧数とコメント数を表示したいものの、コメントコンポーネントを読み込む必要がない場合があります。その場合は、次の方法で Gzip で 1KB 未満のスクリプトファイルを読み込めます:

閲覧数:

<script type="module">
  import { pageviewCount } from 'https://unpkg.com/@waline/client@v3/dist/pageview.js';

  pageviewCount({
    // options
  });
</script>

コメント数:

<script type="module">
  import { commentCount } from 'https://unpkg.com/@waline/client@v3/dist/comment.js';

  commentCount({
    // options
  });
</script>

補足

バージョンの指定

上の例では、@waline/client の後に @v3 バージョンを明示的に指定していることにお気づきかもしれません。これは、Waline クライアントの新しいメジャーバージョンがリリースされたときにウェブサイトが壊れるのを防ぐため、推奨される方法です。