使用模板变量时，Django 模板不呈现 CSS

Posted 2023-02-24

【中文标题】使用模板变量时，Django 模板不呈现 CSS

【英文标题】：Django templates not rendering CSS when template variables are used

【发布时间】：2021-09-24 20:19:16

【问题描述】：

我正在尝试在 Django 中使用 html 和 CSS 构建付费墙，但不知何故，应该淡化部分文本的 CSS 没有呈现。这是我所拥有的：

<style>
    .adjust-image 

        display: block;
        width: auto;
        max-width: 100%;
        max-height: 1000px;

    

    .blur-text 
       filter: blur(5px);
       user-select: none;
       pointer-events: none;
    

    .fade-out 
        user-select: none;
        position: relative;
    
    .fade-out:after 
       content: "";
       height: 75%;
       width: 100%;
       position: absolute;
       bottom: 0;
       left: 0;
       background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
    

    #paywall-wrapper 
       padding: 35px;
       border-radius: 5px;
       position: relative;
       margin-bottom: 30px;
       box-shadow: 0px 0px 20px -1px rgba(0,0,0,0.20);
    
       #paywall-wrapper * 
          text-align: center;
       
          #paywall-wrapper .btn 
             left: 50%;
             transform: translateX(-50%);
             position: relative;
          
</style>

<div class="display-margins">
    <div>
        <h5>solution.questionToProblem</h5>
        <h6><b>Solution</b></h6>

        % if request.user.is_anonymous or solution.free != True and request.user.is_subscriber != True %
            <p class= "format-paragraph fade-out:after">solution.solutionToProblem|safe</p>


            <div id="paywall-wrapper">
                <h4>Premium Subscription</h4>
                <p>To view this solution, get our subscription for just <strong>$17</strong>.</p>
                <a class="btn btn-primary text-light" href = "% url 'subscribe' %">Subscribe</a>
            </div>
        % else %
            <p class="noselect format-paragraph">solution.solutionToProblem|safe</p>

            % for s in solution_images %
                <img class = "adjust-image noselect" src=" s.photo.url ">
                <br></br>
            % endfor %

        % endif %
        % render_comments solution request %
        <br class= "extra_spacing"></br>
    </div>
</div>

理想情况下，付费专区的文本应该像这样淡出：

但是当我的<p> 标签中有模板变量时，它不会呈现：

令人惊讶的是，如果我手动在<p> 标签中输入内容，它就可以工作。但是当我使用<p>random content</p>时，它就不起作用了。

当我说<p class= "format-paragraph fade-out:after">solution.solutionToProblem|safe</p> 时，我的 CSS 或 HTML 有什么问题？

【参考方案1】：

确保当你想在 Django 中集成 CSS 并且你的模板变量中有 HTML 时，使用：

put_your_template_variable|striptags

而不是safe。