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