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


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


前面顺利启动了项目,现在来继续设置:

【设置数据库】

pychorm---blog2019----settings.py--打开---找到DATABASES 在里面设置成这样:

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',#默认,就这样填
        'NAME': 'blog2019',#数据库的名字 #(这里要先去mysql里把库建好,我这里取名blog2019)
        'USER': 'admin', #数据库的用户名
        'PASSWORD': 'wanwan11', #密码
        'HOST': '127.0.0.1', #默认,就这样填
        'PORT': '3306', #默认,就这样填
    }
}

【APP注册】

继续在settings.py里,找到 INSTALLED_APPS --在下面将blog添加进去:

以后项目下建的APP都要在这里注册!

【pymsql设置】

blog2019---__init__.py---输入:

import pymysql
pymysql.install_as_MySQLdb()

【创建静态文件夹static】

blog2019--右键---新建一个文件夹--取名:static (静态文件夹,只能是这个名字,默认的),项目树:

【static路径设置】

settings.py ---STATIC_URL = '/static/'----下面添加一行:

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'),]

【https://v3.bootcss.com/,下载bootstrap】

将下载的文件放入static中:删除多余文件,只保留这些:

jquery.min 下载地址:下载JQ

https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js

这个打开后,全选,在static中与CSS等平级下创建一个后缀为js的文件,将内容粘贴进去,名字取为入图那样。

【在templates下新文件夹blog/建第一个html页面】

新建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' %}">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <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"><img src="http://www.hui2017.top/static/blog/images/logo.png" alt="晖哥哥的博客-2019版" style="height: 35px"></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="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
      </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>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="{% static 'jquery.min.1.12.4.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>

  </body>
</html>

以上代码简单说明:

{% load staticfiles %}  load static,这样以后凡是使用static文件夹的内容,就只需要这样写路径:
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">

这个{% load staticfiles %} 必须是必须放在第一行!!

{% block you %}    {% endblock %}   这些都是模板预留的接口,相当于做填空题,你留的括号,让学生自己填!

点赞

0




登陆后方可评论