Django快速模版

创建一个好看的Django学习网站模板需要结合HTML、CSS、JavaScript以及Django模板语言（DTL）。以下是一个简单的示例，展示如何创建一个基本的Django学习网站模板。

### 1. 项目结构
首先，确保你的Django项目结构如下：
```
myproject/
├── myproject/
│ ├── __init__.py
│ ├── settings.py
│ ├── urls.py
│ ├── wsgi.py
│ └── asgi.py
├── myapp/
│ ├── migrations/
│ ├── __init__.py
│ ├── admin.py
│ ├── apps.py
│ ├── models.py
│ ├── tests.py
│ ├── views.py
│ └── templates/
│ └── myapp/
│ ├── base.html
│ ├── index.html
│ ├── about.html
│ └── contact.html
├── manage.py
└── static/
└── myapp/
├── css/
│ └── styles.css
├── js/
│ └── scripts.js
└── images/
```

### 2. 创建基础模板 (`base.html`)
在`myapp/templates/myapp/`目录下创建`base.html`文件，作为所有页面的基础模板。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Django Learning Site{% endblock %}</title>
<link rel="stylesheet" href="{% static 'myapp/css/styles.css' %}">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="{% url 'index' %}">Home</a></li>
<li><a href="{% url 'about' %}">About</a></li>
<li><a href="{% url 'contact' %}">Contact</a></li>
</ul>
</nav>
</header>

<main>
{% block content %}
{% endblock %}
</main>

<footer>
<p>&copy; 2023 Django Learning Site. All rights reserved.</p>
</footer>

<script src="{% static 'myapp/js/scripts.js' %}"></script>
</body>
</html>
```

### 3. 创建首页模板 (`index.html`)
在`myapp/templates/myapp/`目录下创建`index.html`文件，继承自`base.html`。
```html
{% extends 'myapp/base.html' %}

{% block title %}Home - Django Learning Site{% endblock %}

{% block content %}
<h1>Welcome to Django Learning Site</h1>
<p>This is the home page of our Django learning website.</p>
{% endblock %}
```

### 4. 创建关于页面模板 (`about.html`)
在`myapp/templates/myapp/`目录下创建`about.html`文件，继承自`base.html`。
```html
{% extends 'myapp/base.html' %}

{% block title %}About - Django Learning Site{% endblock %}

{% block content %}
<h1>About Us</h1>
<p>Learn more about our Django learning site and our mission.</p>
{% endblock %}
```

### 5. 创建联系页面模板 (`contact.html`)
在`myapp/templates/myapp/`目录下创建`contact.html`文件，继承自`base.html`。
```html
{% extends 'myapp/base.html' %}

{% block title %}Contact - Django Learning Site{% endblock %}

{% block content %}
<h1>Contact Us</h1>
<p>Get in touch with us for any questions or feedback.</p>
<form method="post">
{% csrf_token %}
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Send</button>
</form>
{% endblock %}
```

### 6. 配置URL
在`myapp/urls.py`中配置URL路由：
```python
from django.urls import path
from . import views

urlpatterns = [
path('', views.index, name='index'),
path('about/', views.about, name='about'),
path('contact/', views.contact, name='contact'),
]
```

在`myproject/urls.py`中包含应用的URL配置：
```python
from django.contrib import admin
from django.urls import include, path

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

### 7. 编写视图
在`myapp/views.py`中编写视图函数：
```python
from django.shortcuts import render

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

def about(request):
return render(request, 'myapp/about.html')

def contact(request):
return render(request, 'myapp/contact.html')
```

### 8. 添加静态文件
在`static/myapp/css/`目录下创建`styles.css`文件，添加一些基本的样式：
```css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}

header {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}

nav ul {
list-style: none;
padding: 0;
}

nav ul li {
display: inline;
margin: 0 15px;
}

nav ul li a {
color: #fff;
text-decoration: none;
}

main {
padding: 20px;
text-align: center;
}

footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
position: fixed;
width: 100%;
bottom: 0;
}
```

在`static/myapp/js/`目录下创建`scripts.js`文件，添加一些基本的JavaScript代码：
```javascript
document.addEventListener('DOMContentLoaded', function() {
console.log('Django Learning Site is ready!');
});
```

### 9. 运行开发服务器
启动Django开发服务器：
```bash
python manage.py runserver
```

访问`http://127.0.0.1:8000/`，你应该会看到一个简单的Django学习网站。

### 10. 进一步美化
你可以使用Bootstrap、Tailwind CSS等前端框架来进一步美化网站。例如，使用Bootstrap：
- 在`base.html`中引入Bootstrap的CSS和JS文件。
- 使用Bootstrap的组件和样式来增强页面的视觉效果。

通过以上步骤，你可以创建一个简单但功能齐全的Django学习网站模板。根据需求，你可以进一步扩展和美化这个模板。

posted @ 2025-02-13 01:27  Catonce  阅读(93)  评论(0)    收藏  举报