Q: hexo使用最近评论挂件(RecentComments)能否复用js资源 || Q: Can hexo use recent comments widget (RecentComments) to reuse js resources?

[hangvane]

Describe the bug | 问题描述

hexo-next主题，使用@waline/hexo-next包引入评论/浏览量统计功能时，会引入valine的js包

  # Waline library CDN url, you can set this to your preferred CDN
  libUrl: https://cdn.jsdelivr.net/npm/@waline/client@3/dist/waline.umd.min.js

按照官网教程，引入最近评论挂件时（例如在_data/side-bar.njk中引入），需要引入另一个valine的js包

<div id="waline-recent"></div>
<script type="module">
  import { RecentComments } from 'https://cdn.jsdelivr.net/npm/@waline/client/dist/waline.mjs';

  RecentComments({
    el: '#waline-recent',
    serverURL: 'http://waline.vercel.app',
    count: 10,
  });
</script>

两个包的内容并不完全一致，会下载两次。
但体积都在60KiB左右，是否有可能将其指向同一个cdn资源，仅下载一次？

简单地将2个url统一成其中任意一个都会导致报错。

Website URL | 问题网站

无

Where your waline deploy? | 服务部署在哪里？

Vercel (Default)

Where your comment data store? | 数据存储在哪里？

LeanCloud(https://leancloud.app)

---

Describe the bug | Problem description

hexo-next theme, when using the @waline/hexo-next package to introduce the comment/view statistics function, valine's js package will be introduced

  # Waline library CDN url, you can set this to your preferred CDN
  libUrl: https://cdn.jsdelivr.net/npm/@waline/client@3/dist/waline.umd.min.js

According to the official website tutorial, when introducing the recent comment widget (for example, introducing it in _data/side-bar.njk), you need to introduce another valine js package

<div id="waline-recent"></div>
<script type="module">
  import { RecentComments } from 'https://cdn.jsdelivr.net/npm/@waline/client/dist/waline.mjs';

  RecentComments({
    el: '#waline-recent',
    serverURL: 'http://waline.vercel.app',
    count: 10,
  });
</script>

The contents of the two packages are not exactly the same and will be downloaded twice.
But the sizes are all around 60KiB. Is it possible to point them to the same CDN resource and download it only once?

Simply unifying the two URLs into either one will result in an error.

Website URL | Problem website

none

Where your waline deploy? | Where is the service deployed?

Vercel (Default)

Where your comment data store? | Where is the data stored?

LeanCloud(https://leancloud.app)

[lizheming]

通过插件注入后可以直接通过全局变量 Waline.RecentComments，不用通过模块再导入。

---

After injecting through the plug-in, you can directly use the global variable Waline.RecentComments instead of importing it through the module.

[hangvane]

全局变量的可用性取决于js加载的完成时间，会导致Waline is undefined

请问能否在hexo插件中注册一个Event，

waline/packages/hexo-next/waline.njk

Lines 10 to 18 in a3b0c47

	<script>
	document.addEventListener('page:loaded', () => {
	NexT.utils.loadComments(CONFIG.waline.el).then(() =>
	NexT.utils.getScript(CONFIG.waline.libUrl, { condition: window.Waline })
	).then(() =>
	Waline.init(Object.assign({}, CONFIG.waline,{ el: document.querySelector(CONFIG.waline.el) }))
	);
	});
	</script>

使得其他位置可以监听js加载完成事件？

否则，只能在其他位置使用周期性js轮询/setTimeout的方式等待Waline加载完成了，过于hack

---

The availability of global variables depends on the completion time of js loading, which will cause Waline to be undefined

Could you please register an Event in the hexo plug-in?

waline/packages/hexo-next/waline.njk

Lines 10 to 18 in a3b0c47

	<script>
	document.addEventListener('page:loaded', () => {
	NexT.utils.loadComments(CONFIG.waline.el).then(() =>
	NexT.utils.getScript(CONFIG.waline.libUrl, { condition: window.Waline })
	).then(() =>
	Waline.init(Object.assign({}, CONFIG.waline,{ el: document.querySelector(CONFIG.waline.el) }))
	);
	});
	</script>

How can other locations listen to the js loading completion event?

Otherwise, you can only use periodic js polling/setTimeout in other locations to wait for Waline to be loaded, which is too hack