Joyo Logo

时间是一切财富中最宝贵的财富



回到顶部

django admin 自定义样式(显示图片、设置字体颜色等)

* 本文代码同步更新至 https://github.com/yinzhuoqun/django2 *

django admin 后台样式默认情况下都是默认的样式,有时候我们需要在 admin 显示一张图片、或者更改一个文案的显示颜色等等,该怎办呢?

以下方法采用的是在 model 里更改,也可以在 admin 里面更改。

1. 在 model 里增加想要显示的字段:thumb_shouw

# models.py

from django.db import models
from django.db.models.signals import post_save
from django.contrib.auth import get_user_model
from django.utils.html import format_html
# from django.template.defaultfilters import slugify
# from ckeditor.fields import RichTextField  # 不包含上传文件
from ckeditor_uploader.fields import RichTextUploadingField  # 包含上传文件
from pyquery import PyQuery as pq  # pip install pyquery, 获取到html中的img图片地址返回
# from pypinyin import lazy_pinyin  # pip install pypinyin
from uuslug import slugify  # pip install django-uuslug



class Article(models.Model):
    """
    主题表/文章表
    """
    title = models.CharField(max_length=128, unique=True, verbose_name="标题")
    slug = models.SlugField(max_length=128, unique=True, verbose_name="url标识符")
    content = RichTextUploadingField(verbose_name="内容", config_name='awesome_ckeditor')
    node = models.ForeignKey(Node, on_delete=models.DO_NOTHING, verbose_name="所属节点")
    user = models.ForeignKey(User, on_delete=models.DO_NOTHING, related_name="user_article", verbose_name="作者")
    source = models.ForeignKey(Source, on_delete=models.DO_NOTHING, verbose_name="来源", blank=True, null=True)
    tags = models.ManyToManyField(Tag, verbose_name="标签", related_name="tags_article", blank=True)
    num_views = models.IntegerField(default=0, verbose_name="浏览数量")
    num_favorites = models.IntegerField(default=0, verbose_name="收藏数量")
    last_answerer = models.ForeignKey(User, on_delete=models.DO_NOTHING, related_name="last_answerer_article",
                                      verbose_name="最后回复者", blank=True,
                                      null=True)
    show_status = models.BooleanField(default=True, verbose_name="显示状态")
    time_create = models.DateTimeField(auto_now_add=True, verbose_name="发表时间")
    time_update = models.DateTimeField(blank=True, null=True, auto_now=True, verbose_name="更新时间")

    def save(self, *args, **kwargs):
        self.slug = slugify(self.title)
        super(Article, self).save(*args, **kwargs)

    # 获取后台文本编辑器图文内容中图片url地址
    def get_content_img_url(self):
        temp = Article.objects.filter(pk=str(self.id)).values('content')  # values获取Article数据表中的content字段内容
        html = pq(temp[0]['content'])  # pq方法获取编辑器html内容
        # print(html, "\n", "----")
        img_path = pq(html)('img').attr('src')  # 截取html内容中的路径
        # print("pic", img_path)
        return img_path  # 返回第一张图片路径

    # 显示文章的缩略图
    def thumb_shouw(self):
        if self.get_content_img_url():
            return format_html(
                '<span><img src="{}"/>{}</span>', self.get_content_img_url(), "这里是缩略图")
        else:
            return format_html('<span style="color:{}">{}</span>', "red", "暂无缩略图")

    # thumb_shouw.short_description = format_html('<span style="color:red">缩略图</span>')  # 新字段的显示的名称,相当于 verbose_name
    thumb_shouw.short_description = format_html('<span class="text">缩略图</span>')   # 新字段的显示的名称,相当于 verbose_name
    thumb_shouw.admin_order_field = "-time_update"  # 指定排序方式,更新时间倒序排列

    class Meta:
        verbose_name = "文章"
        verbose_name_plural = "文章列表"

    def __str__(self):
        title_short = self.title if len(self.title) < 15 else self.title[:12] + '...'
        return "%s %s %s" % (self.id, self.user, title_short)

2. 在 admin 里启动新增加的字段

# admin.py

from django.contrib import admin
from apps.blog.models import *


class ArticleAdmin(admin.ModelAdmin):
    list_display = ['id', 'thumb_shouw', 'title', 'node', 'num_views', 'show_status', 'slug', 'user']
    list_display_links = ['id', 'thumb_shouw', 'title', 'node', 'num_views', 'user']
    search_fields = ['title_short', 'user', 'content']
    list_editable = ["show_status", ]
    # style_fields = {"content": "ueditor"}
    readonly_fields = ('slug',)
    show_detail_fields = ['show_status', ]


admin.site.register(Article, ArticleAdmin)

3. 重启 django 即可看到效果了

# 官方参考文档


上一篇: pycharm 默认模版 File and Code Templates
下一篇: gitalk(评论系统)样式修改

AD

长风破浪会有时,直挂云帆济沧海。

About Author

about me

Joyo(中国·深圳)

走自己的路,让别人去说吧。

我是 Joyo(卓越),软件测试工作者,热爱互联网,喜欢琢磨,遇到问题就一定要找到答案。我的博客主要记录学习中遇到的知识点和遇到的问题及问题的解决方法。欢迎同样热爱互联网的小伙伴们交换友链,一起探索互联网的世界 😊

Contact Author