Django消息框架，消息里怎么输出HTML？

文出处：

Stack Overflow

https://stackoverflow.com/questions/2053258/how-do-i-output-html-in-a-message-in-the-new-django-messages-framework

原文标题：

How do I output HTML in a message in the new Django messages framework?

问题：

我正在尝试通过Django的消息框架显示一条信息，这条信息中包含了一些HTML内容。具体来说，我使用ModelAdmin.message_user方法发送消息，这个方法仅仅是对messages()的薄封装：

到目前为止，我尝试了很多方法，但最后都显示转义后的HTML。

上面的这段代码行不通，下面的代码也不行。

base.html模板里的代码非常简单：

所以我不太确定我做错了什么。

非常感谢您的意见或指导，谢谢！

回答：

该回答获得最多的59个赞。

另一种选择是使用extra_tags关键字参数，用以表明该信息是安全的。例如：

然后利用模板逻辑来使用safe filter。

By Django的那些事儿

何谓转义？就是把html语言的关键字过滤掉。例如，<div>就是html的关键字，如果要在html页面上呈现<div>，其源代码就必须是<div>

Django在默认情况下会自动转义html关键字。如果不想转义可以使用safe filter，还有autoescape tag。

ypora 是一款支持实时预览的 Markdown 文本编辑器。它有 OS X、Windows、Linux 三个平台的版本，目前完全免费。

https://typora.io/#

Markdown是一种轻量级标记语言，创始人为约翰·格鲁伯（英语：John Gruber）。它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML（或者HTML）文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。
由于Markdown的轻量化、易读易写特性，并且对于图片，图表、数学式都有支持，目前许多网站都广泛使用Markdown来撰写帮助文档或是用于论坛上发表消息。如GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等，甚至还能被使用来撰写电子书。

在使用Dreamweaver编写网页时，遇到需要插入代码块、流程图、数学公式时，总是显得很无力，效率很低，效果不好，使用Typora会让这些问题迎刃而解，且轻便，简单。

直接看一个demo：

导出为html:

html网页源代码：

其可以导出的格式有：

流程图样式包括：

1、标准流程图源码格式（横向）：

```flow
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op
```

2 mermaid语言库绘流程图

Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中。
Mermaid 作为一个使用 JS 渲染的库，生成的不是一个“图片”，而是一段 HTML 代码，因此安全许多。
官网：https://mermaidjs.github.io/
Github 项目地址：https://github.com/knsv/mermaid

2.1 横向流程图源码格式：

graph LR
A[方形] -->B(圆角)
    B --> C{条件a}
    C -->|a=1| D[结果1]
    C -->|a=2| E[结果2]

2.2 竖向流程图源码格式：

sequenceDiagram
Title: 标题：复杂使用
对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象B->小三: 你好吗
小三-->>对象A: 对象B找我了
对象A->对象B: 你真的好吗？
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩

2.3 时序图源码复杂样例

        gantt
        dateFormat  YYYY-MM-DD
        title 软件开发甘特图
        section 设计
        需求                      :done,    des1, 2014-01-06,2014-01-08
        原型                      :active,  des2, 2014-01-09, 3d
        UI设计                     :         des3, after des2, 5d
    未来任务                     :         des4, after des3, 5d
        section 开发
        学习准备理解需求                      :crit, done, 2014-01-06,24h
        设计框架                             :crit, done, after des2, 2d
        开发                                 :crit, active, 3d
        未来任务                              :crit, 5d
        耍                                   :2d
        section 测试
        功能测试                              :active, a1, after des3, 3d
        压力测试                               :after a1  , 20h
        测试报告                               : 48h

2.4 甘特图样例：

        gantt
        dateFormat  YYYY-MM-DD
        title 软件开发甘特图
        section 设计
        需求                      :done,    des1, 2014-01-06,2014-01-08
        原型                      :active,  des2, 2014-01-09, 3d
        UI设计                     :         des3, after des2, 5d
    未来任务                     :         des4, after des3, 5d
        section 开发
        学习准备理解需求                      :crit, done, 2014-01-06,24h
        设计框架                             :crit, done, after des2, 2d
        开发                                 :crit, active, 3d
        未来任务                              :crit, 5d
        耍                                   :2d
        section 测试
        功能测试                              :active, a1, after des3, 3d
        压力测试                               :after a1  , 20h
        测试报告                               : 48h

教程：

Markdown 高级技巧 | 菜鸟教程（使用 Typora 编辑器讲解 Markdown 的语法）

https://www.runoob.com/markdown/md-advance.html

ref

1 Typora 完全使用详解

https://sspai.com/post/54912/

2 用什么软件画流程图好？-悟空问答

https://www.wukong.com/question/6809962012198568195/

3 Mermaid 实用教程

https://blog.csdn.net/fenghuizhidao/article/details/79440583

－End－

介绍

一个基于 vue、Echart 框架的大数据可视化（大屏展示）模板，提供数据动态刷新渲染、屏幕适应、内部图表自由替换、Mixins注入等功能。

开源地址

https://gitee.com/MTrun/big-screen-vue-datav?_from=gitee_search

项目展示

项目使用

如何启动项目需要提前安装好nodejs与npm,下载项目后在项目主目录下运行npm/cnpm install拉取依赖包，然后使用 vue-cli 或者直接使用命令npm run serve，就可以启动项目，启动项目后需要手动全屏（按 F11）。
如何请求数据现在的项目未使用前后端数据请求，建议使用 axios 进行数据请求，在 main.js 位置进行全局配置，在 views/xx.vue 文件里进行前后端数据请求。

如何动态渲染图表在components/echart下的文件，比如drawPie()是渲染函数，echartData是需要动态渲染的数据，当外界通过props传入新数据，我们可以使用watch()方法去监听，一旦数据变化就调用this.drawPie()并触发内部的.setOption函数，重新渲染一次图表。

如何复用图表组件因为 Echart 图表是根据id/class去获取 Dom 节点并进行渲染的，所以我们只要传入唯一的 id 值与需要的数据就可以进行复用。如中间部分的任务通过率与任务达标率组件就是采用复用的方式。

如何更换边框边框是使用了 DataV 自带的组件，只需要去 views 目录下去寻找对应的位置去查找并替换就可以，具体的种类请去 DavaV 官网查看如：

如何更换图表直接进入 components/echart 下的文件修改成你要的 echarts 模样，可以去echarts 官方社区里面查看案例。
Mixins 注入的问题使用 mixins 注入解决了图表重复书写响应式适配的代码，如果要更换(新增)图形，需要将echarts.init()函数赋值给this.chart，然后 mixins 才会自动帮你注入响应式功能。
屏幕适配问题本项目借助了 flexible 插件，通过改变 rem 的值来进行适配，原设计为 1920px。，适配区间为：1366px ~ 2560px，本项目有根据实际情况进行源文件的更改，小屏幕（如:宽为 1366px）需要自己舍弃部分动态组件进行适配，如'动态文字变换组件'会影响布局，需要手动换成一般节点。

具体使用请移步https://gitee.com/MTrun/big-screen-vue-datav?_from=gitee_search地址参考。

在线咨询

上一篇：如何复制整个网页，这里提供详细步骤
下一篇：给力牛津词典-实用的英语翻译软件

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商