原因

自从博客平台由WordPress切换到Sonic后，博客加载速度有了明显提升。尝试Sonic的几个博客主题后，PaperMod主题最符合我的要求，但PaperMod无评论系统，无法和Artalk一起使用，前几天正好有时间，自己研究下，成功启用Artalk评论，这里记录下，希望能帮到有需要的人。

启用Artalk评论系统

  1. 首先，安装PaperMod主题，并启用PaperMod主题。
  2. 接着进入Sonic后台，选择外观下的主题编辑选项，再次检查下编辑的主题是PaperMod，点击post.tmpl，在</article>后另起一行添加如下内容：
<link href="//cdn.staticfile.org/artalk/2.8.3/ArtalkLite.css" rel="stylesheet" />
<script src="//cdn.staticfile.org/artalk/2.8.3/ArtalkLite.js"></script>

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

<script>
  Artalk.init({
    el: '#Comments',
    pageKey: '{{ .post.FullPath }}',
    pageTitle: '{{ .post.Title }}',
    server: 'https://Artalk地址',
    site: '{{ .settings.header_title }}',
   })
</script>
  1. 保存，进入博客内容页，即可看到Artalk评论框。

遇到问题

  1. 评论框与内容靠的太近，视觉上有有些拥挤
    在</nav>和</footer>之间另起一行添加<br>，完整的例子如何：
</nav>

<br>

</footer>
  1. Artalk有以前的内容，在Sonic启用
    首先，确保 Artalk站点设置的网址是Sonic网址。
    接着，进入 Artalk数据库后台，修改comments中的page_key项的地址，例子如下：
项目 Wordpress Sonic
URL https://www.itansuo.info/685 https://www.itansuo.info/archives/awscloudfront-qiang-zhi-tian-jia-cname
page_key https://www.itansuo.info/685 /archives/awscloudfront-qiang-zhi-tian-jia-cname
  1. 不同pageKey配置获取的URL，根据自己的需求选择。
变量 Artalk前端获取的URL Artalk后端保存的URL
pageKey: '{{ .post.FullPath }}', \/archives\/sonic-de-papermod-zhu-ti-qi-yong-artalk-ping-lun archives/sonic-de-papermod-zhu-ti-qi-yong-artalk-ping-lun
pageKey: '{{ .blog_url }}{{ .post.FullPath }}', https:\/\/www.itansuo.info\/archives\/sonic-de-papermod-zhu-ti-qi-yong-artalk-ping-lun https://www.itansuo.info/archives/sonic-de-papermod-zhu-ti-qi-yong-artalk-ping-lun

附录

post.tmpl完整修改如下

{{- define "sonic_theme_paper_mod/post" -}}
<!DOCTYPE html>
<html lang="zh" dir="auto">

<head>
<title>{{ .post.Title }} - {{ .blog_title }}</title>
{{ template "sonic_theme_paper_mod/module/head" .}}
</head>

<body id="top">

{{template "sonic_theme_paper_mod/module/header" .}}

<main class="main">

<article class="post-single">
<h1 class="post-title"><a href="{{ .post.FullPath }}">{{ .post.Title }}</a></h1>
<div class="post-meta">
    <div class="post-info">
        Create Time: {{ unix_milli_time_format "2006-01-02 15:04:05" .post.CreateTime }}  Words: {{ .post.WordCount }}
    </div>
</div>

<div class="post-content">
    <hr>
    {{noescape .post.Content}}
    <hr>
</div>

<footer class="post-footer">
<nav class="paginav">
    {{if .prevPost}}
    <a class="prev" href="{{.prevPost.FullPath}}">
        <span class="title">« Prev</span>
        <br>
        <span>{{.prevPost.Title}}</span>
    </a>
    {{end}}
    {{if .nextPost}}
    <a class="next" href="{{.nextPost.FullPath}}">
        <span class="title">Next »</span>
        <br>
        <span>{{.nextPost.Title}}</span>
    </a>
    {{end}}
</nav>

<br>

</footer>

</article>

<link href="//cdn.staticfile.org/artalk/2.8.3/ArtalkLite.css" rel="stylesheet" />
<script src="//cdn.staticfile.org/artalk/2.8.3/ArtalkLite.js"></script>

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

<script>
  Artalk.init({
    el: '#Comments',
    pageKey: '{{ .post.FullPath }}',
    pageTitle: '{{ .post.Title }}',
    server: 'https://Artalk地址',
    site: '{{ .settings.header_title }}',
   })
</script>

</main>

{{template "sonic_theme_paper_mod/module/footer" .}}

</body>
</html>
{{end}}