D22 Django-bootstrap 网站美化工程 - fontawesomefree icon

为了Google的icon还有未来应该会需要加入一些icon所以安装个好用的python包
console

pip install fontawesomefree

将下载好的fontawesomefree包内的static复制到我们专案的templates中
设定staticfiles的位置
docsystem_5/settings.py

INSTALLED_APPS = [
    'fontawesomefree',
]
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, "templates/static") ]

修改前
Imgur
修改後
Imgur

因为登入等等的页面都是在allauth的包里
所以要花一点时间理解他的结构

<!DOCTYPE html>
<html>
  <head>
    <title>{% block head_title %}{% endblock %}</title>
    {% block extra_head %}
    {% endblock %}
  </head>
  <body>
    {% block body %}

    {% if messages %}
    <div>
      <strong>Messages:</strong>
      <ul>
        {% for message in messages %}
        <li>{{message}}</li>
        {% endfor %}
      </ul>
    </div>
    {% endif %}

    <div>
      <strong>Menu:</strong>
      <ul>
        {% if user.is_authenticated %}
        <li><a href="{% url 'account_email' %}">Change E-mail</a></li>
        <li><a href="{% url 'account_logout' %}">Sign Out</a></li>
        {% else %}
        <li><a href="{% url 'account_login' %}">Sign In</a></li>
        <li><a href="{% url 'account_signup' %}">Sign Up</a></li>
        {% endif %}
      </ul>
    </div>
    {% block content %}
    {% endblock %}
    {% endblock %}
    {% block extra_body %}
    {% endblock %}
  </body>
</html>

after

<!DOCTYPE html>
<html>
  <head>
    <title>{% block head_title %}{% endblock %}</title>
    {% block extra_head %}
    {% endblock %}
    {% load static %}
    {% load bootstrap5 %}
    {% bootstrap_css %}
    <!-- <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/> -->
    <script src="{% static 'fontawesomefree/js/all.min.js' %}"></script>
    <link href="{% static 'fontawesomefree/css/all.min.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'fontawesomefree/css/fontawesome.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'fontawesomefree/css/brands.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'fontawesomefree/css/solid.css' %}" rel="stylesheet" type="text/css">
  </head>
  <body>
    {% block body %}

    {% if messages %}
    <div>
      <strong>Messages:</strong>
      <ul>
        {% for message in messages %}
        <li>{{message}}</li>
        {% endfor %}
      </ul>
    </div>
    {% endif %}

    <div class="container text-end">
      <a href="{% url 'doc_info:main' %}">Main page</a>
      <a href="{% url 'auth_info:profile' %}">My Profile</a> | 
      <a href="{% url 'doc_info:user_list' %}">My Documents</a> |
      {% if user.is_authenticated %}
      <a href="{% url 'account_logout' %}">Logout</a>
      {% else %}
      <a href="{% url 'account_login' %}">Login</a>
      {% endif %}
      <p>Welcome {{ user.first_name }} {{ user.last_name }}</p>
    </div>
    {% block content %}
    {% endblock %}

    {% endblock %}
    {% block extra_body %}
    {% endblock %}
  </body>
</html>

templates/account/login.html

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

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

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

{% block content %}


<h1>{% trans "Sign In" %}</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">
    {% 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.as_p }}
  {% if redirect_field_value %}
  <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
  {% endif %}
  <a class="button secondaryAction" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
  <button class="primaryAction" type="submit">{% trans "Sign In" %}</button>
</form>

{% endblock %}


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

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

{% block head_title %}{% trans "Sign In" %}{% endblock %}
{% block extra_head %}
{% endblock %}
{% load static %}
{% load bootstrap5 %}
{% bootstrap_css %}
<!-- <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/> -->
<script src="{% static 'fontawesomefree/js/all.min.js' %}"></script>
<link href="{% static 'fontawesomefree/css/all.min.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'fontawesomefree/css/fontawesome.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'fontawesomefree/css/brands.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'fontawesomefree/css/solid.css' %}" rel="stylesheet" type="text/css">

{% block content %}


<div class="container col-3">
  <div>
    <p class="h2 text-center">{% trans "Sign In" %}</p>
  </div>
  <div><hr></div>

  <div class="container text-center col-12">
    <a class="btn btn-danger" href="/accounts/google/login"><i class="fab fa-google"></i> | Sign in with Google</a>
    <p></p>
    <p>or sign in with your account</p>
  </div>
  <div>
    <form class="login" method="POST" action="{% url 'account_login' %}">
      {% csrf_token %}
      <table class="table table-bordered">
        {% for field in form %}
          <tr>
            <th>{{ field.label }}</th>
            <td>{{ field }}</td>
          </tr>
        {% endfor %}
      </table> 
      {% if redirect_field_value %}
      <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
      {% endif %}

      <div class="text-center">
        <button class="btn btn-primary" type="submit">{% trans "Sign In" %}</button>
      </div>
    </form>
  </div>
  <div><hr></div>
  <div class="text-center">
    <a class="btn btn-link" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
    <a class="btn btn-link" href="{% url 'account_signup' %}">Sign up</a>
  </div>


</div>


{% endblock %}

<<:  DAY16 - 在 Bitbucket 显示 Jupyter Notebook

>>:  【Day13】特殊性营运流程篇-维修

Expression 与 Statement

表达式 (Expression) A unit of code that results in a ...

JS Getter 与 Setter DAY71

Setter 与 Setter Getter: 取得特定值的方法 Setter: 存值的方法 Get...

献出你的心脏，将AWS EC2注入新生命

招唤进击的巨人 前几日，已经把完整的架构，以及如何撰写YAML，且使用CloudFormation客...

Day 30 「无心之心，道之所存」结语

Christopher Alexander 在「建筑的永恒之道」中，开头第一句就说了：「无心之心，道...

D9-(9/9)-八方云集(2753) 真正的水饺股

注:发文日和截图的日期不一定是同一天，所以价格计算上和当日不同，是很正常的。 声明:这一系列文章并无...