Get Started
Welcome to Waline. In just a few steps, you can enable Waline to provide comments and pageviews on your site.
LeanCloud Settings (Database)
Click Create app button to create a new app and enter a name you like:
Create App Enter the app, then select
Settings
>App Keys
at the left bottom corner. You will seeAPP ID
,APP Key
andMaster Key
of your app. We will use them laterID and Key
Deploy to Vercel (Server)
Click the blue button above, it will redirect you to vercel to deploy with waline template.
Note
If you haven't logged ine, we recommend you to sign in with GitHub.
Input your Vercel project name then click
Create
.Create Project Repo which named you input before will be created and initialized automatically base on waline example template by Vercel.
deploy After one minute or two, vercel should finish the deployment. Click
Go to Dashboard
button to redirect to your application dashboard.deploy Click
Settings
menu on the top, andEnvironment Variables
button on the side to go to environment variables setting page. Then setLEAN_ID
,LEAN_KEY
andLEAN_MASTER_KEY
. The variables' value should be the ones you got in the previous step.APP ID
is the value ofLEAN_ID
, andAPP Key
toLEAN_KEY
,Master Key
toLEAN_MASTER_KEY
. You can learn more about other variables here.set environment variables To let your environment variables setting active, you need redeploy your application. Click
Deployments
menu on the top and find the latest deployment at the top of list, clickRedeploy
button in the right dropdown menu.redeploy If everything is ok, vercel will redirect to
Overview
page to start redeployment. Wait a moment theSTATUS
will change toReady
. Now you can clickVisit
to visit the site. This link is your server address.redeploy success
Assign Domain (Optional)
Click Settings - Domains to go to domain setting page.
Input domain you want to assign and click Add button.
Add domain Add a new
CNAME
record in your domain service server.Type Name Value CNAME example cname.vercel-dns.com You can use your own domain to visit waline comment system after go into effect. 🎉
- serverURL:example.your-domain.com
- admin panel:example.your-domain.com/ui
success
Importing in HTML (Client)
Here is how you can implement Waline on your web page:
Import the stylesheet
https://unpkg.com/@waline/client@v2/dist/waline.css
in the<head>
Create a
<script>
tag and initialize withinit()
fromhttps://unpkg.com/@waline/client@v2/dist/waline.mjs
while passing in the necessaryel
andserverURL
options.- The
el
option is the element used for Waline rendering. You can set a CSS selector in the form of a string or an HTMLElement object. serverURL
is the link of the server, which you just created in Vercel.- For more options, visit the Component Props page
Here is an example:
<head> <!-- ... --> <link rel="stylesheet" href="https://unpkg.com/@waline/client@v2/dist/waline.css" /> </head> <body> <!-- ... --> <div id="waline"></div> <script type="module"> import { init } from 'https://unpkg.com/@waline/client@v2/dist/waline.mjs'; init({ el: '#waline', serverURL: 'https://your-domain.vercel.app', lang: 'en', }); </script> </body>
- The
The comment service will now run successfully on your website 🎉!
Comment Management (Management)
- After the deployment is complete, please visit
<serverURL>/ui/register
to register. The first person to register will be set as an administrator. - After you log in as administrator, you can see the comment management interface. You can edit, mark or delete comments here.
- Users can also register their account through comment box, and they will be redirected to their profile page after logging in.
Video Tutorial
An enthusiastic Waline user made the following video tutorial. If the instructions above are not clear, you can refer to the video: