Emlog实现文章页评论弹幕函数

在搭建个人博客或网站时，Emlog 作为一个轻量级的博客系统，受到了许多开发者的喜爱。然而，默认的评论系统可能显得有些单调，无法满足一些用户对互动性和趣味性的追求。为此，我们可以通过在文章页实现评论弹幕功能，来增强用户体验和互动性

实现步骤

1. 引入弹幕库

首先，我们需要在 Emlog 的文章页引入一个弹幕库。可以选择一些开源的弹幕库，如 Barrager.js，它轻量且易于集成。将弹幕库的 JS 文件和 CSS 文件下载到本地，或者通过 CDN 链接直接引入。

<link rel="stylesheet" href="path/to/barrager.css">
<script src="path/to/barrager.js"></script>

2. 修改文章页模板

接下来，我们需要修改 Emlog 的文章页模板，以便在页面上创建一个用于显示弹幕的容器。可以在文章内容的下方添加一个 div 元素，并为其设置一个唯一的 ID，以便后续通过 JS 代码来操作。

<div id="danmaku-container"></div>```

### 3. 获取评论数据

为了实现弹幕功能，我们需要获取文章的评论数据。可以通过 Emlog 提供的 API 或者直接查询数据库来获取评论列表。将评论内容、作者、时间等信息提取出来，用于后续创建弹幕。

```php
<?php
// 假设这里是通过 Emlog API 获取的评论数据
$comments = getCommentsByArticleId($articleId);
?>

4. 初始化弹幕

在获取到评论数据后，我们可以使用弹幕库来初始化弹幕。在文章页模板的底部，添加一段 JS 代码，用于将评论数据转化为弹幕并显示在容器中。

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var danmakuContainer = document.getElementById('danmaku-container');
    var barrager = new Barrager(danmakuContainer);
    // 假设 comments 是从后端获取的评论数据
    var <?php echo json_encode($comments); ?>;

    comments.forEach(function(comment) {
      barrager.add({
        message: comment.content,
        color: getRandomColor(),  // 可以定义一个函数来生成随机颜色
        time: comment.time,
        author: comment.author
      });
    });

    function getRandomColor() {
      var letters = '0123456789ABCDEF';
      var color = '#';
      for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }
  });
</script>