前端引入

举个栗子

<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/artalk@2.3.2/dist/Artalk.css" rel="stylesheet">

<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/artalk@2.3.2/dist/Artalk.js"></script>

<!-- Artalk -->
<div id="Comments"></div>
<script>
  new Artalk({
    el:        '#Comments',              // 绑定元素的 Selector
    pageKey:   '/post/1',                // 固定链接 (留空自动获取)
    pageTitle: '关于引入 Artalk 这档子事', // 页面标题 (留空自动获取)
    server:    'http://localhost:8080',  // 后端地址
    site:      'Artalk 的博客',           // 你的站点名
  })
</script>
import 'artalk/dist/Artalk.css'
import Artalk from 'artalk'

const artalk = new Artalk({
  el:        '<绑定元素的 Selector>',
  pageKey:   '/post/1',                // 固定链接 (留空自动获取)
  pageTitle: '关于引入 Artalk 这档子事', // 页面标题 (留空自动获取)
  server:    'http://localhost:8080',  // 后端地址
  site:      'Artalk 的博客',           // 你的站点名
})

CDN 资源

  • JS DELIVRopen in new window

    • https://cdn.jsdelivr.net/npm/artalk@<版本号>/dist/Artalk.js
    • https://cdn.jsdelivr.net/npm/artalk@<版本号>/dist/Artalk.css
  • UNPKGopen in new window

    • https://unpkg.com/artalk@<版本号>/dist/Artalk.js
    • https://unpkg.com/artalk@<版本号>/dist/Artalk.css

注:将 <版本号> 替换为你想使用的固定版本号,例如 @2.2.5

当然,你也可以采用激进的方式保持最新版本,去掉 @<版本号>

ArtalkLite

你可以选择 Artalk 的精简版本 ArtalkLite,体积更小、更简约。

下载并自托管

鉴于国内外复杂的网络环境,案例提供的 CDN 资源访问速度可能不佳,可以将其保存到自己的服务器,然后通过 <script> 标签引入。

Node 环境

你可以在 Node 环境通过包管理工具引入 Artalk,然后将其引入到你的项目当中。

# pnpm
pnpm add artalk

# yarn
yarn add artalk

# npm
npm install artalk

你需要配置

后端程序部署完成后,在前端初始化 Artalk 需要提供配置,例如:

new Artalk({
  el:        '#Comments',              // 绑定元素的 Selector
  pageKey:   '/post/1',                // 固定链接 (留空自动获取)
  pageTitle: '关于引入 Artalk 这档子事', // 页面标题 (留空自动获取)
  server:    'http://localhost:8080',  // 后端地址
  site:      'Artalk 的博客',           // 你的站点名
  // 你的其他配置...
})

其他配置项目可参考:“前端 · 配置”

何时引入

你可以在页面的任意位置引入 JS 和 CSS 资源,但请确保在执行 new Artalk({}) 前引入资源文件。

从后端内置资源引入

你可以直接引入后端程序内置的 JS 和 CSS 资源文件,详情可参考:“在后端控制前端”