按照一般的網站設計，導航欄、內容欄、尾注。本次對主頁使用css進行美化。
- 增加路由
blog urls.py
from django.url import path
from . import views
urlpatterns = [
path('', views.blog_list, name='blog_list'),
path('<int:blog_pk>', views.blog_detail, name='blog_detail'),
path('type/<int:blog_type_pk>', views.blogs_with_type, name='blogs_with_type')
]
- 修改
base.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<div>
<a href='{% url "home" %}'>
<h3>個人博客網站</h3>
</a>
<a href="/">首頁</a>
<a href="{% url 'blog_list' %}">博客</a>
</div>
{# 加一個橫線用於分割頁面 #}
<hr>
{% block content %}{% endblock %}
</body>
</html>
- 給首頁創建一個處理方法，
mysite views.py，先新建，再修改
from django.shortcuts import render_to_response
def home(request):
context = {}
return render_to_response('home.html', context)
templates下新建一個home.html文件並修改
{% extends 'base.html' %}
{% block title %}
我的網站|首頁
{% endblock %}
{% block content %}
<h3>歡迎訪問我的網站，隨便看</h3>
{% endblock %}
- 項目首頁
mysite urls.py總路由修改
from django.contrib import admin
from django.urls import path,include
from .views import home
urlpatterns = [
path('', home, name='home'),
path('admin/', admin.site.urls),
path('blog/',include('blog.urls'))
]
刷新頁面，如下圖所示。
- 修改
base.html文件
可以使用
chrome對css頁面進行調試查看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<div class="nav">
<a class='logo' href='{% url "home" %}'>
<h3>個人博客網站</h3>
</a>
<a href="/">首頁</a>
<a href="{% url 'blog_list' %}">博客</a>
</div>
{# 加一個橫線用於分割頁面 #}
{% block content %}{% endblock %}
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div.nav {
background: #eee;
border-bottom: 1px solid #ccc;
padding: 10px 5px;
}
div.nav a{
text-decoration: none;
color: #000;
padding: 5px 10px;
}
div.nav a.logo {
display: inline-block;
font-size: 130%;
}
</style>
</body>
</html>
- 修改
home.html文件
{% extends 'base.html' %}
{% block title %}
我的網站|首頁
{% endblock %}
{% block content %}
<h3 class="home-content">歡迎訪問我的網站，隨便看</h3>
<style type="text/css">
h3.home-content {
font-size: 222%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
{% endblock %}
刷新頁面，顯示如下：
- 將
css代碼整合到css文件中
在根目錄建立一個
static文件夾用於存放css，js，圖片等靜態文件。
-
建立
static base.css文件，並將base.html中的css代碼剪切進去。 -
設置
settings.py靜態文件路徑
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
- 將
base.css路徑引用到base.html文件中
<head>
<meta charset="utf-8">
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="/static/base.css">
</head>
刷新頁面，得到同樣的結果。
通過Django靜態文件載入，實現同樣的功能。
修改base.html文件：
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="{% static 'base.css' %}">
</head>
<body>
<div class="nav">
<a class='logo' href='{% url "home" %}'>
<h3>個人博客網站</h3>
</a>
<a href="/">首頁</a>
<a href="{% url 'blog_list' %}">博客</a>
</div>
{# 加一個橫線用於分割頁面 #}
{% block content %}{% endblock %}
</body>
</html>
刷新得到同樣的結果。
為了讓home.html同樣能這樣使用，需要在base.html增加一個塊block用於引用css文件。
- 修改
base.html文件
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="{% static 'base.css' %}">
{% block header_extends %}{% endblock %}
</head>
<body>
<div class="nav">
<a class='logo' href='{% url "home" %}'>
<h3>個人博客網站</h3>
</a>
<a href="/">首頁</a>
<a href="{% url 'blog_list' %}">博客</a>
</div>
{# 加一個橫線用於分割頁面 #}
{% block content %}{% endblock %}
</body>
</html>
- 修改
home.html文件(css代碼已轉移到home.css中)
{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}
我的網站|首頁
{% endblock %}
{% block header_extends %}
<link rel="stylesheet" type="text/css" href="{% static 'home.css' %}">
{% endblock %}
{% block content %}
<h3 class="home-content">歡迎訪問我的網站，隨便看</h3>
{% endblock %}
刷新主頁，可以得到一樣的結果。