Question

我目前正在创建一个展示电视连续剧和电影的网站，到目前为止，我已经创建了仅显示一部电影的Cardview，我显然想添加更多这是我的两难选择。有没有一种方法可以用HTML创建多个Cardview，而不必复制和粘贴很多次？

这是我在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)

Answer 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标记才能获得所需的内容，但这就是基本思想！祝你好运！

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

1 个答案: