zkz098's blog
✨

shoka主题-更换评论区为twikoo

发布于 字数统计 6.3k 字 阅读时长 22 分钟
首页 网站建设

shoka主题-更换评论区为twikoo

发布于 字数统计 6,327 字 阅读时长 32 分钟

更改评论区

更改njk模板

打开yourblog\themes\shoka\layout\_macro\comment.njk,然后把代码改为如下格式:

{% macro render() %}
{%- if page.comment !== false %}
  {%- if theme.twikoo.enable %}
    <div class="wrap" id="tcomments"></div>
    <script src="https://cdn.jsdelivr.net/npm/twikoo@1.5.4/dist/twikoo.all.min.js"></script>
    &#123;%- if theme.twikoo.mode === "vercel" %}
      <script data-pjax>
      twikoo.init({
      envId: "&#123;{ theme.twikoo.envId }&#125;", // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
      el: '#tcomments', // 容器元素
      // region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
      // path: 'window.location.pathname', // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
      // lang: 'zh-CN', // 用于手动设定评论区语言，支持的语言列表 https://github.com/imaegoo/twikoo/blob/main/src/js/utils/i18n/index.js
      })
      </script>
    &#123;%- else %&#125;
      <script data-pjax>
      twikoo.init({
      envId: "&#123;{ theme.twikoo.envId }&#125;", // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
      el: '#tcomments', // 容器元素
      region: '&#123;{ theme.twikoo.region }&#125;', // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
      // path: 'window.location.pathname', // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
      // lang: 'zh-CN', // 用于手动设定评论区语言，支持的语言列表 https://github.com/imaegoo/twikoo/blob/main/src/js/utils/i18n/index.js
      })
    &#123;%- endif %&#125;
  &#123;%- else %&#125;
    <div class="wrap" id="comments"></div>
  &#123;%- endif %&#125;
&#123;%- endif %&#125;
&#123;% endmacro %&#125;

如果代码没加载出来,可以直接去github 看代码

加入配置选项

在yourblog/themes/shoka/_config.yml加入如下代码:

twikoo:
  enable: true
  mode: vercel # vercel或tencent
  envId: "https://xxx.vercel.app" # twikoo环境ID,vercel填地址
  region: "none" #tencent填对应ap地域,vercel随便填

填写内容见twikoo文档

pjax问题

js引入

打开shoka\layout\_partials\head\head.njk,在最后加入:

<script src="https://cdn.staticfile.org/twikoo/1.5.11/twikoo.min.js"></script>

问题即可解决

评论区不刷新问题

打开shoka\source\js\_app\pjax.js第110行,更改为如下内容:

pjax = new Pjax({
  selectors: [
    "head title",
    ".languages",
    ".twikoo",
    ".pjax",
    ".leancloud-recent-comment",
    "script[data-config]",
  ],
  analytics: false,
  cacheBust: false,
});

随后打开shoka\layout\_macro\comment.njk第2行,更改为如下内容:
在将第一个twikoo.init更改为如下形式:

setTimeout(function () {
  twikoo.init({
    envId: "{{ theme.twikoo.envId }}", // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
    el: "#tcomments", // 容器元素
  });
}, 1000);

第二个:

setTimeout(function () {
  twikoo.init({
    envId: "{{ theme.twikoo.envId }}", // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
    el: "#tcomments", // 容器元素
    region: "{{ theme.twikoo.region }}", // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
  });
}, 1000);

其他内容

访问量统计

更改为twikoo会导致最新评论、访问量统计失效,
修复访问量统计,打开themes\shoka\layout\_partials\post\footer.njk,大概在20行左右:

&#123;%- if theme.valine.appId and theme.valine.appKey and theme.valine.visitor %&#125;
<span
  id="&#123;{ page.path | replace('index.html', '') }&#125;"
  class="item leancloud_visitors"
  data-flag-title="&#123;{ post.title }&#125;"
  title="&#123;{ __('post.views') }&#125;"
>
  <span class="icon">
    <i class="ic i-eye"></i>
  </span>
  <span class="text">&#123;{ __('post.views') }&#125;</span>
  <span class="leancloud-visitors-count"></span>
  <span class="text">&#123;{ __('symbols_count_time.view') }&#125;</span>
</span>
&#123;%- endif %&#125;

删去<span class="leancloud-visitors-count"></span>,在第3行添加如下内容:

<span class="icon">
  <i class="ic i-eye"></i>
</span>
<span>此文章已被阅读次数: </span>
<span id="twikoo_visitors">正在加载...</span>

访问量统计就会重新出现

移除miniValine

这样处理完后miniValine仍会加载、拖慢加载速度,需要手动移除依赖
打开shoka/source/js/pjax.js第58行:

vendorJs(
  "valine",
  function () {
    var options = Object.assign({}, CONFIG.valine);
    options = Object.assign(options, LOCAL.valine || {});
    options.el = "#comments";
    options.pathname = LOCAL.path;
    options.pjax = pjax;
    options.lazyload = lazyload;

    new MiniValine(options);

    setTimeout(function () {
      positionInit(1);
      postFancybox(".v");
    }, 1000);
  },
  window.MiniValine,
);

将这一段全部注释或删除即可

最新评论

打开shoka\layout\_macro\widgets.njk,第26行:
改成如下代码块:

<div class="rpost pjax">
  <h2>最新评论</h2>
  <ul class="leancloud-recent-comment" id="twikoo_comment"></ul>
</div>

然后打开shoka\layout\_partials\layout.njk,最底下:

<script src="https://cdn.polyfill.io/v3/polyfill.js"></script>
{# &#123;{ _vendor_js() }&#125; #} {# &#123;{ _js('app.js')}&#125; #} {# &#123;{
partial('_partials/third-party/baidu-analytics.njk', {}, {cache: true}) }&#125; #}

部分代码可能会加载不成功,请讲下面的代码放在partial那行之后

加入如下代码块:

标准版更易读,适用于二次开发
混淆版体积小,适用于生产环境(uglify-js不会压缩getRecentComments这个函数的内容)

    <script data-pjax>
  twikoo
    .getRecentComments({
      envId: "&#123;{ theme.twikoo.envId }&#125;",
      pageSize: 10,
    })
    .then(function (res) {
      res.forEach(function (item) {
        let siteLink = item.url + "#" + item.id;
        let commentList = document.getElementById("twikoo_comment");
        let commentElement = document.createElement("li");
        commentElement.className = "item";
        let commentLink = document.createElement("a");
        commentLink.setAttribute("href", siteLink);
        commentLink.setAttribute("data-pjax-state", "data-pjax-state");
        let commenterAndTime = document.createElement("span");
        commenterAndTime.innerText = item.nick + "@" + item.relativeTime;
        commenterAndTime.className = "breadcrumb";
        let commentTextNode = document.createElement("span");
        commentTextNode.innerText = item.commentText;
        commentLink.appendChild(commenterAndTime);
        commentLink.appendChild(commentTextNode);
        commentElement.appendChild(commentLink);
        commentList.appendChild(commentElement);
      });
    })
    .catch(function (err) {
      console.log(err);
    });
</script>
    twikoo
  .getRecentComments({ envId: "&#123;{ theme.twikoo.envId }&#125;", pageSize: 10 })
  .then(function (d) {
    d.forEach(function (a) {
      var b = a.url + "#" + a.id,
        g = document.getElementById("twikoo_comment"),
        e = document.createElement("li");
      e.className = "item";
      var c = document.createElement("a");
      c.setAttribute("href", b);
      c.setAttribute("data-pjax-state", "data-pjax-state");
      b = document.createElement("span");
      b.innerText = a.nick + "@" + a.relativeTime;
      b.className = "breadcrumb";
      var f = document.createElement("span");
      f.innerText = a.commentText;
      c.appendChild(b);
      c.appendChild(f);
      e.appendChild(c);
      g.appendChild(e);
    });
  })
  .catch(function (d) {
    console.log(d);
  });

    随后最新评论功能就回来了

    获取最新评论较慢,可能有0.3-3s的延迟