Wolf从零学编程-用Django撸个Blog(七)

本文介绍了作者学习模板的过程,包括如何快速掌握HTML、CSS及JS基础知识,并通过实践改造模板。此外,还分享了如何改进博客功能,如文章列表排序、首页展示、添加搜索功能等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这一篇记录了学习模板的过程,以及对之前编写内容的一些改进。


模板学习

我个人模板学习的流程:

  • 迅速把html、CSS、JS的基础知识读了一遍,了解怎么查阅W3Cschool自强学堂的参考手册。
  • 上网找一个自己喜欢的模板,然后开始看代码,不懂的地方查阅参考手册
  • 创建一个base.html,再适当修改,把模板改造成自己的

学习完毕!本模板来自模板之家


改进

文章列表顺序

我的文章列表是按发布时间排列的,这应该是不太合理的,进入博客后,首先看到的应当是最新发布的,因此要改成按发布时间逆序排列。
这就比较简单了,在取出文章列表的代码上添加了排序就可以。

# views.py

class IndexView(ListView):
    ...

    #重写get_queryset方法,只显示已发布的文章
    def get_queryset(self):
	    article_list = Article.objects.filter(status='published')**.order_by('-created_time')**
	    return article_list
	...

class CategoryView(ListView):
    ...

    #重写get_queryset方法,从已发布的文章中按分类筛选
    def get_queryset(self):
	    article_list = Article.objects.filter(category=self.kwargs['category_id'],status='published')**.order_by('-created_time')**
	    return article_list
    
    ...

#和CategoryView完全一样        
class TagView(ListView):
    ...

    #重写get_queryset方法,从已发布的文章中按标签筛选
    def get_queryset(self):
	    article_list = Article.objects.filter(tag=self.kwargs['tag_id'],status='published')**.order_by('-created_time')**
	    return article_list

如此即可,所有会显示文章列表的页面都是逆序排列了。

刚巧到这里,想到评论也应该是逆序的~~

# views.py

class ArticleView(DetailView):
    ...
        
    #把评论form添加到context
    def get_context_data(self,**kwargs):
        kwargs['comment_list'] = self.object.comment_set.all()**.order_by('-created_time')**
        kwargs['form'] = CommentForm()

上一张目前的截图:

mark

首页只显示最近5篇

一般在博客首页只会显示最近发布的几篇文章,而分类文章列表是所有文章,所以要在首页视图中添加一个切片。

# views.py

class IndexView(ListView):
    ...

    #重写get_queryset方法,只显示已发布的文章
    def get_queryset(self):
	    article_list = Article.objects.filter(status='published').order_by('-created_time')**[:5]**
	    return article_list
	...

添加Search功能

博客的内容会不断积累,为了方便快速找到目标文章,搜索功能是必不可少的。

简单的搜索应该有一个输入框和一个提交按钮,若输入有效则执行搜索,并将搜索结果返回。

开始的想法是:

  • 搜索视图也用通用视图实现
  • 搜索框放在如上图右上角的位置,任意页面都可以直接输入搜索内容

但是两个要求暂时都不会实现,本着先上线再迭代的原则,退而求其次,添加一个搜索按钮,点击后进入搜索页,视图函数自己编。

URLconf直接添加:

# urls.py

urlpatterns = [
    ...
    url(r'^search/$',views.search,name='search'),
]

视图函数中,对输入内容进行简单的验证,然后将分类列表、标签列表、文章列表和错误渲染到搜索页中。

# views.py

def search(request):
    category_list = Category.objects.all().order_by('category')
    tag_list = Tag.objects.all().order_by('tag')
    errors=[]  #先自带隐藏错误,如果是地址栏输入search进入,直接跳到最后的return
    #若用户点击search则执行下列代码
    if 'q' in request.GET:
        q=request.GET['q']
        if not q:
            errors.append('请输入搜索内容。')
        elif len(q)>20:
            errors.append('最多只能搜索长度20的内容。')
        else:
            article_list=Article.objects.filter(title__contains=q,status='published').order_by('-created_time')
            return render(request,'blog/search_form.html',{'article_list':article_list,'category_list':category_list,'tag_list':tag_list,'query':q})
    return render(request,'blog/search_form.html',{'category_list':category_list,'tag_list':tag_list,'errors':errors})

改变页面标题

目前所有页面显示的标题都是一样的,这显然是不合理的,标题应该随着内容而变化,比如我进行搜索时,标题应该是’搜索’,因此在base.html中把title部分变为可覆盖,写成<title>{% block title %}Wolf's House{% endblock %}</title>,然后在每个模板中用相应的标题覆盖就可以了,不覆盖就会显示默认值"Wolf’s House"。

搜索页单独使用一个模板,只需要在html中将标题写成’搜索’就可以了,但首页、分类和标签我共用了一个模板,因此必须在视图函数中获取正确的title。

# views.py

class CategoryView(ListView):
    ...
    
    #重写,返回分类和标签列表
    def get_context_data(self,**kwargs):
        kwargs['category_list'] = Category.objects.all().order_by('category')
        kwargs['tag_list'] = Tag.objects.all().order_by('tag')
        **kwargs['title'] = '分类目录:%s' % Category.objects.filter(id=self.kwargs['category_id'])[0].category**
        return super(CategoryView,self).get_context_data(**kwargs)

添加一行代码,获取title后渲染模板,标题就正确的显示了。"Category.objects.filter(id=self.kwargs[‘category_id’])"得到的是一个相应ID号的列表,只有一个元素,用列表切片得到这个元素后,元素的category属性就是我需要的那个分类名称。

模板部分我只是修改了网上的模板,就不贴了,目前页面是这样的:

mark


感觉凑乎了,今天把代码上传到我的github仓库,以后慢慢迭代吧。

容我自大一次,该学习服务器部署了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值