Django | Anitya‘s BLOG

type

Post

status

Published

date

Aug 22, 2023

slug

summary

创建主页

创建一个应用，并添加路由

以下是一个简单的index.html页面为你的Django项目"Big Brother"：


<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Big Brother - 监控项目</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 800px;
            margin: 50px auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            text-align: center;
            color: #333;
        }

        p {
            text-align: center;
            color: #666;
        }

        a {
            display: block;
            width: 200px;
            margin: 20px auto;
            padding: 10px;
            text-align: center;
            background-color: #007BFF;
            color: #fff;
            border-radius: 5px;
            text-decoration: none;
            transition: background-color 0.3s;
        }

        a:hover {
            background-color: #0056b3;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>欢迎来到 Big Brother</h1>
        <p>您的专业监控项目</p>
        <a href="/dashboard/">进入监控面板</a>
    </div>
</body>

</html>

这个页面是一个简单的欢迎页面，有一个链接指向监控面板（你可能需要根据实际的URL结构来修改这个链接）。你可以根据自己的需求进一步定制这个页面，例如添加更多的样式、图标或其他功能。

添加路由

在Django中，路由是通过URL配置来设置的。以下是如何为你的Big Brother项目设置路由的基本步骤：

创建一个应用 (如果你还没有的话)：


python manage.py startapp monitoring

在项目的settings.py中添加应用：


INSTALLED_APPS = [
    ...
    'monitoring',
]

在应用目录下创建urls.py：

如果你的应用名为monitoring，那么在monitoring目录下创建一个urls.py文件。

在应用的urls.py中定义路由：


from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),
    path('dashboard/', views.dashboard, name='dashboard'),
]

在上面的代码中，我们定义了两个路由：一个是主页，另一个是监控面板。

在项目的主urls.py中包含应用的路由：

打开你的项目目录下的urls.py（通常位于project_name/urls.py），然后包含你刚刚创建的应用的路由。


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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('monitoring.urls')),
]

使用include函数，你可以将monitoring应用的路由添加到主项目的路由中。

创建视图函数：

在monitoring/views.py中，你需要为上面定义的路由创建相应的视图函数。


from django.shortcuts import render

def index(request):
    return render(request, 'index.html')

def dashboard(request):
    return render(request, 'dashboard.html')

在这里，我们为index和dashboard路由分别定义了视图函数，并渲染了相应的HTML模板。

启动开发服务器：


python manage.py runserver

现在，当你访问http://localhost:8000/时，你会看到index.html页面，而当你访问http://localhost:8000/dashboard/时，你会看到dashboard.html页面。

这就是在Django中设置路由的基本步骤。你可以根据项目的需求进一步扩展和定制路由配置。

给主页添加图片

为了在你的主页上添加一幅 "Big Brother" 的图片，你需要遵循以下步骤：

获取图片：首先，确保你有权使用你选择的图片。你可以从免费的图库网站上下载图片，或者使用你自己的图片。

将图片添加到Django项目中：将图片放在你的Django项目的静态文件夹中。通常，你可以创建一个名为static的目录在你的应用或项目根目录下，并在其中创建一个img子目录来存放图片。

例如，路径可能是：your_project/your_app/static/img/big_brother.jpg

在Django的settings.py中配置静态文件：如果你还没有配置静态文件，你需要确保settings.py中有以下设置：


STATIC_URL = '/static/'

如果你在生产环境中，你还需要其他设置，如STATICFILES_DIRS和STATIC_ROOT，但在开发环境中，上述设置应该足够了。

修改index.html以显示图片：使用Django的{% static %}模板标签来引用静态文件。首先，你需要在模板的顶部加载static标签，然后你可以使用它来引用你的图片。


{% load static %}

<!-- ... 其他代码 ... -->

<div class="container">
    <img src="{% static 'img/big_brother.jpg' %}" alt="Big Brother" style="width:100%; margin-bottom: 20px;">
    <h1>Big Brother 正在监视</h1>
    <!-- ... 其他代码 ... -->
</div>

在上面的代码中，我们加载了static标签，并使用它来引用big_brother.jpg图片。我们还为图片设置了100%的宽度，以使其适应容器的宽度，并添加了一些底部边距。

启动开发服务器并查看页面：现在，当你访问你的主页时，你应该能够看到"Big Brother"的图片显示在页面上。

这就是在Django项目中添加和显示静态图片的基本步骤。你可以根据需要进一步定制和调整图片的显示方式。

给网站添加图标

为你的Django应用添加网站图标（通常称为favicon）是一个相对简单的过程。以下是步骤：

准备favicon：你需要一个.ico格式的图标。有许多在线工具可以帮助你将常见的图片格式（如.png或.jpg）转换为.ico格式。确保你的favicon大小至少为16x16像素，但现代网站通常使用32x32或更大的尺寸。

将favicon放入Django的静态文件夹：将favicon.ico文件放入你的Django项目的静态文件夹中。例如，你可以放在：


your_project/your_app/static/img/favicon.ico

在Django的settings.py中配置静态文件（如果尚未配置）：


STATIC_URL = '/static/'

在你的HTML模板中引用favicon：在你的HTML模板的<head>部分，使用以下代码引用favicon：


{% load static %}
<link rel="icon" href="{% static 'img/favicon.ico' %}" type="image/x-icon">

这里，我们使用Django的{% static %}模板标签来引用静态文件。

启动开发服务器并查看页面：当你访问你的网站时，你应该能够在浏览器的标签页上看到你的favicon。

为不同的设备和尺寸提供多个图标（可选）：有时，你可能希望为不同的设备和屏幕尺寸提供不同的图标。例如，Apple设备使用的是一个叫做Apple Touch Icon的图标，通常是一个PNG文件，尺寸为180x180像素。你可以这样引用它：


<link rel="apple-touch-icon" sizes="180x180" href="{% static 'img/apple-touch-icon.png' %}">

你可以为不同的尺寸和设备提供多个这样的图标。

这就是为Django应用添加favicon的基本步骤。确保你的favicon设计与你的网站的品牌和设计相匹配，以提供一致的用户体验。