如何在不复制粘贴的情况下创建多个卡片视图答案

【问题标题】：How to create multiple card views without copy pasting如何在不复制粘贴的情况下创建多个卡片视图
【发布时间】：2019-05-02 19:44:43
【问题描述】：

我目前正在创建一个显示电视剧和电影的网站，到目前为止，我已经创建了一个只显示一部电影的卡片视图，我显然想添加更多内容，这是我的困境所在。有没有一种方法可以在 HTML 中创建多个卡片视图，而无需多次复制和粘贴？

这是我在 Django 中的父类；

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    {% if title %}
      <title> {{ Flix | title }} </title>
    {% else %}
      <title> Flix </title>
    {% endif %}
    <link rel="stylesheet" href="/static/Css/Parent.css">
  </head>
  <div class="CardView">
      <img src= '{% block Images %}{% endblock %}' alt="">
        <h5> {% block MovieInfo %}{% endblock MovieInfo %} </h4>
  </div>
  <body>
    </div class="mainContent">
    {% block content %}{% endblock %}
  </body>
</html>

这里是显示电影的主页；

{% extends "Movies/Parent.html" %}

{% block Images %}
  {% for Movie in Movies %}
    {{ Movie.Image }}
  {% endfor %}
{% endblock Images %}

{% block MovieInfo %}
  {% for Movie in Movies %}
      <h5> {{ Movie.Name }} </h5>
      <h5> Rating: {{ Movie.Rating }}</h5>
      <h5> Date: {{ Movie.Date_Posted }} </h5>
  {% endfor %}
{% endblock MovieInfo %}

{% block MovieName %}
    {% for Movie in Movies %}
      <h4> {{ Movie.Name }} </h4>
    {% endfor %}
{% endblock MovieName %}

这里是返回电影信息的位置以及电影图像的位置；

GivenMovies = [
    {
        'Image': 'static/Images/MovieImages/Thor.png',
        'Name': 'Thor',
        'Genre': 'Action',
        'Rating': '7.0',
        'Content': 'Mad Movie',
        'Date_Posted': 'January 18, 2017'
    },
    {
        'Image': 'static/Images/MovieImages/Constantine.jpg',
        'Name': 'Constantine',
        'Genre': 'Action, Sci-Fi',
        'Rating': '7.2',
        'Content': 'Another madness of a movie',
        'Date_Posted': 'January 18, 2015'
    }
]

def MainPage(request):
    AllMovies = {'Movies': GivenMovies}
    return render(request, 'Movies/HomePage.html', AllMovies)

【问题讨论】：

标签： django html django-templates django-views

【解决方案1】：

编辑：再次查看您的代码后，我认为您已经掌握了它。我会把它改成这样的

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
    <meta charset="utf-8">
    {% if title %}
      <title> {{ Flix | title }} </title>
    {% else %}
      <title> Flix </title>
    {% endif %}
    <link rel="stylesheet" href="/static/Css/Parent.css">
  </head>
  <body>
    </div class="mainContent">
    {% block content %}{% endblock %}
  </body>
</html>

绝对！这是 django 的重要组成部分。您需要在 HTML 中使用 for 循环。

{% block content %}
{% for movie in Movies %}

<div>
     <div class="CardView"> #all card HTML in here
         <img src= '{{ movie.Image }}' alt="">
         <h5> {{ movie.Name }}  </h5>
         <h5> {{ movie.Genre }}  </h5>
         <h5> {{ movie.Rating }}  </h5>
         <h5> {{ movie.Content }}  </h5>
         <h5> {{ movie.Date_Posted }}  </h5>           
     </div>  
</div>
{% endfor %}
{% endblock %}

您可能需要移动一些 HTML 标记来获得您想要的，但这是基本的想法！祝你好运！

【讨论】：

没问题！祝你好运！