首页网站建设

# 更改评论区

# 更改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: '<!--swig0-->', // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
          el: '#tcomments' // 容器元素
        })
      }, 1000)

第二个:

setTimeout(function () {
        twikoo.init({
          envId: '<!--swig1-->', // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
          el: '#tcomments', // 容器元素
          region: '<!--swig2-->' // 环境地域，默认为 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>

部分代码可能会加载不成功,请讲下面的代码放在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的延迟