Jinja .css 模板逻辑

Question

我正在将我的框架连接到 wagtail。它是一个名为 reely.io 的自定义模块 css 框架，专为 Hubspot 而设计。它有用于断点、颜色等的 jinja 变量。其中一个变量是用于填充和边距设置的乘数。

我已经设置了 css 文件并进入模板。问题出在 css 文件中的任何逻辑：

{{ spacing_multiplier * 1 + 'px' }}
{{ break_sm + 30 + 'px' }}

是的，这适用于 Hubspot 的 HubL，我一直认为它是 Jinja 的衍生产品，但语法有点不同。我做错了吗？

views.py

from django.views.generic import TemplateView


class Themes(TemplateView):
    template_name = "css/reely.css"
    content_type = "text/css"

    def get(self, request, *args, **kwargs):
        context = self.get_context_data(**kwargs)

        ''' Responsive Breaks '''
        context["break_xl"] = 1773
        context["break_lg"] = 1292
        context["break_md"] = 768
        context["break_sm"] = 576
        context["break_xs"] = 396

        ''' Spacing Multiplier '''
        context["spacing_multiplier"] = 10

        ''' Font '''
        context['google_font_link'] = "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;600;700&display=swap"
        context['font_family_1'] = "'IBM Plex Sans', sans-serif;"

        ''' Color Set 1 '''
        context["primary_color"] = '#333333' '''rgb(51,51,51)'''
        context["secondary_color"] = '#555555' '''rgb(85,85,85)'''
        context["tertiary_color"] = '#FFFFFF' '''rgb(255,255,255)'''

        ''' Color Set 2 '''
        context["primary_font_color"] = '#333333' '''rgb(51,51,51)'''
        context["secondary_font_color"] = '#555555' '''rgb(85,85,85)'''
        context["tertiary_font_color"] = '#FFFFFF' '''rgb(255,255,255)'''

        ''' Color Set 3 '''
        context["accent_color_1"] = '#DD0000' '''rgb(221,0,0)'''
        context["accent_color_2"] = '#84C318' '''rgb(132,195,24)'''
        context["accent_color_3"] = '#F96900' '''rgb(249,105,0)'''
        context["success_color"] = '#28A745' '''rgb(40,167,69)'''
        context["info_color"] = '#17A2B8' '''rgb(23,162,184)'''
        context["warning_color"] = '#FFC107' '''rgb(255,193,7)'''
        context["danger_color"] = '#DC3545' '''rgb(255,193,7)'''

        return self.render_to_response(context)

urls.py

from django.urls import path

from . import views

urlpatterns = [
    path("config/reely/css", views.Themes.as_view(),
         name="reelycss"),
]

预期输出：

context["spacing_multiplier"] = 10
{{spacing multiplier * 30 +'px'}} = 10 * 3 = 30 + 'px' = '30px'

我知道这里有字符串和整数，HubL 没有问题。这也不行。

context["spacing_multiplier"] = 10
{{spacing multiplier * 30 }} = 10 * 3 = 30 = 30

Answer 1

答案是使用自定义模板过滤器。

css:

{% load reely_tags %}

.ry [class*="pr3" i] {
  padding-right: {{spacing_multiplier|space:3}};
  box-sizing: border-box;
}

app/templatetags/reely_tags.py:

from django import template

register = template.Library()


@register.filter(name="space")
def space(value, size):
    output = str(value * size)
    return f"{output}px"

输出css:

.ry [class*="pr3" i] {
  padding-right: 30px;
  box-sizing: border-box;
}

我很想知道与 Jinja2 相比，Hubspot 如何使 HubL 成为现实，甚至是什么使这种功能有所不同，但自定义模板标签是一个很好的解决方案。我现在可以将 css 的上下文变量连接到我的 wagtail 管理员中，这是我的目标。

Jinja .css 模板逻辑

Jinja .css template logic

css

python

django

wagtail