集成lightbox2库-Symfony5全面开发

我们来搜索lightbox，打开第二个页面，这里是lightbox2的案例。第一种是对单独的图片进行大图的显示，第二种是对图片的合集进行大图的显示。我们往下看，我们需要安装一下lightbox2JS库。

回到项目，打开控制台，我们使用yarn命令来安装。yarn add lightbox2 --dev，安装完成后，我们需要在资源文件中引入lightbox2库。

回到项目，打开app.js文件，在js文件最上方，我们使用import关键字引入lightbox2。然后在app.scss文件中，我们使用@import关键字来引入lightbox2样式文件，现在提示构建成功了。

回到浏览器，我们继续查看文档，对于单个图片我们可以使用这里的代码，对于图片集合，我们需要使用下面的代码。因为我们不限制图片上传的数量，所以我们要使用图片集合的代码。

回到项目，我们打开模板文件macro.html.twig。在for循环中我们粘贴代码，首先a链接它要指向图片的原地址，然后是lightbox的名称，这里我们可以使用评论的id作为名称。修改代码，指向file.path。data-lightbox属性，我们使用comment.id作为名称。将缩略图添加到a标签中间，结束一下a标签，调整一下格式。

#templates/marco.html.twig

{% macro show_comments(comment, post) %}
    {% import _self as macro %}
    <div class="media mb-4">
        <img class="d-flex mr-3 rounded-circle" src="http://placehold.it/50x50" alt="">
        <div class="media-body">
            <h5 class="mt-0">{{ comment.author }}</h5>
            {{ comment.message }}

            <div>
                {% for file in comment.files %}
                    <a href="{{ asset(file.path) }}" data-lightbox="{{ comment.id }}">
                        <img src="{{ asset(file.path)|imagine_filter('my_thumb') }}" alt="{{ file.originName }}"
                             class="img-thumbnail">
                    </a>
                {% endfor %}
            </div>

            <button class="btn btn-sm btn-link js-reply-comment-btn" data-post-id="{{ post.id }}"
                    data-parent-id="{{ comment.id }}">回复
            </button>
            {% for childComment in comment.children %}
                {{ macro.show_comments(childComment, post) }}
            {% endfor %}
        </div>
    </div>
{% endmacro %}

回到浏览器，我们刷新详情页，点击缩略图，现在缩略图就按照我们预期的样式进行了显示。我们调整一下评论列表的显示，添加一个换行，可以使用div标签，对缩略图进行一下包裹。

刷新现在就可以了，我们打开管理端，点击评论列表。我们看最后一页，我们评论的图片并没有显示，我们需要在列表上显示一下评论的图片，另外还需要调整一下id的显示顺序。在下节课我们来修改管理端的代码。