博客系統-首頁展示相關
阿新 • • 發佈：2018-03-29
pat pup turn === 點擊 charset -o tint one
URL配置
from django.conf.urls import url,include from django.contrib import admin from blogCMS import settings from django.views.static import serve from blog import views from blog import urls urlpatterns = [ url(r‘^admin/‘, admin.site.urls), url(r‘^index/?(.*)‘,views.index), ]
視圖處理相關
def index(request,*args,**kwargs): print(kwargs) if kwargs: article_list = models.Article.objects.filter(site_article_category__name=kwargs.get("site_article_category")) print("=====>",article_list) else: article_list = models.Article.objects.all() cate_list= models.SiteCategory.objects.all() # 分頁相關 paginator = Paginator(article_list, 3) page_range = paginator.page_range num = request.GET.get("page", 1) article_list = paginator.page(num) return render(request,"index.html",locals())
前端頁面展示相關
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script src="/static/jquery/jquery-3.2.1.min.js"></script> <script src="/static/jquery/jquery.cookie.js"></script> <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css"> <script src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script> {# JavaScript導入的時候用script，css導入用link#} </head> <body> {#導航條部分#} <nav class="navbar navbar-inverse"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-home">博客園</span></a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> {% if request.user.is_authenticated %} <li><a href="">當前用戶<span class="glyphicon glyphicon-user"></span>：{{ request.user.username }}</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多操作 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="/log_out/"><span class="glyphicon glyphicon-off"></span>註銷</a></li> <li><a href="#"><span class="glyphicon glyphicon-repeat"></span>修改密碼</a></li> <li><a href="#"><span class="glyphicon glyphicon-tint"></span>幫助</a></li> <li><a href="#"><span class="glyphicon glyphicon-question-sign"></span>更多</a></li> <li role="separator" class="divider"></li> <li><a href="#"><span class="glyphicon glyphicon-menu-hamburger"></span>關於</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> {% else %} <li><a href="/login/"><span class="glyphicon glyphicon-user"></span>登錄</a></li> <li><a href="/reg/"><span class="glyphicon glyphicon-user"></span>註冊</a></li> {% endif %} </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> {#網站主體部分#} <div class="container"> <div class="row"> <div class="col-md-2"> {# 左側菜單列表#} <div class="panel panel-default"> <div class="panel-heading">網站導航分類</div> <div class="panel-body"> {% for cate in cate_list %} <div class="panel panel-default"> <div class="panel-body cate_title">{{ cate.name }}</div> <div class="panel-footer hide sub"> {% for sitearticlecategory in cate.sitearticlecategory_set.all %} <p><a href="/cate/{{ sitearticlecategory.name }}">{{ sitearticlecategory.name }}</a> </p> {% endfor %} </div> </div> {% endfor %} </div> </div> </div> <div class="col-md-7"> <div class="panel panel-primary"> <div class="panel-heading">博客園主頁文章顯示</div> <div class="panel-body"> {# 中間內容區域#} {% for article in article_list %} <div class="article_item"> <div class="title"><a href="/blog/{{ article.user.username }}/article/{{ article.nid }}"><h4>{{ article.title }}</h4></a></div> <div class="row"> <div class="avatar col-md-2"> <a href="{% url ‘blog‘ article.user.username %}"> <img src="{{ article.user.avatar.url }}" width="70" height="70" alt=""> </a> </div> <div class="col-md-10"> <p>{{ article.desc }}</p> </div> </div> <div class="pub_info row"> <a href="/blog/{{ article.user.username }}">{{ article.user.username }} </a>發布於：{{ article.create_time }} <a href=""><span class="glyphicon glyphicon-comment"></span>評論{{ article.comment_count }} </a> <a href=""><span class="glyphicon glyphicon-thumbs-up"></span>點贊{{ article.up_count }} </a> <a href=""><span class="glyphicon glyphicon-share-alt">轉發</span></a> </div> </div> <hr> {% endfor %} </div> </div> <div class="page_page" style="text-align: center"> {% block page %} <nav aria-label="Page navigation"> <ul class="pagination"> {% if article_list.has_previous %} <li><a href="/index?page={{ article_list.previous_page_number }}" aria-label="Previous">上一頁</a> </li> {% else %} <li class="disabled"><a href="" aria-label="Previous">上一頁</a></li> {% endif %} {% for index in page_range %} {% if num == index %} <li class="active"><a href="/index?page={{ index }}">{{ index }}</a></li> {% else %} <li><a href="/index?page={{ index }}">{{ index }}</a></li> {% endif %} {% endfor %} {% if article_list.has_next %} <li><a href="/index?page={{ article_list.next_page_number }}" aria-label="Previous">下一頁</a></li> {% else %} <li class="disabled"><a href="" aria-label="Previous">下一頁</a></li> {% endif %} </ul> </nav> {% endblock %} </div> </div> <div class="col-md-3"> {# 右側分類展示#} <div class="panel panel-default"> <div class="panel-heading">廣告位</div> <div class="panel-body"> <p>澳門巴黎人</p> <p>開局一把刀</p> <p>一刀九九九</p> <p>裝備全靠撿</p> </div> </div> <div class="panel panel-default"> <div class="panel-heading">備用標題二</div> <div class="panel-body"> <p>內容一</p> <p>內容二</p> <p>內容三</p> <p>內容四</p> </div> </div> </div> </div> </div> <script> $(".cate_title").click(function () { {#點擊當前的#} $(".sub").addClass("hide"); {#子菜單添加隱藏屬性#} $(this).next().toggleClass("hide"); {#有的話添加，沒有的話去掉#} }); </script> </body> </html>
博客系統-首頁展示相關