**
本次目標：：：
模擬網站首頁，實現首頁是一系列大小一模一樣的圖片，點擊之後跳轉到相應的圖片的詳情頁。
項目源碼：百度網盤！
鏈接：https://pan.baidu.com/s/1WoJpuwoSihcvsazGqbcO_A
提取碼：2maq
**
第一步：設置靜態文件！（在對應的image目錄下存放6張用於首頁佈局的圖片）![在這裏插入圖片描述]()
第二步：創建名爲home的首頁app
第三步：配置整個項目的settings.py文件（設置允許訪問對象；設置靜態文件路徑）
（1）允許所有人訪問：
（2）設置靜態文件路徑：
第四步：設置項目目錄下的urls.py文件（爲home首頁app分配路徑！）
第五步：配置名爲home的首頁app的urls.py文件（配置首頁路徑；配置詳情頁路徑）
第六步：配置名爲home的首頁app的views.py文件（模擬數據庫數據；調用首頁的視圖函數；調用詳情頁的視圖函數）
from django.shortcuts import render
from django.http import HttpResponse
# Create your views here.
def img_db():
'''
假設下面的數據是數據庫裏所有圖片的路徑地址
:return:數據庫裏所有圖片的路徑地址
'''
image_all=["image/1.jpeg","image/2.jpeg","image/3.jpeg","image/4.jpeg","image/5.jpeg","image/6.jpeg"]
return image_all
def home(request):
'''
首頁！
:param request:
:return:
'''
return render(request,"home/home.html")
def details(request, post_id):
'''
詳情頁！
:param request:
:param post_id:參數表示哪一張圖片
:return:圖片的詳情頁
'''
image_all=img_db()
#取出對應id的圖片
if post_id>len(image_all):
return HttpResponse("404 頁面不存在")
image_url=image_all[post_id-1]
return render(request,"home/details.html",context={"image_url":image_url})
第七步：創建HTML模板（首頁模板；詳情頁模板）
（1）首頁模板home.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首頁</title>
<style>
{# 設置樣式，使首頁所有圖片大小一樣 #}
img{
width: 200px;
height: 100%;
}
</style>
</head>
<body>
<a href="{% url 'details' 1 %}"><img src="{% static 'image/1.jpeg' %}" alt=""></a>
<a href="{% url 'details' 2 %}"><img src="{% static 'image/2.jpeg' %}" alt=""></a>
<a href="{% url 'details' 3 %}"><img src="{% static 'image/3.jpeg' %}" alt=""></a>
<a href="{% url 'details' 4 %}"><img src="{% static 'image/4.jpeg' %}" alt=""></a>
<a href="{% url 'details' 5 %}"><img src="{% static 'image/5.jpeg' %}" alt=""></a>
<a href="{% url 'details' 6 %}"><img src="{% static 'image/6.jpeg' %}" alt=""></a>
</body>
</html>
（2）詳情頁模板details.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>詳情頁</title>
</head>
<body>
<h1>詳情頁</h1>
<img src="{% static image_url %}" alt="">
</body>
</html>
實現如下：
（1）首頁：
（2）點擊圖片會跳轉到對應的詳情頁：
