README

Kirby Likes 添加路由、便捷的页面方法和面板字段，以便您可以轻松地将点赞/爱心/投票添加到页面。

前端

您可以使用 toggle 路由或独立的 add 和 remove 路由。

<a href="<?= $page->url() ?>/like/toggle">❤️ <span><?= $page->likeCount() ?></span></a>

<a href="<?= $page->url() ?>/like/add">👍</a>
<a href="<?= $page->url() ?>/like/remove">👎</a>

Kirby Likes 无需 JavaScript 也能工作，因此触发任一路由都会执行其操作并重新加载页面。如果您想在“飞行中”更新计数（不重新加载整个页面），您可以通过 POST 请求 fetch 路由，并根据插件 JSON 响应确定用户是否已点赞以及最终的点赞数。

这可以通过在事件处理器的回调函数中复制此片段来实现。

// Select target selector
var button = document.querySelector('like-button');

// Add click handler
button.addEventListener('click', function(e) {
  fetch(this.getAttribute('href'), {
    method: 'POST'
  })
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    this.querySelector('span').innerText = data.likeCount;

    if (data.hasLiked) {
      this.classList.add('has_liked');
    } else {
      this.classList.remove('has_liked');
    }
  });
})

后端

要显示后端的计数器，只需将其添加到相应的页面蓝图即可。

fields:
  likes:
    label: Likes
    type: likes

页面方法

在您的模板中，以下页面方法可用

`likeCount()`

如上例所示，此方法公开了给定页面的当前计数。

`hasLiked()`

这对于在您的页面上对计数器应用不同的样式或其他属性特别有用。

medienbaecker / kirby-likes

维护者

详细信息

README

前端

后端

页面方法

`likeCount()`

`hasLiked()`