Learning Log项目学习笔记之五

最新推荐文章于 2024-08-10 23:14:03 发布

逆旅匆匆

最新推荐文章于 2024-08-10 23:14:03 发布

阅读量304

点赞数 1

文章标签： python django bootstrap

本文链接：https://blog.csdn.net/2301_79350630/article/details/132634026

版权

设置样式

激活虚拟环境，安装django-bootstrap3

pip install django-bootstrap3

settings.py

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    # 第三方应用程序
    'bootstrap3',

    # 我的应用程序
    'learning_logs',
    'users',
]

# 我的设置
LOGIN_URL = '/users/login/'

# django-bootstrap3的设置
BOOTSTRAP3 = {
    'include_jquery': True,
}

修改base.html

{% load bootstrap3 %}
<!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>Learning Log</title>
    
    {% bootstrap_css %}
    {% bootstrap_javascript %}
</head>
<body>
  <!-- Static navbar -->
  <nav class="navbar navbar-default navbar-static-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"></button>
        <a class="navbar-brand" href="{% url 'learning_logs:index' %}">Learning Log</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li><a href="{% url 'learning_logs:topics' %}">Topic</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          {% if user.is_authenticated %}
            <li><a>Hello,{{ user.username }}.</a></li>
            <li><a href="{% url 'users:logout' %}">log out</a></li>
          {% else %}
            <li><a href="{% url 'users:register' %}">register</a></li>
            <li><a href="{% url 'users:login' %}">log in</a></li>
          {% endif %}
        </ul>
      </div><!-- /.nav-collapse -->
    </div>
  </nav>
  <div class="container">
    <div class="page-header">
      {% block header %}{% endblock header %}
    </div>
    <div>
      {% block content %}{% endblock content %}
    </div>
  </div><!-- /container -->
</body>
</html>

修改index.html

{% extends "learning_logs/base.html" %}

{% block header %}
    <div class="jumbotron">
        <h1>Track your learning.</h1>
    </div>
{% endblock header %}

{% block content %}
    <h2>
        <a href="{% url 'users:register' %}">Register an account</a> to make your own Learning Log, and list the topics you're learning about.
    </h2>
    <h2>
        whenever you learn something new about a topic, make an entry summarizing what you've learned.
    </h2>
{% endblock content %}

注意：代码没问题，但发现样式无法加载，需要将bootsrap.py文件中的css和js地址换成国内地址。

learning_log\ll_env\Lib\site-packages\bootstrap3\bootstrap.py

from importlib import import_module

from django.conf import settings

# Default settings
BOOTSTRAP3_DEFAULTS = {
    "css_url": {
        # "url": "https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css",
        # 换成国内地址
        "url": "https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css",
        "integrity": "sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu",
        "crossorigin": "anonymous",
    },
    "theme_url": None,
    "javascript_url": {
        # "url": "https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js",
        # 换成国内地址
        "url": "https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js",
        "integrity": "sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd",
        "crossorigin": "anonymous",
    },

测试成功

登录页面样式

{% extends "learning_logs/base.html" %}
{% load bootstrap3 %}

{% block header %}
    <h2>Log in to your account.</h2>
{% endblock header %}

{% block content %}

    <!-- {% if form.errors %}
        <p>Your username and password didn't match. Please try again.</p>
    {% endif %} -->

    <form method="post" action="{% url 'users:login' %}" class="form">
        {% csrf_token %}
        <!-- {{form.as_p}} -->
        {% bootstrap_form form %}

        {% buttons %}
            <button name="submit" class="btn btn-primary">log in</button>
        {% endbuttons %}

        <input type="hidden" name="next" value="{% url 'learning_logs:index' %}" />
    </form>

{% endblock content %}

设置new_topic页面的样式

{% extends "learning_logs/base.html" %}
{% load bootstrap3 %}

{% block header %}
    <h2>Add a new topic:</h2>
{% endblock header %}

{% block content %}
    <!-- <p>Add a new topic</p> -->

    <form action="{% url 'learning_logs:new_topic' %}" method="post" class="form">
        {% csrf_token %}
        <!-- {{form.as_p}} -->
        {% bootstrap_form form %}

        {% buttons %}
            <button name="submit" class="btn btn-primary">add topic</button>
        {% endbuttons %}
    </form>

{% endblock content %}

设置topics页面的样式

{% extends "learning_logs/base.html" %}

{% block header %}
    <h1>Topics</h1>
{% endblock header %}

{% block content %}

    <ul>
        {% for topic in topics %}
            <li>
                <h3>
                    <a href="{% url 'learning_logs:topic' topic.id %}">{{topic}}</a>
                </h3>
            </li>
        {% empty %}
            <li>No topics have been added yet.</li>
        {% endfor %}
    </ul>

    <h3><a href="{% url 'learning_logs:new_topic' %}">Add a new topic:</a></h3>

{% endblock content %}

topic.html

{% extends 'learning_logs/base.html' %}

{% block header %}
    <h2>{{topic}}</h2>
{% endblock header %}

{% block content %}

    <!-- <p>Topic:{{topic}}</p>

    <p>Entries:</p> -->
    <p>
        <a href="{% url 'learning_logs:new_entry' topic.id %}">add new entry</a>
    </p>


    {% for entry in entries %}
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3>{{entry.date_added|date:'M d, Y H:i'}}
                    <small>
                        <a href="{% url 'learning_logs:edit_entry' entry.id %}">edit entry</a>
                    </small>
                </h3>
            </div>
            <div class="panel-body">{{entry.text|linebreaks}}</div>
        </div><!-- panel -->
    {% empty %}
        There are no entries for this topic yet.
    {% endfor %}

{% endblock content %}

样式应用成功，再次提醒：

注意：代码没问题，但发现样式无法加载，需要将bootsrap.py文件中的css和js地址换成国内地址。

# "url": "https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css",
# 换成国内地址
"url": "https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css",

# "url": "https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js",
# 换成国内地址
"url": "https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js",