Users Rank List/Users Wall Widget
Less than 1 minute...
Waline supports displaying users rank list or users wall by widget, which is convenient for displaying the commentor's info in the sidebar of the blog.
Component options
The users rank list/users wall widget is named UserList
and contains six options:
el
(optional): the element to be mountedserverURL
: server linkcount
The number of users needed to getmode
:list
means users rank list,wall
means users walllang
: i18n support, more ref to i18nlocale
: customize the language, more ref to i18n
The data format returned by the component should be Promise<{ users: WalineUser[], destroy: () => void }>
.
users
property: an array of the user list with exact number ofcount
destroy
method: a function which will destroy the widget
Basic usage
Users Rank List
<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>
Users Wall
<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>
Advanced usage
If you are not satisfied with the default output format, you can call the component by omitting the el
option to get the data and render it yourself.
Example:
<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>
TIPS: The comment area is only for demo. If you have any questions, please go to Github Discussion to ask.
What do you think?
- 0
- 0
- 0
- 0
- 0
- 0
Powered by Waline v3.3.2