Question

几乎是Django和Python的新手-学习了大约一个月并观看了教程……所以我知道足够危险了。我正在尝试在HTML模板中随机化CSS类。我正在使用自定义的Bootstrap模板将数据库条目显示为卡，并且我想随机化背景。我已经掌握了基础知识，但是还无法弄清楚如何在实际的html模板中随机化CSS类值。

我已经尝试在相关的Django视图模板中将值随机化。通过2.2文档，堆栈，谷歌等进行了搜索，但到目前为止没有任何乐趣

views.py：

import random

from django.shortcuts import render

from compliments.models import Compliments

def compliment(request):
    compliment = Compliments.objects.all()
    return render(request, 'compliments/home.html', {'compliment': compliment})

    classList = [
        'bg-secondary', 'bg-success', 'bg-danger', 'bg-warning',
        'bg-info', 'bg-light', 'bg-dark'
    ]
    css_class = random.choice(classList)

我的HTML：

{% extends 'base.html' %}

{% block body %}

<div class="row">
  <div class="col-12">
     <h4 class="mb-4">Compliments</h4>
  </div> <!-- end col -->
</div><!-- end row -->
<div class="row">
  {% for compliment in compliment %}
    <div class="col-md-4">
      <div class="card {{ compliment.css_class }} text-white">
        <div class="card-body">
          <p class="card-text">{{ compliment.body }}</p>
            <a href="javascript: void(0);" class="btn btn-primary btn-sm">Select</a>
        </div> <!-- end card-body-->
      </div> <!-- end card-->
    </div> <!-- end col-->
  {% endfor %}
</div>
{% endblock%}

我期望我可以从视图中获得“ css_class”以显示在{{complment.css_class}}的HTML模板中，但是检查类属性表明它根本没有被呈现（只是空白）

Answer 1

在设置return之前不要进入css_class，不要将其添加到上下文中

def compliment(request):
    compliment = Compliments.objects.all()

    classList = [
        'bg-secondary', 'bg-success', 'bg-danger', 'bg-warning',
        'bg-info', 'bg-light', 'bg-dark'
    ]
    css_class = random.choice(classList)

    return render(request, 'compliments/home.html', {'compliment': compliment, 'css_class`: css_class})

创建一个模板标签（例如，在目录templatetags中创建一个名称为mytags.py的以下文件

import random
from django import template

register = template.Library()

classList = [
            'bg-secondary', 'bg-success', 'bg-danger', 'bg-warning',
            'bg-info', 'bg-light', 'bg-dark'
]

@register.simple_tag
def random_css(a):
    return css_class = random.choice(classList)

以html

{% load mytags %}

<div class="card {{ compliment|random_css }} text-white">

Answer 2

这是在HenryM和Django文档的Custom template tags and tilters部分的指导下工作的版本。

myapp / templatetags / mytags.py：

import random

from django import template

register = template.Library()

classList = [
    'bg-secondary', 'bg-success', 'bg-danger', 'bg-warning', 'bg-info',
    'bg-light', 'bg-dark'
]


@register.filter
def random_css(a):
    return random.choice(classList)

views.py的相关部分：

def compliment(request):
compliment = Compliments.objects.all()

return render(request, 'compliments/home.html', {
    'compliment': compliment
})

以及呈现它的HTML：

{% extends 'accounts/base.html' %}
{% load mytags %}

{% block body %}

<div class="row">
    <div class="col-12">
        <h4 class="mb-4">Compliments</h4>
    </div>
    <!-- end col -->
</div>
<!-- end row -->
<div class="row">
  {% for compliment in compliment %}
    <div class="col-md-4">
        <div class="card {{ compliment|random_css }} text-white">
            <div class="card-body">
                <p class="card-text">{{ compliment.body }}</p>
                <a href="javascript: void(0);" class="btn btn-primary btn-sm">Select</a>
            </div>
            <!-- end card-body-->
        </div>
        <!-- end card-->
    </div>
    {% endfor %}
    <!-- end col-->
</div>
{% endblock%}

是否可以将变量作为CSS类传递给Django html模板？

2 个答案: