Import Waline via CDN

This cookbook is about importing Waline via CDN.

For China Mainland users, we recommend using unpkg. For foreign users, we recommend using jsDelivr.

Since V3, Waline's styles are provided as a separate CSS file to keep the client SSR friendly. This means you need to import Waline's CSS style file, then import and call the Waline script file.

Comment

Normally, you may want Waline to render a list of comments, you can import Waline as follows:

<!-- 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>

Pageviews and comments

Sometimes, you may want to display the number of page views and comments of the article on the home page or article list, but do not need to load the comment component, then you can import a Gzip < 1KB script file in the following ways:

Pageviews:

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

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

Comments count:

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

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

More

Specifies version

You may have noticed that in the above examples we explicitly declared the @v3 version after @waline/client. This is recommended because it prevents your website from breaking when a new major version of the Waline client is released.