Introduction#
Various experts have implemented article liking functionality in various ways.
Some are built-in to the blogging system;
Some are integrated into the commenting system;
Some are implemented through the API of statistical code;
Some are implemented through third-party SaaS services.
Until recently, I learned about Blank Expert in Memos, who discovered emaction/emaction.frontend .
This project also provides backend code, emaction/emaction.backend .
Although this backend code does not currently provide initialization code for the database, the command to initialize Cloudflare D1 was reverse-engineered from the source code.
Why this?#
Why choose this liking functionality?
This is an imitation of GitHub's liking functionality, which is basically a 1:1 reproduction.
GitHub is justice!
Steps#
1. Deploy the backend (optional)#
Deploying the backend is not necessary, it can be used with the API provided by the official.
Prerequisites:
- Need a Cloudflare account
- Need Node.js environment on the computer
First, go to Cloudflare to create a D1 database named: emaction
Copy the id of this database, such as: acf6da62-7777-4459-a579-123456789012
Then clone the code on the local computer:
Install dependencies:
PS: Some students have reported that Wrangler needs to be installed globally with -g, but I don't understand why.
Modify the wrangler.toml file in the cloned code to your own database_id:
Login to Wrangler:
In the popped-up browser page, click Allow to authorize.
Create a data table for the database (assuming the name is: emaction) on your own computer's terminal in the current project (not on the Cloudflare webpage):
Deploy the project to Cloudflare Worker:
Then log in to Cloudflare Worker, and you will find a Worker named api-emaction.
This name corresponds to the name in the package.json file in the cloned code, and you can choose whether to modify it.
Remember the domain of this Worker: https://api-emaction.xxxxxxx.workers.dev.
If most of the users are in China, you may need to bind a custom domain name to access it more friendly.
2. Frontend usage#
When using the frontend, it is the same as the documentation of emaction/emaction.frontend .
Just pass the custom endpoint as a parameter to the JS code.
Import the JS Module in HTML.
This JS can be downloaded, modified, and deployed by yourself:
Use this Module in HTML:
This endpoint does not have any error prevention design, so do not enter a trailing "/" slash.
The custom ID reacttargetid can be optionally modified. When there are multiple Reactions on the same page, try to use different IDs.