博客首页和个人博客主页

首页与个人博客主页

一 首页渲染

在url中添加index

#引入模块
from app01 import views

#添加index
url(r'^index/', views.index)

#默认为index
url(r'^$', views.index)

进入视图函数，创建index函数

def index(request,*args,**kwargs):
    #**kwargs接收键值对，判断kwargs
    if kwargs:
        #判断正确,进行网站查询（反向查询按字段形式）
        article_list=models.Article.objects.filter(site_article_category__name=kwargs.get("site_article_category"))
    else:
        #否则查询所有文章
        article_list=models.Article.objects.all()
    #利用SiteCategory循环遍历所有的数据
    cate_list=models.SiteCategory.objects.all()

    return render(request,"index.html",{"article_list":article_list,"cate_list":cate_list})

 

创建index.html文件

#导入bookstrap，找到自己想要的页面格式
<!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/dist/js/jquery-3.1.1.js"></script>
    <script src="/static/dist/js/bootstrap.js"></script>

    <link rel="stylesheet" href="/static/dist/css/bootstrap.css">

    <style>

        .hides{
            display: none;
        }
        
    </style>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">博客园</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>

      </ul>

      <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><a href="/logout/">注销</a></li>
         {% else %}
            <li><a href="/login/">登录</a></li>
            <li><a href="/reg/">注册</a></li>
        {% endif %}

         <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>

      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>


<div class="container">
    <div class="row">
        <div class="col-md-2">
                  <div class="panel panel-primary">
                  <div class="panel-body">
                   网站分类
                  </div>
                  <div class="panel-footer">
                      {% for cate in cate_list %}
                          <div class="panel panel-default">
                              <div class="panel-body cate_title">{{ cate.name }}</div>
                              <div class="panel-footer hides">
                                  {% 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="article_list">
                  {% for article in article_list %}
                      <div class="article_item">
                          <div class="title"><a href="#">{{ article.title }}</a></div>
                           <div class="row">
                               <div class="avatar col-md-2">
                                   <a href="{% url 'aaa'  article.user.username %}"><img src="{{ article.user.avatar.url }}" alt="" width="60" height="60"></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>&nbsp;&nbsp;&nbsp;发布于&nbsp;&nbsp;{{ article.create_time|date:"Y-m-d H:i" }}
                               <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>
                           </div>
                      </div>
                      <p></p>
                  {% endfor %}

            </div>
        </div>
        <div class="col-md-3">
               <div class="panel panel-info">
                  <div class="panel-body">
                    Panel content
                  </div>
                  <div class="panel-footer">Panel footer</div>
                </div>
                <div class="panel panel-warning">
                  <div class="panel-body">
                    Panel content
                  </div>
                  <div class="panel-footer">Panel footer</div>
                </div>
               <div class="panel panel-success">
                  <div class="panel-body">
                    Panel content
                  </div>
                  <div class="panel-footer">Panel footer</div>
                </div>
        </div>
    </div>
</div>


</body>
</html>
View Code

在admin中添加数据，首先配置admin文件

from django.contrib import admin

# Register your models here.
from blog.models import *

admin.site.register(UserInfo)
admin.site.register(Article)
admin.site.register(Blog)
admin.site.register(ArticleDetail)
admin.site.register(Category)
admin.site.register(Tag)
admin.site.register(Comment)
admin.site.register(CommentUp)
admin.site.register(ArticleUp)
admin.site.register(SiteArticleCategory)
admin.site.register(SiteCategory)
admin.site.register(Article2Tag)
View Code

给cate_title绑定mouseover事件实现鼠标放到cate_title上显示下面的文章分类和鼠标一开之后隐藏文章类型

slideDown----滑动效果（显示）   slideUp----滑动效果（隐藏）

$(".cate_title").mouseover(function () {
        $(this).next().slideDown(300)
    }).parent().mouseleave(function () {
         $(this).children(".panel-footer").slideUp(300)
     })

在url添加新得路由，以键值对方式返回视图

url(r'^cate/(?P<site_article_category>.*)/$', views.index)

 

二 个人博客主页

 

posted @ 2017-11-27 09:54  丶陌潇  阅读(885)  评论(0)    收藏  举报