简体   繁体   English

如何在博客文章中嵌入代码和图像

[英]How to Embed Code and Images in a Blog Post

I'm trying to teach myself Django, by creating a personal blog. 我正在尝试通过创建个人博客来自学Django。 At the moment I have a Post class in my models, that stores the body as a TextField . 目前,我的模型中有一个Post类,该类将正文存储为TextField Similar to 如同

class Post(models.Model):

    title = models.CharField(max_length=150)
    body = models.TextField()
    author = models.ForeignKey(Author, related_name='blog_posts')
    published = models.DateTimeField(default=timezone.now)
    slut = models.SlugField(max_length=100, unique_for_date='publish')

Which does 90% of what I want. 哪个可以完成我想要的90%。

What I want to be able to do though, is include things in the body of the post that aren't text. 我想做的是在帖子正文中包含非文本的内容。 Specifically images, and code snippets. 特别是图像和代码片段。

How can I achieve that? 我该如何实现? Is there a data type that I can use? 我可以使用一种数据类型吗? Or some other way? 还是其他方式?

You can integrate a rich text editor into Django (incl. Django admin). 您可以将富文本编辑器集成到Django中(包括Django admin)。 I'd recommend CKEditor because it's nice, but there's a lot out there. 我会推荐CKEditor,因为它很不错,但是还有很多。

The easiest way to add images to your posts is to upload them somewhere else (eg imgur) and just embed them inline into your posts with the rich text editor you choose. 向您的帖子添加图像的最简单方法是将它们上传到其他位置(例如imgur),然后使用您选择的富文本编辑器将它们直接内嵌到您的帖子中。

If you want to allow image uploads within Django, the easiest way to do this is to create another model that you can associate to your posts, eg 如果要允许在Django中上传图片,最简单的方法是创建另一个可以关联到帖子的模型,例如

class Image(models.Model):
    image = ImageField()
    post = models.ForeignKey('yourapp.Post')

And expose this using an inline admin (docs elaborates on this). 并使用内联管理员公开此内容(文档对此进行了详细说明)。

Then in your template, you can just iterate over the images: 然后,在模板中,您可以遍历图像:

{% for image in post.image_set.all %}
    <img src="{{ image.image.url }}" />
{% endfor %}

This of course means that images aren't inline with your post's textual content - they'd only be spat out before / after the post. 当然,这意味着图像与您的帖子的文本内容不内联-它们只会在帖子之前/之后吐出来。

Adding functionality to upload images within Django and embed them inline is beyond the scope of this conversation as a few design decisions would have to be made. 添加功能以在Django中上传图像并将其嵌入到内嵌中超出了本次讨论的范围,因为必须做出一些设计决策。

我用django-summernote很好。

There is a bad solution that would be to use the safe filter in your template, this filter deactivates HTML escaping : 有一个不好的解决方案,那就是在模板中使用safe过滤器,该过滤器会停用HTML转义:

{{ code | safe }}

But that is a bad practice because : 但这是一个坏习惯,因为:

  • Anyone who can edit could put some malicious code in it. 任何可以编辑的人都可以在其中放入一些恶意代码。
  • It makes "breaking" your page's code easy if you make a typo, a mistake. 如果您输入错误,则可以轻松“破坏”页面的代码。

It's worth knowing that it exists, but I'd recommend you to not use that 值得知道的是它存在,但我建议您不要使用它

A better solution... 更好的解决方案...

... would be to use some django-markdown package that would interpret markdown code and convert it into safe HTML code. ...将使用一些django-markdown程序包,该程序包将解释markdown代码并将其转换为安全的 HTML代码。

Here is why: 原因如下:

  • Markdown is a light and simple syntax to format text. Markdown是格式化文本的简便语法。 It can also be useful even in a non-djangoist context. 即使在非djangoist上下文中,它也可能很有用。 (If you're not familiar with it, DuckDuckGo provides a nice cheatsheet for this language) (如果您不熟悉它,DuckDuckGo会为此语言提供一个不错的备忘单
  • Using a markdown interpreter won't break the code of your page. 使用markdown解释器不会破坏您页面的代码。
  • Integrating your markdown in your templates would then probably be as simple as safe filter without the cons (It would probably be something like {{ code | markdown }} ). 这样,将markdown集成到模板中就可以像没有缺点的safe过滤器一样简单(它可能类似于{{ code | markdown }} )。

Both django-markdown2 and django-markdownx would probably fit your needs, but if it doesn't feel free to try an other! django-markdown2django-markdownx都可以满足您的需求,但是如果您不能随意尝试另一种的话!

You should not have trouble to find one that support images or code snippets. 您不必费心找到一个支持图像或代码段的对象。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM