跟大妈学Django Part - 5 （Django入门续集5）

最新推荐文章于 2024-07-22 16:37:07 发布

CrankyCat

最新推荐文章于 2024-07-22 16:37:07 发布

阅读量179

点赞数

本文链接：https://blog.csdn.net/j35306406/article/details/127157559

版权

Django - Moody Box 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Template

今天努力搞搞前端。

把allauth下载到自己的项目中来，后期更改templates的话会简单很多。找到allauth github的源代码，下载代码后，复制到项目中。

download zip -> 找到allauth的文档，复制粘贴到templates即可。

完了看起来是这样的。

templates 下添加 -> base.html 作为前段基础模板，这次用的是MDB，完事了，push一次。

基础模板，这里主要是引入一些CSS， JS的，比如用MDB，Google font 放在这里就可以。以后的内容展开可以用block来进行。

{% load static %}

<!doctype html>
<html lang="en">
    <head>

        {% block meta %}
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        {% endblock %}

        {% block extra_meta %}
        {% endblock %}

        {% block corecss %}
            <!-- Font Awesome -->
            <link
                href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
                rel="stylesheet"
            />
            <!-- Google Fonts -->
            <link
                href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
                rel="stylesheet"
            />
            <!-- MDB -->
            <link
                href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/5.0.0/mdb.min.css"
                rel="stylesheet"
            />
        {% endblock %}

        {% block extra_css %}
        {% endblock %}

        {% block corejs %}
            <!-- MDB -->
            <script
                type="text/javascript"
                src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/5.0.0/mdb.min.js"
            ></script>
        {% endblock %}

        {% block extra_js %}
        {% endblock %}

        <title>Moody Box {% block extra_title %}{% endblock %}</title>

    </head>
    
    <body>

        <header class="container-fluid fixed-top"></header>

        {% if messages %}
            <div class="message-container"></div>
        {% endif %}

        {% block page_header %}
        {% endblock %}

        {% block content %}
        {% endblock %}

        {% block postloadjs %}
        {% endblock %}

    </body>
</html>

现在来到/workspace/how-do-you-do/mood/templates/mood/mood.html

如图

{% extends "base.html" %} #引入上面建好的基础模板
{% load static %} #引入CSS 

{% block content %} 
#这里就可以引入任何想要添加的模块
{% endblock %}

现在还无法打开页面的，因为我们还没有设置urls和view

先来设定urls,

/workspace/how-do-you-do/hdyd/urls.py 添加

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('accounts/', include('allauth.urls')),
    path('', include('mood.urls')), # 设定包括所有mood的urls
]

/workspace/how-do-you-do/mood/urls.py 添加

from django.contrib import admin
from django.urls import path
from . import views

urlpatterns = [
    path('', views.Mood, name='mood'), # 定义主页面的urls '' 代表主页面
]

设定views, /workspace/how-do-you-do/mood/views.py , 这里指定显示主页

from django.shortcuts import render

# Create your views here.
def Mood(request):
    return render(request, 'mood/mood.html')

接下来建立Static & media 来保存CSS 代码和图片

mkdir static #建static文档
mkdir static/css #在static文档里建CSS 保存css 代码
mkdir media #建media文档，保存图片

回去setting.py 添加以下代码，否则无法查找到css和media 文档

STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

接下来就是写主页HTML了。

{% extends "base.html" %}
{% load static %}

{% block content %}
<!--Main Navigation-->
<header>

    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top">
        <div class="container-fluid">
            <!-- Navbar brand -->
            <a class="navbar-brand nav-link text-warning" href="{% url 'mood' %}">
                <strong>Moody Box</strong>
            </a>

            <button class="navbar-toggler" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarExample01"
                aria-controls="navbarExample01" aria-expanded="false" aria-label="Toggle navigation">
                <i class="fas fa-bars"></i>
            </button>

            <div class="collapse navbar-collapse" id="navbarExample01">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item active">
                        <a class="nav-link" aria-current="page" href="{% url 'mood' %}">Home</a>
                    </li>

                    <!-- add feelings for today -->
                    <li class="nav-item">
                        <a class="nav-link" href="#" rel="nofollow">
                            RecordEmo
                        </a>
                    </li>

                    <!-- feelings summary -->
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            EmoBox
                        </a>
                    </li>
                </ul>

                <ul class="navbar-nav d-flex flex-row">
                    <!-- Icons -->
                    <li class="nav-item me-3 me-lg-0">
                        <a class="nav-link" href="https://www.youtube.com" rel="nofollow" target="_blank">
                            <i class="fab fa-youtube"></i>
                        </a>
                    </li>

                    <li class="nav-item me-3 me-lg-0">
                        <a class="nav-link" href="https://www.facebook.com" rel="nofollow" target="_blank">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                    </li>

                    <li class="nav-item me-3 me-lg-0">
                        <a class="nav-link" href="https://twitter.com" rel="nofollow" >
                            <i class="fab fa-twitter"></i>
                        </a>
                    </li>

                    <li class="nav-item me-3 me-lg-0">
                        <a class="nav-link" href="https://github.com/CrankyCat-Loves-Coding/how-do-you-do" rel="nofollow" target="_blank">
                            <i class="fab fa-github"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- Navbar -->

    <!-- Background image -->
    <div id="intro" class="p-5 text-center bg-image shadow-1-strong">
        <div class="mask bg-color">
            <div class="d-flex justify-content-center align-items-center h-100">
                <div class="px-4 bg-light bg-gradient text-black-50">

                    <div class="my-4"></div>

                    <h5 class="mb-3">Nobody can make you happy until you're happy with yourself <strong>FIRST.</strong></h5>

                    <!-- Time Counter -->
                    <h3 class="border border-light my-4 p-4">
                        Are you ready to own a Moody Box?
                    </h3>

                    <p><a href="#" class="link-info">How it works?</a></p>
                    <a class="btn btn-outline-muted btn-lg m-2 text-black-50" href="#" role="button" rel="nofollow">RecordEmo</a>
                    <a class="btn btn-outline-muted btn-lg m-2 text-black-50" href="#" role="button">EmoBox</a>
                    
                    <div class="my-4"></div>
                    
                </div>
            </div>
        </div>
    </div>
    <!-- Background image -->
</header>

<hr class="m-0" />

<!-- footer -->
<footer class="text-center p-3" class="footer-bg">
    Build for educational purpose
    <i class="fab fa-github"></i>
    <a class="text-info" href="https://github.com/CrankyCat-Loves-Coding/how-do-you-do">Source Code</a>
</footer>
<!-- footer -->

{% endblock %}

效果图