Artalk

简体中文

English

简体中文

English

Appearance

置入框架 ​

引入 Artalk ​

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

bash
pnpm add artalk
pnpm add artalk

Vue ​

Vue 3 + TypeScript 例：

vue
<template>
  <div class="artalk-comments"></div>
</template>

<script lang="ts">
import 'artalk/dist/Artalk.css'

import { defineComponent } from 'vue'
import Artalk from 'artalk'

export default defineComponent({
  mounted: () => {
    const artalk = Artalk.init({
      el:        this.$el,
      pageKey:   `${location.pathname}`,
      pageTitle: `${document.title}`,
      server:    'http://localhost:8080',
      site:      'Artalk 的博客',
      // ...
    })
  }
})
</script>
<template>
  <div class="artalk-comments"></div>
</template>

<script lang="ts">
import 'artalk/dist/Artalk.css'

import { defineComponent } from 'vue'
import Artalk from 'artalk'

export default defineComponent({
  mounted: () => {
    const artalk = Artalk.init({
      el:        this.$el,
      pageKey:   `${location.pathname}`,
      pageTitle: `${document.title}`,
      server:    'http://localhost:8080',
      site:      'Artalk 的博客',
      // ...
    })
  }
})
</script>

提示

VuePress 可参考：“VuePress 引入”

React ​

jsx
import 'artalk/dist/Artalk.css'

import React, { createRef } from 'react'
import Artalk from 'artalk'

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

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

  render () {
    return (
      <div ref={this.el} class="artalk-comments" />
    )
  }
}
import 'artalk/dist/Artalk.css'

import React, { createRef } from 'react'
import Artalk from 'artalk'

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

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

  render () {
    return (
      <div ref={this.el} class="artalk-comments" />
    )
  }
}

Svelte ​

html
<script>
import 'artalk/dist/Artalk.css'
import Artalk from 'artalk'

let comments;

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

<div bind:this={comments} class="artalk-comments"></div>
<script>
import 'artalk/dist/Artalk.css'
import Artalk from 'artalk'

let comments;

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

<div bind:this={comments} class="artalk-comments"></div>