Django: как передать цвет как переменную контекста в шаблоны - PullRequest
Новая
       12

Django: как передать цвет как переменную контекста в шаблоны

0 голосов
/ 19 июня 2020

Мне нужна помощь:

Я хочу, чтобы мое представление передавало в качестве параметра контекста цвет в шаблон, чтобы заменить цвета по умолчанию в файлах svg, отображаемых на странице.

У меня есть список цветовых констант: 

COLORS = {"W": "#ffffff", "V": "#065636", "B": "#0253A5", "R": "#CC1011"}

В моем определении представления есть определение переменных контекста: 

view_context = {
    'user_display_name': user.user_display,
    'lightcolor': COLORS[user.lightcolor],
}
return render(request, 'pages/page5.html', context=view_context)

и в моем шаблоне (pages / page5. html ), У меня есть раздел <style>, в котором можно определить стили CSS: 

<style>
    .X {
        /* fill: #065636 !IMPORTANT; */
        fill: "{{ lightcolor }}" !IMPORTANT;
    }
</style>

.X {fill: #065636 !IMPORTANT;} отлично работает

, а .X {fill: "{{ lightcolor }}" !IMPORTANT;}

- не работает и игнорируется, я думаю, потому что lightcolor - это строка "#065636" вместо RGBcolor #065636

аналогично .X {fill: {{ lightcolor }} !IMPORTANT;} даже не кажется распознанным синтаксисом

и я не могу найти ничего подходящего для inte rnet

Как я могу передать цвет в качестве параметра контекста в раздел <style> шаблона и заставить это работать?

Ответы [ 3 ]

0 голосов
/ 19 июня 2020

Свойство fill равно для установки цвета фигуры SVG . Предполагая, что вы пытаетесь это сделать, ваш синтаксис должен работать.

Рабочая демонстрация: https://repl.it/@JoshG5 / Django -Шаблон

просмотров. py 

from django.http import HttpResponse
from django.shortcuts import render


def index(request):
  COLORS = {"W": "#ffffff", "V": "#065636", "B": "#0253A5", "R": "#CC1011"}
  view_context = {
    'user_display_name': "foo",
    'lightcolor': COLORS["V"],
  }
  return render(request, 'page.html', context=view_context)

шаблонов на страницу. html

<style>
    .X {
        /* fill: #065636 !IMPORTANT; */
        fill: {{ lightcolor }} !IMPORTANT;
    }
</style>
<svg height="250px" width="600px" class="X"
      xmlns="http://www.w3.org/2000/svg"
      version="1.1"> 
      <circle class="opacity1" cx="100"
        cy="100" r="50" /> 
      <circle class="opacity2" cx="250"
        cy="100" r="50" /> 
      <circle class="opacity3" cx="400"
        cy="100" r="50" /> 
      <circle class="opacity4" cx="550"
        cy="100" r="50" /> 
</svg>

Вы должны увидеть круги с желаемым цветом.

Если вместо этого вы пытаетесь заполнить блок или встроенный элемент, попробуйте использовать свойство color: 

.X {
    color: {{ lightcolor }} !important;
}
0 голосов
/ 21 июня 2020

Хорошо, я нашел причину проблемы! Я работаю над VS-кодом на P C. Когда я сохраняю, формат моего файла html изменяется с: 

.Y {
        fill: {{darkcolor}} !IMPORTANT;
    }

на: 

    .Y {
        fill: {
                {
                darkcolor
            }
        }

         !IMPORTANT;
    }

Фигурные скобки после заливки также отмечены красным, чтобы указать на наличие проблемы. с моим синтаксисом (до и после сохранения и реорганизации кода)

Если мне удастся изменить свой файл вне VS-кода ... все в порядке и все работает как надо!

Может ли кто-нибудь объяснить мне, как я могу избежать реорганизации этой части кода? (это из-за моего линтера или из-за чего-то еще? остановка линтинга ничего не изменила)

0 голосов
/ 19 июня 2020

попробуйте использовать встроенный стиль.

Например, 

<h4 style="color:{{ color }}">Records</h4>
...