D22 Django-bootstrap 網站美化工程 - fontawesomefree icon - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 22

Modern Web

Python x Django 網站實作&學習記錄系列第 22 篇

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

13th鐵人賽

Mark Here

2021-09-28 06:00:48

7031 瀏覽

分享至

為了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的包裡
所以要花一點時間理解他的結構

參考資料: https://fontawesome.com/v5.15/icons/google?style=brands
templates/account/base.html

<!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 %}