type
Post
status
Invisible
date
Aug 22, 2023
slug
summary
tags
开发
建站
Python
DevOps
Django
category
技术基本功
icon
password
Property
Jun 26, 2024 08:10 AM

创建主页

创建一个应用,并添加路由
以下是一个简单的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项目设置路由的基本步骤:
  1. 创建一个应用 (如果你还没有的话):
    1. python manage.py startapp monitoring
  1. 在项目的settings.py中添加应用
    1. INSTALLED_APPS = [ ... 'monitoring', ]
  1. 在应用目录下创建urls.py
    1. 如果你的应用名为monitoring,那么在monitoring目录下创建一个urls.py文件。
  1. 在应用的urls.py中定义路由
    1. from django.urls import path from . import views urlpatterns = [ path('', views.index, name='index'), path('dashboard/', views.dashboard, name='dashboard'), ]
      在上面的代码中,我们定义了两个路由:一个是主页,另一个是监控面板。
  1. 在项目的主urls.py中包含应用的路由
    1. 打开你的项目目录下的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应用的路由添加到主项目的路由中。
  1. 创建视图函数
    1. monitoring/views.py中,你需要为上面定义的路由创建相应的视图函数。
      from django.shortcuts import render def index(request): return render(request, 'index.html') def dashboard(request): return render(request, 'dashboard.html')
      在这里,我们为indexdashboard路由分别定义了视图函数,并渲染了相应的HTML模板。
  1. 启动开发服务器
    1. python manage.py runserver
现在,当你访问http://localhost:8000/时,你会看到index.html页面,而当你访问http://localhost:8000/dashboard/时,你会看到dashboard.html页面。
这就是在Django中设置路由的基本步骤。你可以根据项目的需求进一步扩展和定制路由配置。
 

给主页添加图片

为了在你的主页上添加一幅 "Big Brother" 的图片,你需要遵循以下步骤:
  1. 获取图片: 首先,确保你有权使用你选择的图片。你可以从免费的图库网站上下载图片,或者使用你自己的图片。
  1. 将图片添加到Django项目中: 将图片放在你的Django项目的静态文件夹中。通常,你可以创建一个名为static的目录在你的应用或项目根目录下,并在其中创建一个img子目录来存放图片。
    1. 例如,路径可能是:your_project/your_app/static/img/big_brother.jpg
  1. 在Django的settings.py中配置静态文件: 如果你还没有配置静态文件,你需要确保settings.py中有以下设置:
    1. STATIC_URL = '/static/'
      如果你在生产环境中,你还需要其他设置,如STATICFILES_DIRSSTATIC_ROOT,但在开发环境中,上述设置应该足够了。
  1. 修改index.html以显示图片: 使用Django的{% static %}模板标签来引用静态文件。首先,你需要在模板的顶部加载static标签,然后你可以使用它来引用你的图片。
    1. {% 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%的宽度,以使其适应容器的宽度,并添加了一些底部边距。
  1. 启动开发服务器并查看页面: 现在,当你访问你的主页时,你应该能够看到"Big Brother"的图片显示在页面上。
这就是在Django项目中添加和显示静态图片的基本步骤。你可以根据需要进一步定制和调整图片的显示方式。

给网站添加图标

为你的Django应用添加网站图标(通常称为favicon)是一个相对简单的过程。以下是步骤:
  1. 准备favicon: 你需要一个.ico格式的图标。有许多在线工具可以帮助你将常见的图片格式(如.png.jpg)转换为.ico格式。确保你的favicon大小至少为16x16像素,但现代网站通常使用32x32或更大的尺寸。
  1. 将favicon放入Django的静态文件夹: 将favicon.ico文件放入你的Django项目的静态文件夹中。例如,你可以放在:
    1. your_project/your_app/static/img/favicon.ico
  1. 在Django的settings.py中配置静态文件(如果尚未配置):
    1. STATIC_URL = '/static/'
  1. 在你的HTML模板中引用favicon: 在你的HTML模板的<head>部分,使用以下代码引用favicon:
    1. {% load static %} <link rel="icon" href="{% static 'img/favicon.ico' %}" type="image/x-icon">
      这里,我们使用Django的{% static %}模板标签来引用静态文件。
  1. 启动开发服务器并查看页面: 当你访问你的网站时,你应该能够在浏览器的标签页上看到你的favicon。
  1. 为不同的设备和尺寸提供多个图标(可选): 有时,你可能希望为不同的设备和屏幕尺寸提供不同的图标。例如,Apple设备使用的是一个叫做Apple Touch Icon的图标,通常是一个PNG文件,尺寸为180x180像素。你可以这样引用它:
    1. <link rel="apple-touch-icon" sizes="180x180" href="{% static 'img/apple-touch-icon.png' %}">
      你可以为不同的尺寸和设备提供多个这样的图标。
这就是为Django应用添加favicon的基本步骤。确保你的favicon设计与你的网站的品牌和设计相匹配,以提供一致的用户体验。
 
MySQLRedis 基本操作