上边的代码帮我使用bootstrap4框架渲染的好看一点
时间: 2024-04-08 07:32:51 浏览: 73
当然,我可以帮你使用Bootstrap 4框架来美化你的博客。以下是经过Bootstrap 4渲染的代码示例:
1. 在`settings.py`文件中,将以下CDN链接添加到`STATICFILES_DIRS`列表中:
```python
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]
```
2. 在项目根目录下创建一个`static`文件夹,并在其中创建一个`css`文件夹。
3. 在`css`文件夹中创建一个名为`style.css`的文件,用于自定义样式:
```css
/* style.css */
.container {
max-width: 800px;
margin-top: 50px;
}
.form-group label {
font-weight: bold;
}
.form-group input[type="file"] {
padding-top: 5px;
}
```
4. 在`views.py`文件中,修改导入文章视图函数,以使用Bootstrap 4渲染表单:
```python
from django.shortcuts import render
from django.contrib import messages
from .forms import ExcelImportForm
from .models import Article
import pandas as pd
def import_articles(request):
if request.method == 'POST':
form = ExcelImportForm(request.POST, request.FILES)
if form.is_valid():
excel_file = request.FILES['excel_file']
df = pd.read_excel(excel_file)
for _, row in df.iterrows():
article = Article(title=row['Title'], content=row['Content'])
article.save()
messages.success(request, '博客文章已成功导入!')
else:
form = ExcelImportForm()
return render(request, 'import_articles.html', {'form': form})
```
5. 创建一个名为`import_articles.html`的模板,使用Bootstrap 4来渲染表单:
```html
<!-- import_articles.html -->
{% load static %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container">
<h2>导入博客文章</h2>
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
{% for message in messages %}
<div class="alert alert-success" role="alert">
{{ message }}
</div>
{% endfor %}
<div class="form-group">
<label for="{{ form.excel_file.id_for_label }}">选择Excel文件</label>
{{ form.excel_file }}
</div>
<button type="submit" class="btn btn-primary">导入</button>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
```
6. 运行开发服务器:
```
python manage.py runserver
```
现在,你的博客导入页面将使用Bootstrap 4框架进行渲染。希望这样能更好看一些!如有其他问题,请随时提问。
阅读全文