BBS博客园的首页搭建

一、首页搭建

①三个div标签,先把两个侧边栏的div搭建好,可以写用户相关的信息,也可以写广告     
        <div class="col-md-2"></div>   # 广告
        <div class="col-md-8"></div>   # 所有文章
        <div class="col-md-2"></div>   # 广告
        
②admin后台管理
        开始搭建中间的文章页面,涉及到admin后台管理,要录入模型层里面的数据,方便写文章数据
        就需要创建一个超级用户:createsuperuser,
        需要将模型表注册到对应应用名下水位admin.py文件中去(注册的顺序没有关系):
            from app01 import models 
            admin.site.register(models.UserInfo)
            admin.site.register(models.Blog)
            admin.site.register(models.Category)
            admin.site.register(models.Tag)
            admin.site.register(models.Article)
            admin.site.register(models.Article2Tags)
            admin.site.register(models.UpAndDown)
            admin.site.register(models.Comment)
            
        然后登入后台管理,开始录入文章信息
        我们的文章数据就在后台管理中写,创建三个用户,用户有不同的站点样式,以及文章内容
        每个用户下面写入几篇文章方便前端个人站点页面样式以及数据的展示。
        每个用户在展示个人站点的时候,通过设置html使个人站点具有和博客园相同的样式。
            文章标题
            文章描述
            文章内容
            用户头像
        绑定关系的时候:
        phone = models.BigIntegerField(null=True, blank=True) # blank告诉django后台管理该字段可以为空
        
        然后在展示文章页面的时候,有一个用户头像展示不出来,这就涉及到静态文件配置
        我们的静态文件都放在static文件夹下面
        然后我们需要将将用户上传的头像单独放在另外一个文件夹(media文件夹下)
        
        
③media配置展示用户头像:
            这时候我们就需要在settings中配置用户上传的文件存放位置:MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
            当用户上传头像时,django会自动把头像放在media这个文件夹下,然后media这个文件夹下还有avatar这个文件夹。
                
            然后又涉及到手动写media网址,就能访问到头像,这时候就需要在后端写一个路由函数,手动配置media路径
            先导入一个模块from django.views.static import serve
            url中手动配置media路径:url(r'^media/(?P<path>.*)',serve,{'document_root':settings.MEDIA_ROOT}),
            前端头像设置:<img class="media-object" src="/media/{{ article.blog.userinfo.avatar }}/" alt="" width="60">
            然后上面的配置都写好了之后,就会将后端media文件夹所有的资源暴露给用户,用户输入路径直接能够访问到
            这时候用户头像就能正常展示
        
        
④图片防盗链 
            我们在访问别人图片的时候,有时候会加载不出来,这是因为别人在他们的网站上设置了图片防盗链
            因为在访问别人网页图片的时候,别人要确定你是通过什么路径来访问图片的
            如果是他们博客的正常用户就可以访问,如果是其他路径就拒接访问
            
            所以要设置图片防盗链,要设置一个referer,通过校验referer,来知道你是通过什么路径访问图片的。
                
            Referer: https://www.cnblogs.com/  # 标记你上一次是从哪个页面访问过来的    
            
            这个功能可以在中间件中写

二、个人站点

①当用户输入不同的路径能够访问各自的站点,    #  url(r'^(?P<username>\w+)/$', views.site)
        然后用户进入各自的站点后,有侧边栏和文章内容
        
        <div class="col-md-3"></div>   # 标签  分类  日期归档
        <div class="col-md-9"> </div>  # 文章
        
        侧边栏在写的时候,我们要分析一下,他们与文章之间的关系
        显然分类和文章是一对多 就表示这篇文章只能出现在一个分类下面,
        而标签就不一样了,文章可以出现在多个标签之下
        
        
②侧边栏的三个功能  # 标签  分类  日期归档
        
        # 写三条路由跟分类,标签,日期对应上,让后端能够知道你想按找什么条件进行筛选
     
分类:用到按分类分组,分组之前还要统计每个分类下的文章数,用到分组查询annotate 也就是统计户对应的每一个分类及分类下的文章数 后端:category_list = models.Category.objects.filter(blog=blog).annotate(c=Count('article')).values_list('name', 'c', 'pk') 前端:{% for category in category_list %} <p><a href="">{{ category.0 }}({{ category.1 }})</a></p> {% endfor %} 标签:按标签分组,分组之前还要统计每个标签下的文章数 tag_list = models.Tag.objects.filter(blog=blog).annotate(c=Count('article')).values_list('name', 'c', 'pk') 日期归档:日期归档的时候是要按年月分组,所以在归档的时候要用到一个模块,先导入模块 from django.db.models.functions import TruncMonth # 按照年月对文章进行统计 id create_time month 1 2018-06-21 2018-06 2 2019-08-11 2019-08 3 2019-08-21 2019-08 4 2019-03-11 2019-03 官方提供 from django.db.models.functions import TruncMonth models.Article.objects .annotate(month=TruncMonth('create_time')) # Truncate to month and add to select list .values('month') # Group By month .annotate(c=Count('id')) # Select the count of the grouping .values('month', 'c') # (might be redundant, haven't tested) select month and count date_list = models.Article.objects.filter(blog=blog).annotate(month=TruncMonth('create_time')).values('month').annotate( c=Count('pk')).values_list('month', 'c')

三、左侧栏筛选

猜你喜欢

转载自www.cnblogs.com/zhangguosheng1121/p/11079130.html