Waline

# Quick Start

If you want to use Waline in your site, please follow this guide.

# Get APP ID and APP Key

First you need sign in (opens new window) or sign up (opens new window) LeanCloud. Then go to Console (opens new window) click button Create app (opens new window) to create a new app：

After app created, we need click into it. Select Settings > App Keys at the left bottom side, then you can see APP ID, APP Key and Master Key for your app!

# Deploy to Vercel

(opens new window)

Click the blue button, and it will redirect to vercel to deploy with waline template. You need login if you have not, we recommends you sign in with Github. You can input your Vercel project name after you login.

Click Continue go to the next step，and input your new github repo name。The repo will be created and initiallized automatically base on waline example template by Vercel.

OK, repo has been initialized. It's ready to deploy to Vercel! We must set LEAN_ID, LEAN_KEY and LEAN_MASTER_KEY the three environment variables in the "Environment Variables" column. The variables' value are what you get on the previous step in LeanCloud. APP ID is the value of LEAN_ID, and APP Key to LEAN_KEY, Master Key to LEAN_MASTER_KEY.

Click Deploy button to deploy. It will show you deploy successfully after a minitues time. It'll go to deployed site when you click Visit button. Please remember the site's url, we will use it to set serverURL configuration in the next step.

# HTML References

Let us set the serverURL value to the site url previous step got in the configuration object.

<head>
  ..
  <script src='//cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js'></script>
  ...
</head>
<body>
  ...
  <div id="waline"></div>
  <script>
    new Waline({
      el: '#waline',
      path: location.pathname,
      serverURL: 'https://your-domain.vercel.app'
    });
  </script>
</body>

# NPM

You can alose use npm (opens new window) to install Waline instead of CDN link. Install in the CLI like this:

# Install waline
npm install @waline/client --save-dev

// Use import
import Waline from '@waline/client';
// or Use require
const Waline = require('@waline/client');

new Waline({
  el:'#waline',
  // other config
})

# Comment Managment

Waline has a simple admin control panel, we can mange comment data in it. We can register in your site url <serverURL>/ui/register after we deployed successfully. The first register one is administrator. You can see comment management UI after login. Collection it for the next use!

Client Configuration →