文出處:
Stack Overflow
https://stackoverflow.com/questions/2053258/how-do-i-output-html-in-a-message-in-the-new-django-messages-framework
原文標(biāo)題:
How do I output HTML in a message in the new Django messages framework?
我正在嘗試通過(guò)Django的消息框架顯示一條信息,這條信息中包含了一些HTML內(nèi)容。具體來(lái)說(shuō),我使用ModelAdmin.message_user方法發(fā)送消息,這個(gè)方法僅僅是對(duì)messages()的薄封裝:
到目前為止,我嘗試了很多方法,但最后都顯示轉(zhuǎn)義后的HTML。
上面的這段代碼行不通,下面的代碼也不行。
base.html模板里的代碼非常簡(jiǎn)單:
所以我不太確定我做錯(cuò)了什么。
非常感謝您的意見(jiàn)或指導(dǎo),謝謝!
該回答獲得最多的59個(gè)贊。
另一種選擇是使用extra_tags關(guān)鍵字參數(shù),用以表明該信息是安全的。例如:
然后利用模板邏輯來(lái)使用safe filter。
何謂轉(zhuǎn)義?就是把html語(yǔ)言的關(guān)鍵字過(guò)濾掉。例如,<div>就是html的關(guān)鍵字,如果要在html頁(yè)面上呈現(xiàn)<div>,其源代碼就必須是<div>
Django在默認(rèn)情況下會(huì)自動(dòng)轉(zhuǎn)義html關(guān)鍵字。如果不想轉(zhuǎn)義可以使用safe filter,還有autoescape tag。
ypora 是一款支持實(shí)時(shí)預(yù)覽的 Markdown 文本編輯器。它有 OS X、Windows、Linux 三個(gè)平臺(tái)的版本,目前完全免費(fèi)。
https://typora.io/#
Markdown是一種輕量級(jí)標(biāo)記語(yǔ)言,創(chuàng)始人為約翰·格魯伯(英語(yǔ):John Gruber)。 它允許人們使用易讀易寫的純文本格式編寫文檔,然后轉(zhuǎn)換成有效的XHTML(或者HTML)文檔。這種語(yǔ)言吸收了很多在電子郵件中已有的純文本標(biāo)記的特性。
由于Markdown的輕量化、易讀易寫特性,并且對(duì)于圖片,圖表、數(shù)學(xué)式都有支持,目前許多網(wǎng)站都廣泛使用Markdown來(lái)撰寫幫助文檔或是用于論壇上發(fā)表消息。 如GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、簡(jiǎn)書等,甚至還能被使用來(lái)撰寫電子書。
在使用Dreamweaver編寫網(wǎng)頁(yè)時(shí),遇到需要插入代碼塊、流程圖、數(shù)學(xué)公式時(shí),總是顯得很無(wú)力,效率很低,效果不好,使用Typora會(huì)讓這些問(wèn)題迎刃而解,且輕便,簡(jiǎn)單。
直接看一個(gè)demo:
導(dǎo)出為html:
html網(wǎng)頁(yè)源代碼:
其可以導(dǎo)出的格式有:
流程圖樣式包括:
1、標(biāo)準(zhǔn)流程圖源碼格式(橫向):
```flow
st=>start: 開始框
op=>operation: 處理框
cond=>condition: 判斷框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 輸入輸出框
e=>end: 結(jié)束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op
```
2 mermaid語(yǔ)言庫(kù)繪流程圖
Mermaid 是一個(gè)用于畫流程圖、狀態(tài)圖、時(shí)序圖、甘特圖的庫(kù),使用 JS 進(jìn)行本地渲染,廣泛集成于許多 Markdown 編輯器中。
Mermaid 作為一個(gè)使用 JS 渲染的庫(kù),生成的不是一個(gè)“圖片”,而是一段 HTML 代碼,因此安全許多。
官網(wǎng):https://mermaidjs.github.io/
Github 項(xiàng)目地址:https://github.com/knsv/mermaid
2.1 橫向流程圖源碼格式:
graph LR
A[方形] -->B(圓角)
B --> C{條件a}
C -->|a=1| D[結(jié)果1]
C -->|a=2| E[結(jié)果2]
2.2 豎向流程圖源碼格式:
sequenceDiagram
Title: 標(biāo)題:復(fù)雜使用
對(duì)象A->對(duì)象B: 對(duì)象B你好嗎?(請(qǐng)求)
Note right of 對(duì)象B: 對(duì)象B的描述
Note left of 對(duì)象A: 對(duì)象A的描述(提示)
對(duì)象B-->對(duì)象A: 我很好(響應(yīng))
對(duì)象B->小三: 你好嗎
小三-->>對(duì)象A: 對(duì)象B找我了
對(duì)象A->對(duì)象B: 你真的好嗎?
Note over 小三,對(duì)象B: 我們是朋友
participant C
Note right of C: 沒(méi)人陪我玩
2.3 時(shí)序圖源碼復(fù)雜樣例
gantt
dateFormat YYYY-MM-DD
title 軟件開發(fā)甘特圖
section 設(shè)計(jì)
需求 :done, des1, 2014-01-06,2014-01-08
原型 :active, des2, 2014-01-09, 3d
UI設(shè)計(jì) : des3, after des2, 5d
未來(lái)任務(wù) : des4, after des3, 5d
section 開發(fā)
學(xué)習(xí)準(zhǔn)備理解需求 :crit, done, 2014-01-06,24h
設(shè)計(jì)框架 :crit, done, after des2, 2d
開發(fā) :crit, active, 3d
未來(lái)任務(wù) :crit, 5d
耍 :2d
section 測(cè)試
功能測(cè)試 :active, a1, after des3, 3d
壓力測(cè)試 :after a1 , 20h
測(cè)試報(bào)告 : 48h
2.4 甘特圖樣例:
gantt
dateFormat YYYY-MM-DD
title 軟件開發(fā)甘特圖
section 設(shè)計(jì)
需求 :done, des1, 2014-01-06,2014-01-08
原型 :active, des2, 2014-01-09, 3d
UI設(shè)計(jì) : des3, after des2, 5d
未來(lái)任務(wù) : des4, after des3, 5d
section 開發(fā)
學(xué)習(xí)準(zhǔn)備理解需求 :crit, done, 2014-01-06,24h
設(shè)計(jì)框架 :crit, done, after des2, 2d
開發(fā) :crit, active, 3d
未來(lái)任務(wù) :crit, 5d
耍 :2d
section 測(cè)試
功能測(cè)試 :active, a1, after des3, 3d
壓力測(cè)試 :after a1 , 20h
測(cè)試報(bào)告 : 48h
教程:
Markdown 高級(jí)技巧 | 菜鳥教程(使用 Typora 編輯器講解 Markdown 的語(yǔ)法)
https://www.runoob.com/markdown/md-advance.html
ref
1 Typora 完全使用詳解
https://sspai.com/post/54912/
2 用什么軟件畫流程圖好?-悟空問(wèn)答
https://www.wukong.com/question/6809962012198568195/
3 Mermaid 實(shí)用教程
https://blog.csdn.net/fenghuizhidao/article/details/79440583
-End-
一個(gè)基于 vue、Echart 框架的大數(shù)據(jù)可視化(大屏展示)模板,提供數(shù)據(jù)動(dòng)態(tài)刷新渲染、屏幕適應(yīng)、內(nèi)部圖表自由替換、Mixins注入等功能。
https://gitee.com/MTrun/big-screen-vue-datav?_from=gitee_search
具體使用請(qǐng)移步https://gitee.com/MTrun/big-screen-vue-datav?_from=gitee_search地址參考。
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。