JZTXT

【补充】前端渲染文本属性的标签样式

发布时间 2023-07-21 15:52:32作者: Chimengmeng

【补充】前端渲染文本属性的标签样式

【1】直接修改标签的值（Directly modifying the value of a tag）：

  • 这种方式适用于需要将数据直接插入到HTML标签中的情况。
  • 一种常用的方法是使用jQuery库来选中需要修改的标签
    • 并使用.html()方法来设置新的值。
    • 例如：
$('#digg_tips').html(args.message);
  • 上述代码会将args.message的值直接赋予id为"digg_tips"的标签内部。

【2】修改属性（Modifying attributes）：

  • 当需要修改标签的属性而不仅仅是内部内容时
    • 可以使用管道（pipe）中的|safe过滤器来确保属性内容被当做原始HTML进行渲染。
  • 这对于将存储在数据库中的文本作为标签属性
    • 并在前端进行样式渲染非常有用。
    • 例如：
{{ article_obj.content|safe }}
  • 上述代码会将article_obj.content的值作为标签的属性
    • 并在前端渲染时将其作为HTML代码进行解析。

【3】后端先渲染，再传递给前端（Rendering on the backend and then passing it to the frontend）：

  • 有时，可以在后端进行模板渲染，并使用mark_safe()函数将生成的HTML标记为安全。
    • 然后，将包含渲染结果的HTML传递给前端进行展示。
    • 这种方式通常用于在后端生成动态内容，并将其作为静态HTML响应发送给前端。
    • 例如：
from django.utils.safestring import mark_safe

def render_article(request, article_data):
    # 后端渲染逻辑
    rendered_content = generate_rendered_content(article_data)
    safe_rendered_content = mark_safe(rendered_content)

    return render(request, 'article.html', {'rendered_content': safe_rendered_content})
  • 上述代码中，generate_rendered_content()函数在后端进行模板渲染
    • 并返回生成的HTML内容。
  • 然后，使用mark_safe()函数将其标记为安全，确保在前端展示时被解析为HTML。