# 更改评论区
# 更改 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 的延迟