下載django-mdeditor
pip install django-mdeditor # 用於后台編輯
pip install markdown # 用於前端顯示
后台編輯
這部分用django-mdeditor來實現
在項目 settings.py 的 INSTALLED_APPS 中添加 ’mdeditor’
# 項目配置內添加App
INSTALLED_APPS = [
[......]
'mdeditor', # Markdown 編輯器
]
# 添加圖片保存路徑到 settings.py 中
MEDIA_ROOT = os.path.join(BASE_DIR,'media')
MEDIA_URL = "/media/"
添加設置到你的 url.py 中
from django.conf.urls.static import static
from django.conf import settings
# 添加url
urlpatterns = [
[.......]
path('mdeditor/', include('mdeditor.urls')),
]
if settings.DEBUG:
# static files (images, css, javascript, etc.)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
在models.py中修改你需要Markdown的關鍵詞
from mdeditor.fields import MDTextField
class Article(models.Model):
# 文章正文
content = MDTextField() #修改這個類型,把content用於Markdown
在不修改models.py中arkdown的關鍵詞，在admin里面添加
from markdownx.widgets import AdminMarkdownxWidget
formfield_overrides = {
models.TextField: {'widget': MDEditorWidget}
}
在Blog/admin.py中注冊，就是把這個功能，放到admin里面
from django.contrib import admin
from django.db import models
class ArticleAdmin(admin.ModelAdmin):
actions = [show_username,]
# 顯示哪些字段
fields = [('title','author'),('img','visited'),'abstract','content']
# 不顯示哪些字段
# exclude = ['title','author']
list_display=['title','author','visited','created_at','modified_at']
search_fields = list_display
list_filter = list_display
admin.site.register(Article,ArticleAdmin)
前端顯示
pip install markdown
將 Markdown 格式的文本渲染成 HTML 文本非常簡單，只需調用這個庫的 markdown 方法即可。
我們書寫的博客文章內容存在 ArticleAdmin 的 content 屬性里，回到我們的詳情頁視圖函數，對 ArticleAdmin 的 content 的值做一下渲染，把 Markdown 文本轉為 HTML 文本再傳遞給模板：
def article_detail(request,pk):
single_article = Article.objects.get(pk=pk)
single_article.increase_visted()
single_article.content = markdown.markdown(single_article.content,
extensions=[
'markdown.extensions.extra',
'markdown.extensions.codehilite',
'markdown.extensions.toc',
])
return render(request,"article_detail.html",{"single_article":single_article})
markdown.extensions.extra：用於標題、表格、引用這些基本轉換markdown.extensions.codehilite：用於語法高亮markdown.extensions.toc：用於生成目錄
替換網頁模板
在模板中找到展示博客文章主體的 {{ article.content}} 部分，加上 safe過濾器，改為{{ article.content|safe }}
代碼高亮
要實現代碼高亮，我們需要一個樣式文件。自己寫太艱難了，所以我們用現成的。安裝Pygments
Pygments自帶很多好看的高亮格式
在項目的 blog\static\blog\css\highlights\ 目錄下應該能看到很多 .css 樣式文件，
這些文件是用來提供代碼高亮樣式的。
選擇一個你喜歡的樣式文件，在 templates/base.html 引入即可。
比如引入 default.css 樣式
{% load static %}
...
...
<link rel="stylesheet" href="{% static 'blog/css/highlights/default.css' %}">
換行
在需要換行的位置，輸入<br/>即可
關於圖片上傳
我們在admin編輯器中，可以很方便的插入圖片
可以直接上傳本地圖片，但是更推薦直接上傳圖片鏈接，加載速度更快
這里推薦一個免費的七牛雲雲存儲服務器，
具體操作可以點這里用Python把圖片上傳到七牛雲
修改圖片大小和位置
上傳圖片的時候，經常因為圖片過大，影響電腦端和手機端顯示。
上傳的時候，在圖片格式后面，加上{:width="100%" align=center}
比如：
{:width="100%" align=center}
這里定義了圖片的寬度width是100%匹配於顯示，你也可以設置高度。也可以直接設置大小，比如{:width="900"}
align表示圖片位置，center表示居中
修改字體和位置
如果你嫌棄默認的Markdown格式不好看，你可以在.css文件里面進行修改（一勞永逸型）
比如自定義標題字號
.box.post h2 {
font-size: 3.25em;
line-height: 1.25em;
}
.box.post h3 {
font-size: 2.25em;
line-height: 1.25em;
}
或者直接在文章里改（每次自己改）
<font face="微軟雅黑" color="red" size="6">字體及字體顏色和大小</font>
<font face="微軟雅黑" color="red" size="6">字體及字體顏色和大小</font>
<p align="left">居左文本</p>
<p align="center">居中文本</p>
<p align="right">居右文本</p>