Можно ли передать переменную как класс CSS в HTML-шаблон Django?

Question

В значительной степени Django любой нуб Python - изучал в течение месяца или около того и смотрел учебники ... так что я знаю достаточно, чтобы быть опасным.Я пытаюсь рандомизировать класс CSS в шаблоне HTML.Я использую собственный шаблон Bootstrap для отображения записей базы данных в виде карточек, и я хочу, чтобы фон был случайным.У меня есть основы, но я не смог выяснить, как рандомизировать значение класса CSS в реальном HTML-шаблоне.

Я попытался рандомизировать значение в соответствующем шаблоне представлений 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" из моих представлений для отображения в шаблоне HTML в {{complment.css_class}}, но проверка атрибутов класса показывает, что он вообще не отображается (просто пустой).

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.

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