Можно ли передать переменную как класс CSS в HTML-шаблон Django?
В значительной степени Django любой Python noob - изучаю в течение месяца или около того и смотрю учебники ... так что я знаю достаточно, чтобы быть опасным. Я пытаюсь рандомизировать класс CSS в шаблоне HTML. Я использую собственный шаблон Bootstrap для отображения записей базы данных в виде карточек и хочу рандомизировать фон. У меня есть основы, но я не смог понять, как рандомизировать значение класса CSS в фактическом шаблоне html.
Я пробовал рандомизировать значение в соответствующем шаблоне представлений Django. Искал через 2.2 docs, stack, google и т.д., но пока без радости
просмотров.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 }}, но проверка атрибутов класса показывает, что он вообще не отображается (просто пустой).
Ответы 2
Вы получаете 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">
Это работает, но результат не такой, как я ожидал. Он назначает один и тот же случайный атрибут CSS каждому экземпляру 'compliment.body' - я надеялся рандомизировать атрибут, чтобы все они были разных цветов... каждый раз, когда я обновляю страницу, цвет bg действительно меняется, но это так на каждой карте.
Еще раз спасибо @HenryM - я еще даже не обнаружил пользовательские теги шаблонов в документах :)
Вот рабочая версия после рекомендаций от 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%}
for compliment in complimentпереименуйте любой из двух.