【小白实战】利用django2.0,搭建属于自己的博客(四)


发布时间:2019-02-15 13:08    作者: Uncle Hui   已过去:1 年,1 月   阅读总量:511 已被赞:0


【blog/views.py里,index视图里】

先在后台随便加几篇文和标签,看效果!

将博客文章列表渲染到前端页面去显示:

from django.shortcuts import render
from .models import Post,Tag

def index(request):
    #获取全部博客列表
    post_list = Post.objects.all()
    content={
        "post_list":post_list #传递博客列表
    }
    return render(request,'blog/index.html',content)

【index.html页面接收,变量设置】

{% extends 'blog/base.html' %}
{% load staticfiles %}
{% block welcome %}
    <div class="blog-header">
        <h3 class="blog-title">晖哥哥-Blog2019</h3>
        <p class="lead blog-description">本博客基于Bootstrap搭建,纯练手项目。</p>
    </div>
{% endblock %}
{% block post %}
    {% for post in post_list %}  
        <div class="blog-post">
            <hr>
            <h4 class="blog-post-title">{{ post.title }}</h4>
            <p class="blog-post-meta">{{ post.put_in_time|date:"Y-m-d H:i" }}&nbsp;&nbsp;
                作者: <a href="#">{{ post.author }}</a></p>
            <p>{{ post.context|striptags|truncatechars:200|safe}}</p>
        </div><!-- /.blog-post -->
    {% endfor %}
{% endblock %}
{% block you %}
    <div class="sidebar-module sidebar-module-inset">
        <h4>About</h4>
        <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum.
            Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>
    <div class="sidebar-module">
        <h4>Archives</h4>
        <ol class="list-unstyled">
            <li><a href="#">March 2014</a></li>
            <li><a href="#">February 2014</a></li>           
        </ol>
    </div>
    <div class="sidebar-module">
        <h4>Elsewhere</h4>
        <ol class="list-unstyled">
            <li><a href="#">GitHub</a></li>
            <li><a href="#">Twitter</a></li>
            <li><a href="#">Facebook</a></li>
        </ol>
    </div>
    <footer class="blog-footer">
        <p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.
        </p>
        <p>
            <a href="#">Back to top</a>
        </p>
    </footer>
{% endblock %}

说明:红色部分是在循环变量出来每一条博客

新建contexts.py文件-->修改settings.py文件-->在html中使用。

1.首先我们需要在项目根目录下的同名目录建立quanjubianliang.py文件(我是打的拼音)

from blog.models import Tag
#定义一个导航栏,让每个页面都可以使用
def dhl(request):
    tags = Tag.objects.all()
    content={'tags':tags}
    return content

2.修改settings.py中的全局变量templates

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
                'blog2019.quanjubianliang.dhl', #这是我们加进去的
            ],
        },
    },
]

3.在模板中使用

base.html里修改成这样:
{% load staticfiles %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">
    <title>晖哥哥-blog2019</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    {% block head %}
    {% endblock %}
</head>
<body>
<div class="blog-masthead">
    <div class="container">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <!-- 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="/" title="晖哥哥-blog2019">晖哥哥-blog2019</a>
                    {#      <a class="navbar-brand" href="#">Brand</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="/">首页 <span class="sr-only">(current)</span></a></li>
                        {% for tag in tags %}
                            <li><a href="#">{{ tag.name }}</a></li>
                        {% endfor %}
                    </ul>
                    <form class="navbar-form navbar-left">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="搜一搜">
                        </div>
                        <button type="submit" class="btn btn-default">搜一搜</button>
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                        <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="#">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>
                            </ul>
                        </li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
    </div>
</div>
<div class="container">
    {% block welcome %}
    {% endblock %}
    <div class="row">
        <div class="col-sm-8 blog-main">
            {% block post %}
            {% endblock %}
            <nav>
                <ul class="pager">
                    <li><a href="#">上一篇</a></li>
                    <li><a href="#">下一篇</a></li>
                </ul>
            </nav>
        </div><!-- /.blog-main -->
        <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
            {% block you %}
            {% endblock %}
        </div><!-- /.blog-sidebar -->
    </div><!-- /.row -->
</div><!-- /.container -->
<footer class="blog-footer">
    <p>Blog template built for <a href="/">Bootstrap</a> by <a href="/">@huigege</a>.</p>
    <p>
        <a href="#">返回顶部</a>
    </p>
</footer>
<script src="{% static 'jquery.min.1.12.4.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</body>
</html>

 

效果图:

点赞

0




登陆后方可评论