我在用django做一個作品集網站。我的模板是master.html、projects.html、projects.html、all_categories.html、app_projects.html和projects.html。每個html文件擴展到master.html和master.html加載靜態。我不知道為什么，但我能想到的每一個可能的解決方案都只導致背景圖片只出現在home.html上。
帶有背景圖像的home.html
不帶背景圖片的all_categories.html
我嘗試的第一件事是讓master.html顯示背景圖像，這樣所有擴展到它的html文件也會有背景圖像。同樣的結果，它只顯示在home.html上
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css">
<link rel="stylesheet" href="{% static 'myglobal.css' %}">
<title>{% block title %}{% endblock %}</title>
</head>
{% for y in H_Info %}
<body style="background-image: url({{y.bg_photo}});background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;">
<header>
<nav class="navibar" style="background-color:#e3c378">
<div class="navbar-logo">
{% for x in H_Info %}
<a href="/" style="text-decoration:none;color:#000000;margin-left: 100px;">{{ x.lastname }} Portfolio</a>
{% endfor %}
</div>
<ul class="navbar-menu" style="margin-right: 100px;;">
<li class="navbar-menu-item"><a href="/categories/">Portfolio</a></li>
<li class="navbar-menu-item"><a href="/about/">About</a></li>
</ul>
</nav>
</header>
<main class="main-content">
{% block content %}
{% endblock %}
</main>
</body>
{% endfor %}
</html>但后來我想，也許我應該把它放在master.html鏈接到的整個css文件上:
body {
font-family: "Teko";
background: url("../projects/img/background/Background_2.png");
}我確定我在這里的url位置是正確的。這是我的項目目錄:
personal_project/
|-- mystaticfiles/
| |-- myglobal.css
|-- personal_project/
| |-- __init__.py
| |-- asgi.py
| |-- settings.py
| |-- urls.py
| |-- wsgi.py
|-- projects/
| |-- img/
| | |-- background/
| | | |-- Background_2.png
| | |-- id/
| | |-- projects/
| |-- templates/
| | |-- about.html
| | |-- all_categories.html
| | |-- all_projects.html
| | |-- home.html
| | |-- master.html
| | |-- project.html
| |-- admin.py
| |-- apps.py
| |-- models.py
| |-- tests.py
| |-- views.py然后，我嘗試的另一件事是手動將內聯css和內部css放在每個沒有背景圖像的html文件上。
{% extends "master.html" %}
{% block title %}
My Portfolio - Categories
{% endblock %}
{% block content %}
{% for y in H_Info %}
<body class="portfolio-page" style="background-image: url({{y.bg_photo}});background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;">
<h1 class="text-center">Categories</h1>
<div class="container">
<div class="row">
{% for category in categories %}
<div class="col-12 col-md-6 col-lg-4 mb-4">
<div class="position-relative thumbnail">
<a href="{% url 'projects_by_category' category.id %}">
{% with projects=category.project_info_set.all %}
{% if projects.exists %}
<img class="img-fluid cat-photo" src="{{ projects.first.artwork.url }}" alt="First Project Image">
{% else %}
<p>No projects available</p>
{% endif %}
{% endwith %}
</a>
<h2 class="thumbnail-name position-absolute top-50 start-50 translate-middle text-center" style="text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;user-select: none;">{{ category.category }}</h2>
</div>
</div>
{% endfor %}
</div>
</div>
</body>
{% endfor %}
{% endblock %}{% extends "master.html" %}
{% block title %}
My Portfolio - {{ category.category }}
{% endblock %}
{% block content %}
<style>
body{
background-image: url(../projects/img/background/Background_2.png);
}
</style>
<body>
<div class="container">
<a href="/categories/" class="btn btn-secondary mb-4 back-button">Back</a>
<h1 class="text-center py-3">{{ category.category }}</h1>
<div>
<div class="r-all-pr">
{% for z in projects %}
<div class="c-all-pr">
<a href="#popup{{ z.id }}">
<img class="indiv-photo" src="{{ z.artwork.url }}" alt="{{ z.title }}" style="width:100%">
</a>
</div>
{% endfor %}
</div>
{% for project in projects %}
<div id="popup{{ project.id }}" class="popup-overlay">
<div class="popup">
<h1>{{ project.title }}</h1>
<a class="close" href="#">×</a>
<div class="popup-content">
<p>{{ project.project_description }}</p>
<p>Created on: {{ project.date_created }}</p>
<img class="popup-photo" src={{ project.artwork.url }} >
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</body>
{% endblock %}兩者仍然沒有背景圖像。我仔細檢查了urls.py、models.py和views.py，但是沒有發現任何問題。
models.py:
from django.db import models
# Create your models here.
class About_Info(models.Model):
long_description = models.TextField(blank=False, null=True)
contact_number = models.IntegerField(null=True)
photo = models.ImageField(upload_to='projects/img/id', default='default')
class Contact_Links(models.Model):
site_name = models.CharField(max_length=50, blank=True, null=True)
site_link = models.TextField(blank=True, null=True)
def __str__(self):
return self.site_name
class Category(models.Model):
category = models.CharField(max_length=50, blank=True, null=True)
def __str__(self):
return self.category
class Project_Info(models.Model):
cat = models.ForeignKey(Category, null=True, on_delete=models.SET_NULL)
title = models.CharField(max_length=50, blank=True, null=True)
project_description = models.TextField(blank=False, null=True)
date_created = models.DateField(blank=False, null=True)
artwork = models.ImageField(upload_to='projects/img/projects', default='default')
def __str__(self):
return self.title
class Home_Info(models.Model):
firstname = models.CharField(max_length=50, blank=True, null=True)
lastname = models.CharField(max_length=50, blank=True, null=True)
occupation = models.CharField(max_length=50, blank=True, null=True)
short_description = models.TextField(blank=False, null=True)
bg_photo = models.ImageField(upload_to='projects/img/background', default='default')
def __str__(self):
return f"{self.firstname} {self.lastname}"views.py:
from django.shortcuts import render, get_object_or_404
from django.http import HttpResponse
from django.template import loader
from .models import About_Info, Contact_Links, Category, Project_Info, Home_Info
# Create your views here.
def about(request):
H_Info = Home_Info.objects.all()
Abt_Info = About_Info.objects.all()
Cont_Info = Contact_Links.objects.all()
template = loader.get_template('about.html')
context ={
'Abt_Info':Abt_Info,
'Cont_Info':Cont_Info,
'H_Info': H_Info,
}
return HttpResponse(template.render(context,request))
def project(request, project_id):
H_Info = Home_Info.objects.all()
P_Info = Project_Info.objects.get(id=project_id)
template=loader.get_template('project.html')
context = {
'P_Info':P_Info,
'H_Info': H_Info,
}
return HttpResponse(template.render(context,request))
def home(request):
H_Info = Home_Info.objects.all()
template = loader.get_template('home.html')
context = {
'H_Info': H_Info,
}
return HttpResponse(template.render(context, request))
#NEW
def category(request):
H_Info = Home_Info.objects.all()
categories = Category.objects.all()
template = loader.get_template('all_categories.html')
context = {
'categories': categories,
'H_Info': H_Info,
}
return HttpResponse(template.render(context, request))
def projects_by_category(request, category_id):
H_Info = Home_Info.objects.all()
category = get_object_or_404(Category, id=category_id)
projects = Project_Info.objects.filter(cat=category)
template = loader.get_template('all_projects.html')
context = {
'category': category,
'projects': projects,
'H_Info': H_Info,
}
return HttpResponse(template.render(context, request))
def master(request):
H_Info = Home_Info.objects.all()
template = loader.get_template('master.html')
context = {
'H_Info': H_Info,
}
return HttpResponse(template.render(context, request))urls.py:
from django.urls import path
from . import views
from django.conf.urls.static import static
from django.conf import settings
urlpatterns = [
path('about/',views.about),
path('projects/<int:project_id>/', views.project, name='project'),
path('',views.home),
path('categories/', views.category, name='categories'),
path('categories/<int:category_id>/', views.projects_by_category, name='projects_by_category'),
]
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)我幾乎完成了我的網站。我就是不能解決這個背景圖像的問題。
上一篇python 界面化爬蟲
下一篇python 畫美國國旗