使用 Django for 循环自动填充 HTML 属性

Question

我正在使用 Django 和 Wagtail CMS 制作一个网站，并且有一种方法可以通过 html 模板中名为“data-group”的自定义属性过滤 posts。当我对所有内容进行硬编码时它会起作用，但我想使用一些逻辑为每个 post 动态填充该属性。基本上，我希望在此处填充 post 标签，但我在执行此操作时遇到了问题。

我会用

突出显示代码的相关行

--------------------------

硬编码过滤器按钮示例：

 <ul class="portfolio-filters">
                            <li class="active">
                                <a class="filter btn btn-sm btn-link" data-group="category_all">All</a>
                            </li>
                            <li>
                                <a class="filter btn btn-sm btn-link" data group="category_detailed">Detailed</a>
                            </li>
                            <li>
                                <a class="filter btn btn-sm btn-link" data-group="category_direct-url">Direct URL</a>
                            </li>
                            <li>
                                <a class="filter btn btn-sm btn-link" data-group="category_image">Image</a>
                            </li>
                            <li>
                                <a class="filter btn btn-sm btn-link" data-group="category_soundcloud">SoundCloud</a>
                            </li>
                            <li>
                                <a class="filter btn btn-sm btn-link" data-group="category_video">Video</a>
                            </li>
                            <li>
                                <a class="filter btn btn-sm btn-link" data-group="category_vimeo-video">Vimeo Video</a>
                            </li>
                            <li>
                                <a class="filter btn btn-sm btn-link" data-group="category_youtube-video">YouTube Video</a>
                            </li>
                        </ul>

单击上述任何按钮时，它会过滤 posts/items 数据组属性中具有相似值的值。

它正在过滤的项目的示例如下图数据组列表所示：

 --------------------------<figure class="item standard" data-groups='["category_all", "category_detailed"]'> --------------------------
                      <div class="item">
                        <div class="blog-card">
                          <div class="media-block">
                            <div class="category">
                              <a href="#" title="View all posts in WordPress">WordPress</a>
                            </div>
                            <a href="blog-post-1.html">
                              <img src="./img/blog/blog_post_1.jpg" alt="How to Make a WordPress Plugin Extensible" title="" />
                              <div class="mask"></div>
                            </a>
                          </div>
                          <div class="post-info">
                            <div class="post-date">04 Dec 2019</div>
                            <a href="blog-post-1.html">
                              <h4 class="blog-item-title">How to Make a WordPress Plugin Extensible</h4>
                            </a>
                          </div>
                        </div>
                      </div>
                  </figure>

更多符合上述按钮的例子：

<figure class="item lbvideo" data-groups='["category_all", "category_video", "category_youtube-video"]'>
<figure class="item lbimage" data-groups='["category_all", "category_image"]'>
<figure class="item lbaudio" data-groups='["category_all", "category_soundcloud"]'>
<figure class="item lbvideo" data-groups='["category_all", "category_video", "category_vimeo-video"]'>

等...

当一切都像上面那样硬编码时，上面的方法有效。

但是，我想通过 for 循环创建一个模板，每个添加的 post/portfolio 项目都会填充该模板，因此我尝试了一些填充过滤器的逻辑，但我似乎无法获取标签并将它们插入到图中的数据组属性中。

下面的内容用于填充按钮（虽然我还没有找到一种方法在这里只显示独特的项目）：

{% for post in all_posts %}
                        {% for tag in post.tags.all %}
                        <li>
                            <a class="filter btn btn-sm btn-link" data-group="{{tag}}">{{tag}}</a>
                        </li>
                        {% endfor %}
{% endfor %}

这是我在属性中填充 post 标签的代码，它似乎不起作用：

{% for post in all_posts %}
                                <!-- Blog Post 1 -->
       --------------------------<figure class="item standard" data-group='["all", {% for tag in post.tags.all %}tag{% endfor %} ]'>-------------------------------
                                    <div class="item">
                                        <div class="blog-card">
                                            <div class="media-block">
                                                <div class="category">
                                                    <a href="#" title="View all posts in WordPress">WordPress</a>
                                                </div>
                                                <a href="blog-post-1.html">
                                                    {% image post.blog_image fill-350x200 as img %}
                                                    <img src="{{img.url}}" alt="{{img.alt}}" title="">
                                                </a>
                                            </div>
                                            <div class="post-info">
                                                <div class="post-date">{{post.published_date}}</div>
                                                <br>
                                                {% for tag in post.tags.all %}
                                                <div class="post-date">{{tag}},</div> <!-- This populates fine! -->
                                                {% endfor %}
                                                <a href="blog-post-1.html">
                                                    <h4 class="blog-item-title">{{post.custom_title}}</h4>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </figure>
                                {% endfor %}

有没有人知道用模型中的项目自动填充该属性的方法，以避免必须在 HTML 中进行硬编码？

此代码可以很好地填充文本，例如下面显示良好的代码：

{% for tag in post.tags.all %}
      <div class="post-date">{{tag}},</div>
{% endfor %}

谢谢。

编辑：添加行为照片。

当我单击“全部”时，所有 post 都显示如下（我在右上角突出显示了通过标签填充的过滤器，并且在每个 post 下是以编程方式添加的标签post):

当我点击任何其他过滤器时，它们都消失了：单击任何其他过滤器，它们都会消失，尽管在它们下面打印标签。

编辑 2：添加实际页面的检查。这是检查时填充数字的 html，据我所知，填充和格式化的项目正确：

这些是过滤器按钮，其数据组在检查时自动生成：

这是过滤页面的javascript：

Answer 1

看起来您只是缺少 tag 周围的 {{ }} 方括号，所以它只是输出文字文本 tag 而不是您的 tag 变量。您还需要确保逗号和引号位于正确的位置...

data-group='["all"{% for tag in post.tags.all %}, "{{ tag }}"{% endfor %} ]'

或者如果您需要 category_ 前缀，如您的工作示例所示：

data-group='["category_all"{% for tag in post.tags.all %}, "category_{{ tag }}"{% endfor %} ]'

Answer 2

有趣的是，结合 gasman 的格式建议以及为 post 设置复数数据组解决了这个问题。

发件人：

<figure class="item standard" data-group='["all"{% for tag in post.tags.all %},"{{tag}}"{% endfor %}]'>

收件人：

<figure class="item standard" data-groups='["all"{% for tag in post.tags.all %},"{{tag}}"{% endfor %}]'>

对于遇到类似问题的任何人，请注意逗号的位置非常重要。通过硬编码进行故障排除时，如果我在列表的开头或结尾有一个不合适的逗号，代码将无法运行。

使用 Django for 循环自动填充 HTML 属性

Automatically populating HTML attributes with Django for-loop

html

django

wagtail