Python web模版Django-25　在Django中加载css实例　（基于23，对24的index.html进一步修改）

在前面Django-24的笔记中，对index.html用Django-bootstrap3进行了改造简化，Django-bootstrap3中引用的css，js其实还是Bootstrap的CDN。CDN虽然方便，但以后带来的问题也是可以遇见的，就是CDN服务器关了的话，我们开发的网页就没有了样式。所以还是要尝试将相关CSS，JS部署到自己放心的地方。

　这里结合Django-23笔记中的方法，将signin.css移到本项目目录中。

step1: 创建目录放置css文件，在sign->templates下创建static文件夹，再在其下创建css和images文件夹，如果有需要可以创建javascript文件夹。

step2: 在settings.py文件中设置templates和静态路径

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR,"sign/templates").replace("\\", "/"),
                 os.path.join(BASE_DIR, 'templates').replace("\\", "/")],
        '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',
            ],
        },
    },]

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'sign/templates/static')

STATICFILES_DIRS = (
    ('css', os.path.join(STATIC_ROOT, 'css')),
    ('images', os.path.join(STATIC_ROOT, 'images')),
)

step3: 修改urls.py文件

在urls.py开头加上一句：

from django.contrib.staticfiles.urls import staticfiles_urlpatterns

在urls.py的最后加上以下内容：

urlpatterns += staticfiles_urlpatterns()

step4: 在pycharm中用collectstatic命名

step5: 修改index.html文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    {% load bootstrap3 %}
    {% bootstrap_css %}
    {% bootstrap_javascript %}
    {% bootstrap_messages %}
    <!-- Custom styles for this template -->
    <!--link href="../signin.css" rel="stylesheet"-->
     <link href="/static/css/signin.css" rel="stylesheet" type="text/css"/>
  </head>

  <body>

    <div class="container">

      <form class="form-signin" action="/login_action/" method="post">
        <h2 class="form-signin-heading">发布会管理</h2>
        <label for="inputUsername" class="sr-only">username</label>
        <input type="text" id="inputUsername" name="username" class="form-control" placeholder="username" required autofocus>
        <label for="inputPassword" class="sr-only">password</label>
        <input type="password" id="inputPassword" name="password" class="form-control" placeholder="password" required>

        <button class="btn btn-lg btn-primary btn-block" type="submit" id="btn">登录</button>
         {{wronglyInput}}<br>
         {% csrf_token %}
      </form>

    </div> <!-- /container -->

  </body>
</html>

step6: 运行看看效果，运行正常，说明本地的css加载成功

Python web模版Django-25 在Django中加载css实例 （基于23，对24的index.html进一步修改 ）

猜你喜欢

Python web模版Django-25　在Django中加载css实例　（基于23，对24的index.html进一步修改）