【Django博客网站】b站项目学习系列七：博客界面

目录

首页分类数据展示

首页文章数据展示

---

• 首页分类数据展示

1. 查询分类数据并展示：修改 templates 文件夹的 index.html 文件：

   <ul class="nav navbar-nav">
       {% for cat in categories %}
           {% if cat.id == category.id %}
               <li class="nav-item active">
                   <a class="nav-link mr-2" href="/?cat_id={{ cat.id }}">{{ cat.title }}</a>
               </li>
           {% else %}
               <li class="nav-item">
                   <a class="nav-link mr-2" href="/?cat_id={{ cat.id }}">{{ cat.title }}</a>
               </li>
           {% endif %}
       {% endfor %}
   </ul>

• 首页文章数据展示

1. 查询分页数据并展示：在 home 文件夹中 views.py 的文件中加入：

   from home.models import ArticleCategory,Article
   from django.http import HttpResponseNotFound
   from django.core.paginator import Paginator,EmptyPage
   class IndexView(View):    """首页广告"""
       def get(self, request):        """提供首页广告界面"""
           #?cat_id=xxx&page_num=xxx&page_size=xxx
           cat_id=request.GET.get('cat_id',1)
           page_num = request.GET.get('page_num', 1)
           page_size = request.GET.get('page_size', 6)
           try:    # 判断分类id
               category = ArticleCategory.objects.get(id=cat_id)
           except ArticleCategory.DoesNotExist:
               return HttpResponseNotFound('没有此分类')
           categories = ArticleCategory.objects.all()   # 获取博客分类信息
           articles = Article.objects.filter(   # 分页数据
               category=category
           )
           paginator = Paginator(articles, page_size)   # 创建分页器：每页N条记录
           try:   # 获取每页商品数据
               page_articles = paginator.page(page_num)
           except EmptyPage:
               return HttpResponseNotFound('empty page')   # 没有分页数据默认给用户404
           total_page = paginator.num_pages    # 获取列表页总页数
           context = {
               'categories':categories,
               'category':category,
               'articles': page_articles,
               'page_size': page_size,
               'total_page': total_page,
               'page_num': page_num,
           }
           return render(request, 'index.html',context=context)

2. 使用模板语言展示分类数据：修改 templates 文件夹的 index.html 文件：

   <!-- 列表循环 -->
   插入 {% for article in articles %}
   <img src="{{ article.avatar.url }}" alt="avatar" style="max-width:100%; border-radius: 20px">
   <a  role="button" class="btn btn-sm mb-2 btn-warning">{{ article.category.title }}</a>
   <a class="badge badge-secondary">{{ article.tags }}</a>
   <b><a href="./detail.html" style="color: black;">{{ article.title }}</a></b>
   {{ article.sumary }}
   <span><i class="fas fa-eye" style="color: lightskyblue;"></i>{{ article.total_views }}&nbsp;&nbsp;&nbsp;</span>
   <span><i class="fas fa-comments" style="color: yellowgreen;"></i>{{ article.comments_count }}&nbsp;&nbsp;&nbsp;</span>
   <span><i class="fas fa-clock" style="color: pink;"></i>{{ article.created | date }}</span>
   插入 {% endfor %}

3. 修改底部 js 分页代码：修改 templates 文件夹的 index.html 文件：

   currentPage: {{ page_num }},
   totalPage: {{ total_page }},
   location.href = '/?cat_id={{ category.id }}&page_size={{ page_size }}&page_num='+current;

4. 通过蠕虫复制插入更多测试数据：在 MySQL 中输入：

   use blog

   再多次输入下面语句进行 2 指数形式的复制

   insert into tb_article(avatar,tags,title,sumary,content,total_views,comments_count,created, updated,author_id,category_id)
   select avatar,tags,title,sumary,content,total_views,comments_count,created,updated,author_id, category_id from tb_article;

      5. 运行成功的博客界面如下：

---

 学习介绍链接：https://blog.csdn.net/castlegirl/article/details/135075747?spm=1001.2014.3001.5501

项目链接：GitHub - haifengyuhui/project_blogweb: Project: A website for haifengyuhui's blog