Frontend API
Here are some of the main Artalk client APIs for operating the Artalk instance in frontend code.
For more detailed API information, you can browse the TypeDoc documentation.
Install Dependencies
Use your preferred package manager to install Artalk:
pnpm add artalk
# or using npm
npm install artalkCreate Instance init
Calling this function creates and returns an instantiated Artalk object for subsequent operations.
import Artalk from 'artalk'
const artalk = Artalk.init({
el: '#Comments',
pageKey: '/post/1',
pageTitle: 'About Introducing Artalk',
server: 'http://your_domain:8080',
site: 'Artalk Blog',
})Calling this function will asynchronously send requests to the backend to:
- Fetch frontend configuration
- Fetch comment list
The mounted event is triggered after configuration and plugins are loaded.
The list-loaded event is triggered after the comment list is loaded.
Note: The frontend UI configuration may be overridden. See: UI Configuration.
Release Resources destroy
Destroy the Artalk instance to release resources.
const artalk = Artalk.init({ ... })
artalk.destroy()Calling this function triggers the unmounted event. Releasing resources involves deleting DOM nodes mounted by Artalk and removing Artalk event listeners. After this function completes, the Artalk instance will no longer be usable.
In frameworks like Vue/React, make sure to call this function when the component is destroyed to prevent memory leaks:
import { onUnmounted } from 'vue'
onUnmounted(() => {
artalk.destroy()
})Update Configuration update
Modify the current Artalk configuration.
const artalk = Artalk.init({ ... })
artalk.update({
// new configuration...
})Calling this function will trigger the updated event.
Updating the configuration will not automatically refresh the comment list. You can continue to call the artalk.reload() function as needed.
Note that this function is a member method of an instantiated object, not a global function.
Frontend configuration reference: Frontend Configuration
Reload reload
Reload the Artalk comment list data from the backend.
const artalk = Artalk.init({ ... })
artalk.reload()The list-load event is triggered before loading the list, and the list-loaded event is triggered after the loading is complete.
Listen to Events on
Add Artalk event listeners.
const artalk = Artalk.init({ ... })
artalk.on('list-loaded', (comments) => {
// 'comments' contains all comments on the current page (not just the comments fetched in this request)
console.log('Comments have been loaded: ', comments)
})Refer to: Frontend Event.
Remove Event Listeners off
Remove Artalk event listeners.
const artalk = Artalk.init({ ... })
const handler = () => {
alert('Comments have been loaded')
}
artalk.on('list-loaded', handler)
artalk.off('list-loaded', handler)Trigger Events trigger
Trigger Artalk events.
const artalk = Artalk.init({ ... })
artalk.trigger('list-loaded', [...])Load Plugins use
Load plugins using the Artalk.use function. Note that this function is a global function, not a method of an instantiated object. Plugins loaded through this function will be effective for all Artalk instances.
import Artalk from 'artalk'
Artalk.use((ctx) => {
ctx.editor.setContent("Hello World")
})
const artalk = Artalk.init({ ... })See: Plugin Development
Dark Mode setDarkMode
Toggle dark mode, which can be called in conjunction with the blog theme, such as when a user clicks a dark mode toggle button.
const artalk = Artalk.init({ ... })
artalk.setDarkMode(true)You can also set the initial dark mode by passing the darkMode parameter when calling Artalk.init.
const artalk = Artalk.init({
// ...other configurations
darkMode: 'auto',
})View Count Widget loadCountWidget
See: Page View Statistics
Get Configuration getConf
Get the current Artalk configuration.
const artalk = Artalk.init({ ... })
const conf = artalk.getConf()Get Mounted Element getEl
Get the DOM element that Artalk is currently mounted to.
const artalk = Artalk.init({ ... })
const el = artalk.getEl()
qwqcode