Artalk

简体中文

English

简体中文

English

Appearance

置入博客 ​

通用方法 ​

html
<!-- CSS -->
<link href="https://unpkg.com/artalk@2.4.4/dist/Artalk.css" rel="stylesheet">

<!-- JS -->
<script src="https://unpkg.com/artalk@2.4.4/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>
<!-- CSS -->
<link href="https://unpkg.com/artalk@2.4.4/dist/Artalk.css" rel="stylesheet">

<!-- JS -->
<script src="https://unpkg.com/artalk@2.4.4/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>

Hugo ​

创建模板文件 /主题目录/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 }}',
    // ...你的其他配置
  })
</script>
<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 }}',
    // ...你的其他配置
  })
</script>

文章页模板 /主题目录/layouts/_default/single.html 合适的位置添加：

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

修改 Hugo 配置文件：

toml
[params.artalk]
server = 'https://artalk.example.org'
site = '你的站点名'
[params.artalk]
server = 'https://artalk.example.org'
site = '你的站点名'
yaml
params:
  artalk:
    server: 'https://artalk.example.org'
    site: '你的站点名'
params:
  artalk:
    server: 'https://artalk.example.org'
    site: '你的站点名'

Hexo ​

创建 /主题目录/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>
<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>

修改文章模板文件，例如 /主题目录/layout/post.ejs：

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

编辑主题配置 /主题目录/_config.example.yml：

yaml
comment:
  artalk:
    site: '你的站点名'
    server: 'https://artalk.example.org'
comment:
  artalk:
    site: '你的站点名'
    server: 'https://artalk.example.org'

TIP

NexT 主题可以安装 Hexo NexT 主题的 Artalk 插件

VuePress ​

以 VuePress v2 为例，继承默认主题 @vuepress/theme-default

可参考：“/.vuepress/theme/Artalk.vue” 创建 Artalk 评论组件。

在 /.vuepress/theme/clientAppEnhance.ts 文件中全局注册组件：

ts
import { defineClientAppEnhance } from '@vuepress/client'

import Artalk from './Artalk.vue'

export default defineClientAppEnhance(({ app, router, siteData }) => {
  app.component('Artalk', Artalk)
})
import { defineClientAppEnhance } from '@vuepress/client'

import Artalk from './Artalk.vue'

export default defineClientAppEnhance(({ app, router, siteData }) => {
  app.component('Artalk', Artalk)
})

主题布局 /.vuepress/theme/Layout.vue：

vue
<template>
  <Layout>
    <template #page-bottom>
      <div class="page-meta">
        <!-- Artalk -->
        <Artalk />
      </div>
    </template>
  </Layout>
</template>

<script lang="ts">
import { defineComponent, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import Layout from '@vuepress/theme-default/lib/client/layouts/Layout.vue'

export default defineComponent({
  components: { Layout },
  mounted: () => {
  }
})
</script>
<template>
  <Layout>
    <template #page-bottom>
      <div class="page-meta">
        <!-- Artalk -->
        <Artalk />
      </div>
    </template>
  </Layout>
</template>

<script lang="ts">
import { defineComponent, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import Layout from '@vuepress/theme-default/lib/client/layouts/Layout.vue'

export default defineComponent({
  components: { Layout },
  mounted: () => {
  }
})
</script>

主题配置文件 /.vuepress/theme/index.ts：

ts
import { path } from '@vuepress/utils'

export default ({
  name: 'vuepress-theme-local',
  extends: '@vuepress/theme-default',
  layouts: {
    Layout: path.resolve(__dirname, 'Layout.vue'),
  },
  clientAppEnhanceFiles: path.resolve(__dirname, 'clientAppEnhance.ts'),
})
import { path } from '@vuepress/utils'

export default ({
  name: 'vuepress-theme-local',
  extends: '@vuepress/theme-default',
  layouts: {
    Layout: path.resolve(__dirname, 'Layout.vue'),
  },
  clientAppEnhanceFiles: path.resolve(__dirname, 'clientAppEnhance.ts'),
})

Typecho ​

修改主题文章模板文件，例如 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:    '<后端地址>',
   site:      '<?php $this->options->title() ?>',
   // ...你的其他配置
 })
</script>
<!-- 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:    '<后端地址>',
   site:      '<?php $this->options->title() ?>',
   // ...你的其他配置
 })
</script>

WordPress ​

修改主题文章模板文件，例如 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:    '<后端地址>',
   site:      '<?= addslashes(get_bloginfo('name')) ?>',
   // ...你的其他配置
 })
</script>
<!-- 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:    '<后端地址>',
   site:      '<?= addslashes(get_bloginfo('name')) ?>',
   // ...你的其他配置
 })
</script>