Import to Blog

General Method

html

<!-- CSS -->
<link href="http://localhost:8080/dist/Artalk.css" rel="stylesheet">

<!-- JS -->
<script src="http://localhost:8080/dist/Artalk.js"></script>

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

When to execute `Artalk.init({})`?

You can include JS and CSS resources anywhere, but ensure the JS is included before executing Artalk.init({}).
Ensure <div id="artalk"></div> is present in the page before executing Artalk.init({ el: '#artalk' }).

Hugo

Create the template file /themes/YOUR_THEME/layouts/partials/comment/artalk.html:

html

<link href="/lib/artalk/Artalk.css" rel="stylesheet" />
<script src="/lib/artalk/Artalk.js"></script>

<!-- Artalk -->
<div id="Comments"></div>

<script>
  Artalk.init({
    el: '#Comments',
    pageKey: '{{ .Permalink }}',
    pageTitle: '{{ .Title }}',
    server: '{{ $.Site.Params.artalk.server }}',
    site: '{{ $.Site.Params.artalk.site }}',
    // ...your additional configuration
  })
</script>

Add the following to the appropriate place in your article template /themes/YOUR_THEME/layouts/_default/single.html:

html

<div class="article-comments">{{- partial "comment/artalk" . -}}</div>

Modify the Hugo configuration file:

config.tomlconfig.yaml

toml

[params.artalk]
server = 'https://artalk.example.org'
site = 'Your Site Name'

yaml

params:
  artalk:
    server: 'https://artalk.example.org'
    site: 'Your Site Name'

Hexo

Create /themes/YOUR_THEME/layout/comment/artalk.ejs:

html

<link href="/lib/artalk/Artalk.css" rel="stylesheet" />
<script src="/lib/artalk/Artalk.js"></script>

<div id="Comments"></div>

<script>
  var artalk = Artalk.init({
    el: '#Comments',
    pageKey: '<%= page.permalink %>',
    pageTitle: '<%= page.title %>',
    server: '<%= theme.comment.artalk.server %>',
    site: '<%= theme.comment.artalk.site %>',
  })
</script>

Modify the article template file, for example /themes/YOUR_THEME/layout/post.ejs:

html

<div class="article-comments"><%- partial('comment/artalk') %></div>

Edit the theme configuration /themes/YOUR_THEME/_config.yml:

yaml

comment:
  artalk:
    site: 'Your Site Name'
    server: 'https://artalk.example.org'

TIP

For NexT theme, you can install the Artalk plugin for Hexo NexT theme

VitePress

Refer to: docs/.vitepress

Modify config.ts to include CSS resources
Create theme/Artalk.vue component
Register the component in theme/index.ts
Use the component in theme/Layout.vue

Sample code: docs/.vitepress/theme/Artalk.vue

VuePress

(To be supplemented)

TIP

Refer to: Import to Frameworks

Typecho

Modify the theme article template file, for example, post.php:

php

<!-- CSS -->
<link href="/lib/artalk/Artalk.css" rel="stylesheet">

<!-- JS -->
<script src="/lib/artalk/Artalk.js"></script>

<!-- Artalk -->
<div id="Comments"></div>
<script>
 Artalk.init({
   el:        '#Comments',
   pageKey:   '<?php $this->permalink() ?>',
   pageTitle: '<?php $this->title() ?>',
   server:    '<Server Address>',
   site:      '<?php $this->options->title() ?>',
   // ...your additional configuration
 })
</script>

WordPress

Modify the theme article template file, for example, single.php:

php

<!-- CSS -->
<link href="/lib/artalk/Artalk.css" rel="stylesheet">

<!-- JS -->
<script src="/lib/artalk/Artalk.js"></script>

<!-- Artalk -->
<div id="Comments"></div>
<script>
 Artalk.init({
   el:        '#Comments',
   pageKey:   '<?= addslashes(get_permalink()) ?>',
   pageTitle: '<?= addslashes(get_the_title()) ?>',
   server:    '<Server Address>',
   site:      '<?= addslashes(get_bloginfo('name')) ?>',
   // ...your additional configuration
 })
</script>