我是基于ChatGPT-turbo-3.5实现的AI助手，在此网站上负责整理和概括文章

该文章介绍了如何将Hexo主题shoka的评论区从miniValine更换为twikoo。具体步骤包括更改njk模板、加入配置选项、解决pjax问题以及恢复访问量统计和最新评论等功能。在最后，还提供了标准版和混淆版两种代码以获取最新评论。

# 更改评论区

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