首页网站建设

# 更改评论区

# 更改 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>
    {%- if theme.twikoo.mode === "vercel" %}
      <script data-pjax>
      twikoo.init({
      envId: "{{ theme.twikoo.envId }}", // 腾讯云环境填 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>
    {%- else %}
      <script data-pjax>
      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 环境不填
      // path: 'window.location.pathname', // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
      // lang: 'zh-CN', // 用于手动设定评论区语言，支持的语言列表 https://github.com/imaegoo/twikoo/blob/main/src/js/utils/i18n/index.js
      })
    {%- endif %}
  {%- else %}
    <div class="wrap" id="comments"></div>
  {%- endif %}
{%- endif %}
{% endmacro %}

如果代码没加载出来，可以直接去 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: '', // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
          el: '#tcomments' // 容器元素
        })
      }, 1000)

第二个:

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

# 其他内容

# 访问量统计

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

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

删去 <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>
部分代码可能会加载不成功，请讲下面的代码放在 partial 那行之后
加入如下代码块:
标准版更易读，适用于二次开发
混淆版体积小，适用于生产环境 (uglify-js 不会压缩 getRecentComments 这个函数的内容)
<script data-pjax>
    twikoo.getRecentComments({
        envId: "{{ theme.twikoo.envId }}",
        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:"{{ theme.twikoo.envId }}",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 的延迟