排行榜/读者墙挂件
大约 1 分钟...
Waline 通过 UserList
支持用户排行榜和读者墙的展示,方便在博客侧边栏展示评论用户信息。
组件选项
排行榜挂件或者读者墙挂件名为 UserList
,包含三个选项:
el
(可选的): 需要挂载的元素serverURL
: 服务器地址count
: 需要获取的用户列表数量mode
:list
表示排行榜,wall
表示读者墙lang
: 多语言支持,具体可参考 i18nlocale
: 自定义语言,具体可参考 i18n
组件返回的数据格式应为 Promise<{ users: WalineUser[], destroy: () => void }>
。
users
属性: 包含count
数量的用户列表destroy
方法: 销毁挂件的函数
基本用法
用户排行榜
<div id="waline-users"></div>
<script type="module">
import { UserList } from 'https://cdn.jsdelivr.net/npm/@waline/client/dist/waline.mjs';
UserList({
el: '#waline-users',
serverURL: 'http://waline.vercel.app',
count: 10,
});
</script>
读者墙
<div id="waline-users"></div>
<script type="module">
import { UserList } from 'https://cdn.jsdelivr.net/npm/@waline/client/dist/waline.mjs';
UserList({
el: '#waline-users',
serverURL: 'http://waline.vercel.app',
count: 50,
mode: 'wall',
});
</script>
高级用法
如果对默认输出的格式不满意,你也可以不传入 el
选项,调用组件拿到数据之后自己进行渲染。
例子:
<div id="waline-users"></div>
<script type="module">
import { UserList } from 'https://cdn.jsdelivr.net/npm/@waline/client/dist/waline.mjs';
UserList({ serverURL: 'http://waline.vercel.app', count: 10 }).then(
({ users }) => {
document.getElementById('waline-users').innerHTML = users.map(
(user) => `<a href="${user.link}">${user.nick}</a>`,
);
},
);
</script>
友情提示:评论区仅作评论展示,如有问题咨询请去 Github Discussion 中提问。
你认为这篇文章怎么样?
- 0
- 0
- 0
- 0
- 0
- 0
Powered by Waline v3.4.1