Question

我已将django-allauth纳入我的网站。它工作但帐户页面上没有样式，虽然index.html扩展了“base.html”，但也呈现了普通样式。我有这样的项目结构：

root
 -myproject
 -myapp
 -templates/
    base.html
    index.html
     ....
    --/accounts/
       login.html
       logout.html
       .....
 -static/
    --admin/
      ---css
      ---js
      ---img
    --static/
      ---css
      ---js
 -media

我的settings.py路径：

TEMPLATE_DIRS =  (os.path.join(BASE_DIR,"templates"),)

STATICFILES_DIRS = (os.path.join(BASE_DIR,"static"), )
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, "static", "admin")
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'static', 'media')

base.html文件：

  {% load staticfiles %}

<!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">
    <!-- The above 3 meta tags *must* come first in the head; any other head       content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Title</title>

    <!-- Bootstrap core CSS -->
    <link href="../static/static/css/bootstrap.min.css"  rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="../static/static/css/sticky-footer-navbar.css" rel="stylesheet">
     <link href="../static/static/css/starter-template.css" rel="stylesheet">
     <link href="../static/static/css/smart_wizard.css" rel="stylesheet" >
     <link href="../static/static/css/demo_style.css" rel="stylesheet" >
     <link href="../static/static/css/progressbutton.css" rel="stylesheet" >
 </head>

  <body>
        <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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="#">Pul</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
             <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Account <b class="caret"></b></a>
              <ul class="dropdown-menu">
              {% if not request.user.is_authenticated %}
                <li><a href="{% url 'account_login' %}">Login</a></li>
                <li><a href="{% url 'account_signup' %}">Sign Up</a></li>
               {% else %}
                <li><a href="{% url 'account_logout' %}">Logout</a></li>
                {% endif %}
              </ul>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav><br><br><br><br><br>
  {% block head_title %}
  {% endblock %}

 {% block main_content %}
 {% endblock main_content %}
{% block content %}

{% endblock %}

{% block step1 %}
 {% endblock %}
{% block step2 %}
 {% endblock %}

     <footer class="footer">
      <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
      </div>
    </footer>



    <!-- Bootstrap core JavaScript
    ================================================== -->

    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="../static/static/js/jquery.min.js"></script>

    <script src="../static/static/js/button_click.js"></script>

    <script src="../static/static/js/bootstrap.min.js"></script>

    <script src="../static/static/js/jquery.smartWizard.js"></script>


  </body>
</html>

的login.html：

 {% extends 'base.html' %}

{% load crispy_forms_tags %}

{% load i18n %}
{% load account socialaccount %}

{% block head_title %}{% trans "Sign In" %}{% endblock %}

{% block content %}

<div class = ' col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3'>
<h1>{% trans "login" %}</h1>

{% get_providers as socialaccount_providers %}

{% if socialaccount_providers %}
<p>{% blocktrans with site.name as site_name %}Please sign in with one
of your existing third party accounts. Or, <a href="{{ signup_url }}">sign up</a>
for a {{ site_name }} account and sign in below:{% endblocktrans %}</p>

<div class="socialaccount_ballot">

  <ul class="socialaccount_providers">
    <!-- connecting login with scial account -->
    <!-- {% include "socialaccount/snippets/provider_list.html" with process="login" %} -->
  </ul>

  <div class="login-or">{% trans 'or' %}</div>

</div>

{% include "socialaccount/snippets/login_extra.html" %}

{% else %}
<p>{% blocktrans %}If you have not created an account yet, then please
<a href="{{ signup_url }}">sign up</a> first.{% endblocktrans %}</p>
{% endif %}

<form class="login" method="POST" action="{% url 'account_login' %}">
  {% csrf_token %}
  {{ form|crispy }}
  {% if redirect_field_value %}
  <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
  {% endif %}
  <a class="btn btn-link button secondaryAction" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
  <button class="btn btn-default primaryAction" type="submit">{% trans "Sign In" %}</button>
</form>
</div>
{% endblock %}

我仍然无法弄清楚它是什么奇怪的问题。请帮忙！

Answer 1

您使用{% load staticfiles %}加载静态文件，但不使用static模板标记。

将所有资产链接替换为{% static 'path/to/file.ext' %}

E.g ：
替换

../static/static/css/sticky-footer-navbar.css

使用:( ，如果您的文件是全局静态文件）

{% static 'app_name/css/sticky-footer-navbar.css' %}

使用此:( ，如果您的文件是应用程序静态文件）

{% static 'app_name/css/sticky-footer-navbar.css' %}

我建议您仔细阅读Django文档：Managing static files

{％extends“base.html”％}没有连接静态

1 个答案: