### Start Client Development Server
Source: https://waline.js.org/en/advanced/contribution
Runs the development server for the `@waline/client` package, allowing for real-time testing and debugging of the client-side components.
```bash
pnpm client:dev
```
--------------------------------
### Install Waline Dependencies
Source: https://waline.js.org/en/advanced/contribution
Navigates into the cloned Waline directory and installs all necessary project dependencies using pnpm.
```bash
cd waline
pnpm i
```
--------------------------------
### Start Server Development Server
Source: https://waline.js.org/en/advanced/contribution
Runs the development server for the `@waline/server` package. This requires configuring local environment variables, typically by copying `.env.example` to `.env`.
```bash
pnpm server:dev
```
--------------------------------
### Clone Waline Project
Source: https://waline.js.org/en/advanced/contribution
Clones the Waline project repository from GitHub using Git. This is the first step to start contributing.
```bash
git clone https://github.com/walinejs/waline.git
```
--------------------------------
### Waline Client v2 Migration Example
Source: https://waline.js.org/migration/v2
Demonstrates the code changes required for migrating Waline client to version 2, including script and stylesheet inclusion, and initialization syntax.
```javascript
-
+
+
```
--------------------------------
### Install Plugin in Waline Initialization
Source: https://waline.js.org/reference/server/plugin
Demonstrates how to install a pre-existing plugin by adding it to the `plugins` array in the Waline initialization configuration.
```javascript
const Waline = require('@waline/vercel');
const HelloWorldPlugin = require('@waline-plugins/hello-world');
module.exports = Waline({
plugins: [HelloWorldPlugin],
});
```
--------------------------------
### Install and Run Waline Vanilla JS
Source: https://waline.js.org/guide/deploy/vps
Instructions for installing the Waline Vercel package and running the vanilla.js file directly. This method is recommended for users who prefer not to use containers.
```yarn
yarn add @waline/vercel
node node_modules/@waline/vercel/vanilla.js
```
```npm
npm install @waline/vercel
node node_modules/@waline/vercel/vanilla.js
```
--------------------------------
### HTML and JavaScript Example for Waline with Prism.js
Source: https://waline.js.org/en/cookbook/customize/highlighter
This snippet shows a complete HTML page setup for Waline, integrating Prism.js for syntax highlighting. It includes CDN links for Prism.js, its autoloader plugin, a Prism theme, and the Waline client, along with a JavaScript configuration for Waline that defines a custom highlighter function using Prism.
```html
Waline highlighter case
```
--------------------------------
### Waline Baidu CFC Deployment Steps
Source: https://waline.js.org/guide/deploy/baidu-cfc
Steps to deploy Waline on Baidu Cloud Function Compute, including dependency installation, packaging, and cloud configuration.
```APIDOC
Deployment Process:
1. **Clone Starter Project**: Obtain the Baidu CFC starter project from GitHub.
* Repository: `https://github.com/walinejs/baidu-cfc-starter`
2. **Install Dependencies**: Navigate to the project directory and install necessary packages.
* Command: `npm install`
3. **Package Application**: Select all files in the directory and create a zip archive.
* Action: Compress all files into a `.zip` package for upload.
4. **Create Function on Baidu Cloud**: Use the Baidu Cloud Function Compute console.
* Console: `https://console.bce.baidu.com/cfc/#/cfc/functions`
* Action: Select 'Create Function'.
5. **Configure Function Settings**: Choose 'Blank Function' and configure runtime and timeout.
* Function Type: Blank Function
* Runtime: `Node.js 12`
* Timeout: `300` seconds
6. **Configure Trigger**: Set up an HTTP trigger for the function.
* Trigger Type: HTTP Trigger
* URL Path: `/{path+}`
* HTTP Methods: Select all methods.
7. **Deploy Code**: Upload the prepared zip package and configure environment variables.
* Edit Type: Upload Function.ZIP Package
* Action: Upload the `.zip` file created in step 3.
* Environment Variables: Configure necessary variables (e.g., for LeanCloud).
* Confirmation: Click 'Confirm' to complete deployment.
8. **Obtain Service URL**: Find the function's service endpoint.
* Location: Navigate to the 'Trigger' menu.
* Endpoint Example: `https://7vrjpkgy3nt9g.cfc-execute.bj.baidubce.com`
```
--------------------------------
### Install Waline Client via Package Managers
Source: https://waline.js.org/cookbook/import/project
Instructions for installing the Waline official client package (`@waline/client`) using popular package managers like pnpm, npm, and yarn.
```pnpm
pnpm add -D @waline/client
```
```npm
npm i -D @waline/client
```
```yarn
yarn add -D @waline/client
```
--------------------------------
### Leancloud China Configuration
Source: https://waline.js.org/en/migration/valine
Configuration requirements for users of Leancloud China, including necessary environment variables for proper setup.
```APIDOC
Leancloud China Configuration:
- Environment Variables:
- `LEAN_ID`: Your Leancloud App ID
- `LEAN_KEY`: Your Leancloud App Key
- `LEAN_SERVER`: Required for LeanCloud China users.
- Domain Name Filing: Requires completion of Domain name filing with Local Communications Administration, which necessitates a Fixed IP.
```
--------------------------------
### Waline Highlighter Setup with Prism.js
Source: https://waline.js.org/cookbook/customize/highlighter
Demonstrates integrating Prism.js for code highlighting in Waline. The `@waline/client`'s `highlighter` function accepts code and language, returning the highlighted HTML. This example includes necessary HTML structure, CDN links for Prism.js and Waline, and the JavaScript initialization with a custom highlighter function.
```html
Waline highlighter 案例
```
--------------------------------
### Install Plugin with External Module
Source: https://waline.js.org/en/reference/server/plugin
Demonstrates how to install a pre-built plugin by importing it and passing it to the `plugins` array in the Waline server configuration. This allows for easy integration of community-developed extensions.
```javascript
// index.js
const Waline = require('@waline/vercel');
const HelloWorldPlugin = require('@waline-plugins/hello-world');
module.exports = Waline({
plugins: [HelloWorldPlugin],
});
```
--------------------------------
### Waline Deployment Options
Source: https://waline.js.org/guide/get-started/server
Guides for deploying Waline on various platforms, including Vercel, Cloud Functions, and self-hosted environments.
```APIDOC
Waline Deployment Guides:
General Deployment:
- Overview of deployment strategies beyond Vercel's free tier.
- Includes Docker deployment and self-hosting.
- Details can be found at https://waline.js.org/guide/deploy/vps.html
Cloud Platform Deployments:
- Specific instructions for deploying on cloud services:
- Vercel: https://waline.js.org/guide/deploy/vercel.html
- CloudBase (Tencent Cloud): https://waline.js.org/guide/deploy/cloudbase.html
- Netlify: https://waline.js.org/guide/deploy/netlify.html
- Railway: https://waline.js.org/guide/deploy/railway.html
- Zeabur: https://waline.js.org/guide/deploy/zeabur.html
- Baidu Cloud Function Compute: https://waline.js.org/guide/deploy/baidu-cfc.html
- Aliyun Function Compute: https://waline.js.org/guide/deploy/aliyun-fc.html
- Aliyun Compute Nest: https://waline.js.org/guide/deploy/aliyun-computenest.html
Database Specific Deployment:
- Guide for creating a TiDB database for Waline: https://waline.js.org/guide/deploy/tidb.html
```
--------------------------------
### Waline Migration Guides
Source: https://waline.js.org/migration
Guides detailing the process of migrating Waline comments from older versions (v2, v3) or from the Valine comment system. Includes information on data migration tools.
```APIDOC
Waline Migration:
- Waline Client V3 Migration Guide: https://waline.js.org/migration/v3.html
- Waline Client V2 Migration Guide: https://waline.js.org/migration/v2.html
- Migration from Valine: https://waline.js.org/migration/valine.html
- Data Migration Tool: https://waline.js.org/migration/tool.html
```
--------------------------------
### Vercel Deployment Steps
Source: https://waline.js.org/en/guide/deploy/vercel
Instructions for deploying Waline on Vercel. This involves clicking a Vercel deployment button, setting up environment variables, and redeploying the application.
```APIDOC
1. Click the Vercel deployment button to initiate the process.
2. Input your Vercel project name and click 'Create'.
3. After deployment, navigate to 'Settings' -> 'Environment Variables'.
4. Set the following variables: LEAN_ID, LEAN_KEY, LEAN_MASTER_KEY with values obtained from your LeanCloud setup.
5. Redeploy the application by going to 'Deployments', selecting the latest deployment, and choosing 'Redeploy' from the dropdown.
6. Once the status is 'Ready', visit the site using the provided link.
```
--------------------------------
### Install Dependencies and Deploy
Source: https://waline.js.org/guide/deploy/aliyun-fc
Commands used in the deployment process. 'npm install' installs project dependencies, and 's deploy' is a command from the @serverless-devs/s framework to deploy the application to Aliyun Function Compute.
```shell
npm install
```
```shell
s deploy
```
--------------------------------
### Create TiDB Database for Waline
Source: https://waline.js.org/en/guide/deploy/tidb
Instructions for creating and populating the TiDB database for Waline. This involves executing SQL statements provided in a file.
```sql
-- waline.tidb
-- This file contains SQL statements to set up the Waline database.
-- Execute each statement by clicking 'Run' or using Ctrl/Command + Enter.
-- Example placeholder for actual SQL statements if they were provided in the text.
-- CREATE TABLE IF NOT EXISTS comments (
-- id INT AUTO_INCREMENT PRIMARY KEY,
-- ...
-- );
-- The provided text mentions changing content to ';', implying SQL statements are expected here.
-- For demonstration, we'll use a placeholder comment.
-- Replace this with the actual content of waline.tidb if available.
```
--------------------------------
### Waline Server Configuration
Source: https://waline.js.org/cookbook
Guides on configuring the Waline server, including database connections, API keys, and operational settings.
```APIDOC
Waline Server Configuration:
Details the various configuration options for setting up and running the Waline server.
Configuration typically involves:
- Database connection strings (e.g., MongoDB, PostgreSQL).
- API endpoint settings.
- Security and authentication parameters.
- Caching mechanisms.
- Logging levels.
Refer to the Waline server configuration documentation for specific parameters and their usage.
```
--------------------------------
### Waline Deployment on Alibaba Cloud Compute Nest
Source: https://waline.js.org/en/guide/deploy/aliyun-computenest
Guide on deploying Waline using Alibaba Cloud Compute Nest, a PaaS solution for managing services.
```APIDOC
Deploy Waline on Alibaba Cloud Compute Nest:
Instructions for deploying Waline services on Alibaba Cloud's Compute Nest platform.
Compute Nest is a PaaS solution for service providers and customers to manage services.
Refer to https://waline.js.org/en/guide/deploy/aliyun-computenest.html for detailed steps.
Key aspects:
- Publishing private services on Compute Nest.
- Deploying fully-managed services.
- Lifecycle management of services.
- Improving operational efficiency and reducing costs.
```
--------------------------------
### Importing Waline via CDN
Source: https://waline.js.org/cookbook
Instructions on how to include Waline in a web page using a Content Delivery Network (CDN) for quick setup.
```html
```
--------------------------------
### Install pnpm
Source: https://waline.js.org/en/advanced/contribution
Installs the latest version of pnpm globally. pnpm is the recommended package manager for installing Waline dependencies.
```bash
npm i -g pnpm@latest
```
--------------------------------
### Deploy Waline on Zeabur
Source: https://waline.js.org/guide/deploy/zeabur
Step-by-step instructions for deploying the Waline comment system on Zeabur, including forking the starter project, creating database and Waline services, and configuring the domain.
```APIDOC
Deployment Steps:
1. Fork the Zeabur starter project from GitHub.
2. Log in to the Zeabur console and create a new project if needed.
3. Create a MongoDB database service by selecting `Deploy Other Service` -> `Deploy MongoDB`.
4. Create a Waline service by selecting `Deploy Your Source Code` and importing the forked GitHub project.
5. Add a domain to the Waline service by clicking `Domains` -> `Generate Domain`.
6. Configure the generated domain in the Waline client.
Updating Waline:
1. Modify the `@waline/vercel` version in the package.json file of the GitHub repository to the latest version.
```
--------------------------------
### Importing Waline in a Project
Source: https://waline.js.org/cookbook
Guide on installing and importing Waline as a dependency within a JavaScript project using package managers like npm or yarn.
```bash
# Using npm
npm install @waline/client
# Using yarn
yarn add @waline/client
```
```javascript
import { init } from '@waline/client';
import '@waline/client/dist/waline.css';
init({
el: '#waline-container',
serverURL: 'YOUR_WALINE_SERVER_URL',
// Other configurations...
});
```
--------------------------------
### Get TiDB Connection Configuration
Source: https://waline.js.org/en/guide/deploy/tidb
Steps to retrieve connection details for TiDB Cloud, specifically for Node.js applications. This includes resetting the password to generate credentials.
```APIDOC
TiDB Cloud Connection Configuration:
Purpose: Obtain connection parameters for your TiDB instance to integrate with applications.
Steps:
1. Navigate to the 'Overview' page of your TiDB Cloud instance.
2. Click the 'Connect' button in the upper right corner.
3. Select 'Node.js' as the connection method.
4. Click 'Reset password' in the lower right corner to generate a new password.
Output:
Connection information including host, port, user, database name, and the newly generated password.
Dependencies:
- Access to TiDB Cloud console.
- A running TiDB instance.
Related Actions:
- Resetting password for authentication.
- Selecting specific client drivers (e.g., Node.js).
```
--------------------------------
### Waline Search Initialization Example
Source: https://waline.js.org/en/cookbook/customize/search
Demonstrates how to initialize Waline with custom search functionality. It shows the implementation of the `search` function and the `default` option to load random preset words on startup.
```javascript
const search = (word) => {
// ... implementation to fetch images based on the word
// returning result
};
Waline.init({
el: '#waline',
// ... other configurations
search: {
search,
default: () =>
search(
// random between 3 words
['laugh', 'cry', 'smile'][(Math.random() * 3) | 0],
),
},
});
```
--------------------------------
### Waline Vercel Deployment Steps
Source: https://waline.js.org/guide/deploy/vercel
This section outlines the process of deploying Waline on Vercel. It covers initiating the deployment via a Vercel button, setting up the repository, configuring environment variables, and completing the redeployment.
```APIDOC
Waline Vercel Deployment:
1. Initiate Deployment:
- Click the Vercel 'New Project' button provided in the documentation.
- This action redirects to Vercel for Server-side deployment.
- Note: If not logged in, Vercel prompts for GitHub account login.
2. Project Creation:
- Enter a desired Vercel project name.
- Click 'Create' to proceed.
- Vercel automatically creates and initializes a Git repository based on the Waline template.
3. Environment Variable Configuration:
- Navigate to 'Settings' -> 'Environment Variables' within the Vercel project dashboard.
- Configure the following three environment variables:
- `LEAN_ID`: Your LeanCloud APP ID.
- `LEAN_KEY`: Your LeanCloud APP KEY.
- `LEAN_MASTER_KEY`: Your LeanCloud Master Key.
- Special Note for LeanCloud China:
- If using LeanCloud China, additionally configure the `LEAN_SERVER` environment variable with your bound domain name.
4. Redeploy to Apply Changes:
- After configuring environment variables, go to the 'Deployments' tab.
- Click the 'Redeploy' button next to the latest deployment.
- This step ensures the newly set environment variables are applied.
5. Verification:
- The deployment process will start. Wait for the 'STATUS' to change to 'Ready'.
- Click 'Visit' to access the deployed Waline server URL.
```
--------------------------------
### Initialize Waline with Custom Emoji Presets
Source: https://waline.js.org/en/guide/features/emoji
Demonstrates how to initialize the Waline client in a web page using JavaScript. This example shows how to specify custom emoji presets by providing an array of URLs to the `emoji` option.
```javascript
```
--------------------------------
### Update Frontend Script for Waline
Source: https://waline.js.org/migration/valine
Replaces the Valine initialization script with Waline's equivalent. This involves changing the script source, adding a stylesheet, and updating the initialization function from `new Valine({...})` to `Waline.init({...})`, removing Valine-specific `appId` and `appKey`, and adding the `serverURL`.
```html
- <script src='//unpkg.com/valine/dist/Valine.min.js'></script>
+ <script src='//unpkg.com/@waline/client@v2/dist/waline.js'></script>
+ <link href='//unpkg.com/@waline/client@v2/dist/waline.css' rel='stylesheet' /
<script>
- new Valine({
+ Waline.init({
el: '#vcomments',
- appId: 'Your appId',
- appKey: 'Your appKey'
+ serverURL: 'YOUR SERVER URL'
});
</script>
```
--------------------------------
### TiDB Cloud Database Creation and Configuration
Source: https://waline.js.org/en/guide/deploy/tidb
This section details the steps for setting up a Waline database using TiDB Cloud. It covers creating the database and retrieving the necessary connection details for Waline integration.
```APIDOC
Waline TiDB Deployment:
1. Create Database on TiDB Cloud:
- TiDB Cloud offers 5GB of free storage.
- Follow the on-screen instructions to create a new database instance.
2. Get Connection Configuration:
- Access the connection details for your newly created TiDB Cloud database.
- This typically includes:
- Hostname/Endpoint
- Port
- Username
- Password
- Database Name (if applicable)
- These credentials will be used to configure Waline to connect to your TiDB instance.
```
--------------------------------
### Install @waline/client via Package Managers
Source: https://waline.js.org/en/cookbook/import/project
Shows how to install the Waline client package using popular package managers like pnpm, npm, and yarn. This is the first step to integrate Waline into your project.
```pnpm
pnpm add -D @waline/client
```
```npm
npm i -D @waline/client
```
```yarn
yarn add -D @waline/client
```
--------------------------------
### Waline Server API Reference
Source: https://waline.js.org/en/guide/deploy/vercel
Provides an overview of the Waline server-side API, including configuration options, environment variables, and plugin system details. This section is crucial for understanding how to customize and extend Waline's backend functionality.
```APIDOC
Waline Server API:
- API Reference: https://waline.js.org/en/reference/server/api.html
- Server Configuration: https://waline.js.org/en/reference/server/config.html
- Server Environment Variables: https://waline.js.org/en/reference/server/env.html
- Plugin System: https://waline.js.org/en/reference/server/plugin.html
```
--------------------------------
### Install Serverless Devs CLI
Source: https://waline.js.org/guide/deploy/aliyun-fc
Installs the Serverless Devs developer tool globally using npm. This tool is essential for deploying applications to Aliyun Function Compute.
```bash
npm install -g @serverless-devs/s
```
--------------------------------
### Migrate Frontend Script from Valine to Waline
Source: https://waline.js.org/en/migration/valine
Demonstrates the necessary changes to update frontend scripts when migrating from Valine to Waline. It shows how to replace the Valine initialization with Waline's `init` method and update configuration options like `appId`/`appKey` to `serverURL`.
```html
-
+
+
```
--------------------------------
### Install Dependencies in Function Compute
Source: https://waline.js.org/guide/deploy/aliyun-fc
Installs project dependencies within the Function Compute environment. This command is typically run in the editor's console after initial deployment.
```bash
npm install
```
--------------------------------
### MiniValine Usage Example
Source: https://waline.js.org/en/advanced/ecosystem
Demonstrates how to integrate the MiniValine client, a community-developed implementation supporting the Waline API, into an HTML page. It shows initialization with element selection, backend configuration, and server URL.
```html
```
--------------------------------
### JavaScript Code Example
Source: https://waline.js.org/en/cookbook/syntax
A simple JavaScript function example demonstrating variable declaration, function definition, and console logging. This snippet is used to showcase code block rendering.
```js
var foo = function (bar) {
return bar++;
};
console.log(foo(5));
```
--------------------------------
### Example: Prism.js Integration
Source: https://waline.js.org/en/cookbook/customize/highlighter
An example demonstrating how to integrate Prism.js for code highlighting with Waline. This involves creating a custom highlighter function that utilizes Prism.js to process and return the highlighted code.
```javascript
import Prism from 'prismjs';
import 'prismjs/components/prism-bash'; // Import specific language support
import 'prismjs/components/prism-javascript';
// Assuming Waline is initialized with this custom highlighter
// new Waline({
// el: '#waline',
// serverURL: '...',
// highlighter: ({ code, lang }) => {
// const language = Prism.languages[lang] ? lang : 'markup';
// return Prism.highlight(code, Prism.languages[language], language);
// }
// });
// Example of the highlighter function structure:
const customHighlighter = ({ code, lang }) => {
// Check if Prism supports the language, default to markup if not
const language = Prism.languages[lang] ? lang : 'markup';
// Highlight the code using Prism.js
return Prism.highlight(code, Prism.languages[language], language);
};
```
--------------------------------
### Waline init Options
Source: https://waline.js.org/reference/client/api
Details the initialization options for the Waline client, including mounting element, comment count display, and pageview count display.
```APIDOC
WalineInitOptions:
Accepts all [Waline Component Properties](https://waline.js.org/reference/client/props.html) plus the following:
el: string | HTMLElement | null;
- Type: string | HTMLElement | null
- Default: '#waline'
- Description: Waline's initialization mount point. Must be a valid CSS selector or HTMLElement. Set to `null` if only statistics are needed.
comment: boolean | string;
- Type: boolean | string
- Default: false
- Description: Article comment count statistics. If a string is provided, it acts as a CSS selector.
pageview: boolean | string;
- Type: boolean | string
- Default: false
- Description: Article page view count statistics. If a string is provided, it acts as a CSS selector.
```
--------------------------------
### Waline Hook Plugin Example
Source: https://waline.js.org/en/reference/server/plugin
Demonstrates creating a Waline server plugin using the hooks system. This allows executing custom logic after specific events, such as a comment being saved. The `postSave` hook is shown as an example.
```javascript
module.exports = {
hooks: {
async postSave() {
// do what ever you want after comment saved
},
},
};
```
--------------------------------
### Configure Python Path for Node-gyp
Source: https://waline.js.org/guide/deploy/aliyun-fc
Specifies the path to the Python executable for node-gyp. This is necessary if multiple Python versions are installed or if node-gyp cannot automatically find the correct Python installation. Node-gyp supports Python versions 3.7 through 3.10.
```shell
npm config set python "/path/to/executable/python"
```