Question

我正在使用 Django 和 Wagtail CMS 创建一个网站，并且有一种通过 html 模板中名为“data-group”的自定义属性过滤帖子的方法。当我对所有内容进行硬编码时它可以工作，但我想使用一些逻辑来为每个帖子动态填充该属性。基本上，我希望在那里填充帖子标签，但我在这样做时遇到了问题。

我将用

突出显示代码的相关行

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

硬编码过滤器按钮的示例：

 <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>

当点击上述任何按钮时，它会过滤数据组属性中具有相似值的帖子/项目。

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

 --------------------------<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 循环创建一个模板，该模板将填充每个添加的帖子/作品集项目，因此我尝试了一些填充过滤器的逻辑，但我似乎无法获取标签并将它们插入到图中的 data-groups 属性中。

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

{% 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 %}

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

{% 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 %}

谢谢。

编辑：添加行为照片。

当我点击“全部”时，所有帖子显示如下（我在右上角突出显示了通过标签填充的过滤器，每个帖子下方是该帖子的编程添加标签）：

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

编辑 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 的格式建议，以及将帖子的数据组设为复数，解决了这个问题。

来自：

<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-loop

2 个答案: