置入框架

安装 Artalk

通过包管理工具引入 Artalk，推荐使用 pnpm

pnpm add artalk

Vue

Vue 3

<script lang="ts" setup>
import Artalk from 'artalk'
import { onMounted, onBeforeUnmount, ref } from 'vue'

import 'artalk/dist/Artalk.css'

const el = ref<HTMLElement>()

let artalk: Artalk

onMounted(() => {
  artalk = Artalk.init({
    el: el.value,
    pageKey: location.pathname,
    pageTitle: `${document.title}`,
    server: 'http://localhost:8080',
    site: 'Artalk 的博客',
    // ...
  })
})

onBeforeUnmount(() => {
  artalk.destroy()
})
</script>

<template>
  <view ref="el"></view>
</template>

Vue 3 + Vue Router

<script lang="ts" setup>
import Artalk from 'artalk'
import { onMounted, onBeforeUnmount, ref, watch, nextTick } from 'vue'
import { useRouter } from 'vue-router'

import 'artalk/dist/Artalk.css'

const el = ref<HTMLElement>()
const router = useRouter()

let artalk: Artalk

onMounted(() => {
  artalk = Artalk.init({
    el: el.value,
    pageKey: router.route.path,
    pageTitle: document.title,
    server: 'http://localhost:8080',
    site: 'Artalk 的博客',
    // ...
  })
})

watch(
  () => router.route.path,
  (path) => {
    nextTick(() => {
      artalk.update({
        pageKey: path,
        pageTitle: document.title,
      })
      artalk.reload()
    })
  }
)

onBeforeUnmount(() => {
  artalk.destroy()
})
</script>

<template>
  <view ref="el"></view>
</template>

React

React Hooks

import React, { useEffect, useRef } from 'react'
import { useLocation } from 'react-router-dom'
import 'artalk/dist/Artalk.css'
import Artalk from 'artalk'

const ArtalkComment = () => {
  const container = useRef<HTMLDivElement>(null)
  const location = useLocation()
  const artalk = useRef<Artalk>()

  useEffect(() => {
    artalk.current = Artalk.init({
      el: container.current!,
      pageKey: location.pathname,
      pageTitle: document.title,
      server: 'http://localhost:8080',
      site: 'Artalk 的博客',
      // ...
    })

    return () => {
      artalk.current?.destroy()
    }
  }, [container, location.pathname])

  return <div ref={container}></div>
}

export default ArtalkComment

React Class

import React, { createRef } from 'react'
import 'artalk/dist/Artalk.css'
import Artalk from 'artalk'

export default class Artalk extends React.Component {
  el = createRef()
  artalk = null

  componentDidMount() {
    this.artalk = Artalk.init({
      el: this.el.current,
      pageKey: location.pathname,
      pageTitle: document.title,
      server: 'http://localhost:8080',
      site: 'Artalk 的博客',
      // ...
    })
  }

  componentWillUnmount() {
    this.artalk?.destroy()
  }

  render() {
    return <div ref={this.el} />
  }
}

SolidJS

import { onCleanup, onMount } from 'solid-js'
import Artalk from 'artalk'
import 'artalk/dist/Artalk.css'

const ArtalkComment = () => {
  let el: HTMLDivElement
  let artalk: Artalk

  onMount(() => {
    artalk = Artalk.init({
      el: el,
      pageKey: location.pathname,
      pageTitle: document.title,
      server: 'http://localhost:8080',
      site: 'Artalk 的博客',
      // ...
    })

    onCleanup(() => {
      artalk.destroy()
    })
  })

  return <div ref={el} />
}

Svelte

<script>
import Artalk from 'artalk'
import { onMount, onDestroy } from 'svelte'

import 'artalk/dist/Artalk.css'

let el
let artalk

onMount(() => {
  artalk = Artalk.init({
    el: el,
    pageKey: location.pathname,
    pageTitle: document.title,
    server: 'http://localhost:8080',
    site: 'Artalk 的博客',
    // ...
  })

  onDestroy(() => {
    if (artalk) {
      artalk.destroy()
    }
  })
})
</script>

<div bind:this="{el}"></div>