博客系统-首页展示相关

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">
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <a href="/blog/{{ article.user.username }}">{{ article.user.username }} </a>发布于:{{ article.create_time }}
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <a href=""><span
                                        class="glyphicon glyphicon-comment"></span>评论{{ article.comment_count }}
                                </a>
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <a href=""><span class="glyphicon glyphicon-thumbs-up"></span>点赞{{ article.up_count }}
                                </a>
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <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>

 

转载于:https://www.cnblogs.com/52-qq/p/8669308.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
PHPWind大型多用户高速博客个人主页系统 PHPWind 推出大型多用户博客(BLOG), 该系统以众多个人日志(主页)为内容基础, 为网站内容管理与发布提供了更好的解决方案! (1) 以 .html 为链接模式架设整个网站, 让站点的内容大量出现在各大搜索引擎 (2) 全面支持 二级域名 比如 我的个人主页 http://yuling.phpwind.net (3) 做为一个可独立运行的系统, 同时可选择性的与论坛会员及文章数据进行完美整合! (4) 完全支持 RSS, 与 WAP 手机浏览, 用句广告词就是: 手机也能博客! (5) 强大的系统管理, 能简便地进行系统管理与用户日志管理! (6) 采用多层设计, 根分类 -- 多级子分类 -- 系统团队博客 -- 个人团队博客 -- 个人主页 -- 个人专辑 (7) 采用phpwind负载核心, 具备流畅的速度与高负载能力! (8) 采用phpwind模版设计思想, 与多语言设计思想! 最大程度地进行扩展与设计!-PHPWind large multi-user system blog WEBSITE PHPWind launched a massive multi-user blog (BLOG), the system to many personal log (Home) as a foundation for Web content management with the release provided a better solution! (1). Html to link model planes the whole site is set up so that the contents of a large number of sites in the major search engines (2) full support for two domain names such as my personal home page http://yuling.phpwind.net (3) as an independent operation of the system, while the option of the Forum members and several articles It is perfect for integration! (4) fully supports the RSS, and WAP mobile browser, with the words sentence : phone can blog! (5), a powerful management system, can easily for systems management and user log management! (6) multiple design-classi

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值