我正在创建一个显示电视连续剧和电影的网站，到目前为止我创建了一个只显示一部电影的卡片视图，我显然想要添加更多，这是我的困境所在。有没有办法在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)
编辑：再次查看您的代码之后，我认为您可以直接使用这些代码。我会把它改成这样的东西
<!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标签来获得你想要的东西，但这是基本的想法！祝好运！