• 欢迎访问金笔头博客,这是一个菜鸟(伪)程序员的自留地,欢迎访问我的github:点击进入

Django2.0笔记(4)-开发个人博客系统(二)

python eason 1295次浏览 11个评论 扫描二维码

开发环境

  • PyCharm 2017.3.2 (Professional Edition)
  • Python 3.6.3
  • windows 10
  • Sqlite3

本文目标

接上文Django2.0笔记(3)-开发个人博客系统(一),本文继续对博客系统进行优化,主要包括:

  1. 后台发文时正文内容由纯文本输入框改为富文本输入框
  2. 主页文章列表页显示文章摘要时过滤html标签

无图无真相,先上效果图:

  • 富文本输入框 Django2.0笔记(4)-开发个人博客系统(二)
  • 主页列表 Django2.0笔记(4)-开发个人博客系统(二)

    当前状态

  • 纯文本输入框 Django2.0笔记(4)-开发个人博客系统(二)
  • 主页列表 Django2.0笔记(4)-开发个人博客系统(二)

开发过程

功能1:后台发文时正文内容由纯文本输入框改为富文本输入框

1.富文本输入框的实现本文依赖django-summernote这个库来实现,首先安装

pip install django-summernote

2.修改settings.py注册应用

INSTALLED_APPS = [
    ......
    'apps.blog',
    'django_summernote'
]

3.修改urls.py添加路由

from django.contrib import admin
from django.urls import path
from apps.blog import views
from django.conf.urls import include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.home, name='home'),
    path('home/', views.home, name='home'),
    path('articles/<int:id>/', views.detail, name='detail'),
    path('summernote/', include('django_summernote.urls')),
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

4.添加附件(如图片、视频、文件等)的存放路径,修改settings.py,添加如下代码

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')

5.修改admin.py,为Article模型中正文字段添加富文本编辑器

from django.contrib import admin
from .models import Article, Category, Tag
from django_summernote.admin import SummernoteModelAdmin

admin.site.register(Category)
admin.site.register(Tag)


class PostAdmin(SummernoteModelAdmin):
    summernote_fields = ('content',)  # 给content字段添加富文本


admin.site.register(Article, PostAdmin)

6.执行migrate命令使附件模型生效

manage.py@jbt_blog > migrate
"D:\Program Files\JetBrains\PyCharm 2017.3.2\bin\runnerw.exe" D:\env_python\py3\jbt_blog\Scripts\python.exe "D:\Program Files\JetBrains\PyCharm 2017.3.2\helpers\pycharm\django_manage.py" migrate D:/PycharmProjects/jbt_blog
Operations to perform:
  Apply all migrations: admin, auth, blog, contenttypes, django_summernote, sessions
Running migrations:
  Applying django_summernote.0001_initial... OK
  Applying django_summernote.0002_update-help_text... OK

Following files were affected

至此,登录后台发文时正文输入框已经是富文本输入框了。

功能2:主页文章列表页显示文章摘要时过滤html标签

修改页面文件home.html

{% extends "base.html" %}
{% block content %}
    <div class="posts">
        {% for post in post_list %}
            <section class="post">
                <header class="post-header">
                    <h2 class="post-title"><a href="{% url 'detail' id=post.id %}">{{ post.title }}</a></h2>
                    <p class="post-meta">
                        发布时间: <a class="post-author" href="#">{{ post.pub_time |date:'Y/m/d'}}</a>&nbsp;&nbsp;
                        分类: <a class="post-category post-category-pure" href="#">{{ post.category }}</a>&nbsp;&nbsp;
                        标签:
                        {% for tag in post.tags.all %}
                            <a class="post-category post-category-pure" href="#">{{ tag }}</a>
                        {% endfor %}&nbsp;&nbsp;
                        浏览次数:{{ post.views }}
                    </p>
                </header>

                <div class="post-description">
                    <p>
                        {#striptags用于过滤正文中所有的HTML标签#}
                        {#truncatechars用于截取正文前300个字符#}
                        {{ post.content|striptags|truncatechars:300 }}
                    </p>
                </div>
                <div><a class="post-category post-category-design" href="{% url 'detail' id=post.id %}">阅读全文</a></div>

            </section>
        {% endfor %}
    </div><!-- /.blog-post -->
    {% if post_list.object_list and post_list.paginator.num_pages > 1 %}
        <div>
            {% if post_list.has_previous %}
                <a class="footer" href="?page={{ post_list.previous_page_number }}">
                    <i class="fa fa-angle-left"></i>&nbsp;&nbsp;上一页
                </a>
            {% endif %}
            {% if post_list.has_next %}
                <a class="footer" href="?page={{ post_list.next_page_number }}">
                    下一页&nbsp;&nbsp;<i class="fa fa-angle-right"></i>
                </a>
            {% endif %}
            </div>
    {% endif %}
{% endblock %}

代码中的striptagstruncatechars均为Django内置的filter,更多filter信息可以参考:https://docs.djangoproject.com/en/2.0/ref/templates/builtins/

全部代码已分享至Github:https://github.com/leeyis/jbt_blog

有账户的不妨star一下啦~


金笔头博客, 版权所有丨如未注明 , 均为原创, 转载请注明Django2.0笔记(4)-开发个人博客系统(二)
喜欢 (4)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(11)个小伙伴在吐槽
  1. 操作都可以,但是图片在页面上无法显示怎么办?
    走路带风2018-05-21 17:12 (11 hours前)Reply Windows 10 | Chrome 67.0.3371.0
    • 这里面可能的问题很多:1.图片不存在 2.图片存在,页面模板上的地址引用方式不对 3.settings.py文件设置问题
      eason2018-05-21 17:16 (11 hours前)Reply Windows 10 | Chrome 66.0.3359.181
  2. 为什么 富文本编辑文本框 里面显示的是首页封面样式啊?无法输入和编辑文字。。。
    12342018-04-18 14:35 Reply 未知操作系统 | Chrome 65.0.3325.181
    • 这是要到后台才能看到的
      Sing2018-04-19 01:01 Reply 未知操作系统 | Firefox 59.0
      • 就是admin后台-增加文章-正文的富文本框,框里面是网站首页左侧的封面,无法编辑。不好意思,作为新手,不知道怎么修改。
        12342018-04-21 23:36 Reply 未知操作系统 | Chrome 65.0.3325.181
    • 我也新手啊,博主这里的代码有点问题,他贴错了。正常按步骤做是做不出来的,除非你从头复制粘贴到最后,才能运行。我现在在B站跟着视频从三贱客开始学起,这个教程里做出来的不太好看,但这个博主的博客做得很好看。或者你下载博主的文件看看
      Sing2018-04-22 00:28 Reply 未知操作系统 | Firefox 59.0
      • 修改settings.py注册应用那里代码太长我是省略了前面的部分的(打省略号),只贴了重要部分,直接贴进去肯定是不行的,完整代码在github上
        eason2018-04-27 23:23 Reply Windows 10 | Chrome 65.0.3325.181
  3. 博主,为什么我在第5步的时候少了admin.site.register(Article)就会在发布文章时没有文本框多了这句就会报错?错误:django.contrib.admin.sites.AlreadyRegistered: The model Article is already registered
    sing2018-04-14 23:28 Reply 未知操作系统 | Firefox 59.0
  4. 你好,博主。你的第5步有问题,admin.site.register(Article)admin.site.register(Category)admin.site.register(Tag)不应该有第一条,这会导致错误,我在运行中删除了这一条后admin.site.register(Article)才能正常运行
    sing2018-04-14 21:47 Reply 未知操作系统 | Firefox 59.0
    • 对的,贴代码的时候贴错了,感谢提醒 :oops:
      eason2018-04-16 09:26 Reply Windows 10 | Chrome 65.0.3325.181
    • 文章只是参考,因为是后来写的可能有些地方有点问题,建议以我github上的代码为准,感谢指出文章中的问题 :mrgreen:
      eason2018-04-16 09:29 Reply Windows 10 | Chrome 65.0.3325.181