0 Fork 0

Files

T

qwqcode bad248534c docs: revise and add more examples

BREAKING CHANGE: The following top-level functions exported by the 'artalk' npm package have been deprecated: `Artalk.update`, `Artalk.reload`, and `Artalk.destroy`. These methods now require invocation on an instance created by either `Artalk.init` or `new Artalk`. Please utilize instance-level methods instead, such as `artalkInstance.update`. For more information, refer to  [the documentation](https://artalk.js.org/guide/frontend/import-framework.html). The update was implemented to enable the concurrent creation of multiple instances, adapting to situations where Vue components are simultaneously referenced across various pages. Initially, only a singular instance was permitted to mitigate memory leak concerns. However, this proved limiting for scenarios involving the caching of multiple component instances through 'keep-alive.' To better suit intricate SPA application needs, the choice was made to permit the creation of multiple independent instances. It's crucial to remember to manually invoke the `artalk.destroy` method when releasing components to avoid memory leaks (Issue #660).

2023-12-17 19:16:33 +08:00

2.5 KiB

Raw Permalink Blame History

置入框架

安装 Artalk

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

pnpm add artalk

Vue

Vue 3 + TypeScript 例：

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

<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import 'artalk/dist/Artalk.css'
import Artalk from 'artalk'

const el = ref<HTMLElement>()
const route = useRoute()

let artalk: Artalk

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

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

React

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

const ArtalkComment = () => {
  const el = useRef(null);
  const location = useLocation();
  let artalk = null;

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

    return () => {
      if (artalk) {
        artalk.destroy();
      }
    };
  }, [location.pathname]);

  return <div ref={el}></div>;
};

export default ArtalkComment;

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} />
    )
  }
}

Svelte

<script>
  import { onMount, onDestroy } from 'svelte';
  import 'artalk/dist/Artalk.css';
  import Artalk from 'artalk';

  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>

2.5 KiB Raw Permalink Blame History

置入框架

安装 Artalk

Vue

React

Svelte

2.5 KiB

Raw Permalink Blame History