技术交流QQ群:1027579432，欢迎你的加入！
本教程来源于B站杨仕航Django2.0开发视频教程，如需转载，必须注明来源！
1.页面设计
页面设计.png
2.导航栏设计
导航栏设计.png
- 打开blog文件夹的urls.py文件，在文件中添加博客列表blog_list页面的路由，如下所示：
from django.urls import path from . import views urlpatterns = [ # http:localhost:8000/blog/1 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"), ] - 打开mysite文件夹目录下的templates文件夹下的base.html文件，在首页中增加首页和博客两个显示的标题，如下所示：
<!DOCTYPE html> <html lang="en"> <head> <title>{% block title %}{% endblock %}</title> <meta charset="UTF-8"> </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) - 然后，打开mysite文件目录下的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 include, path from . import views urlpatterns = [ # 博客首页 path('', views.home, name="home"), # 博客首页的路由已经修改！ path('admin/', admin.site.urls), path('blog/', include('blog.urls')), ]
3.使用CSS
- 使用CSS对HTML进行修饰，CSS即层叠样式表。对首页的前端页面进行CSS美化，打开base.html文件，添加如下内容：
<!DOCTYPE html> <html lang="en"> <head> <title>{% block title %}{% endblock %}</title> <meta charset="UTF-8"> </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> * { margin: 0; padding: 0; } div.nav { background-color: #eee; border-bottom: 1px solid #ccc; } div.nav a { text-decoration: none; color: #000; padding: 10px 5px; } div.nav a.logo { display: inline-block; font-size: 120%; } </style> </body> </html> - 同时，对网站首页的前端页面home.html进行CSS美化，添加如下内容：
{% extends 'base.html' %} {% block title %} 我的网站|首页 {% endblock %} {% block content %} <h3 class="home-content">欢迎访问我的网站，随便看</h3> <style> h3.home-content { font-size: 222%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> {% endblock %}
4.使用静态文件
静态文件.png
-
在项目根目录下创建静态文件夹static，如下图所示。在static文件夹下创建base.css文件，内容如下所示。这样就可以解决上一小节中在HTML中嵌入CSS代码的混乱感。
static文件夹.png
* { margin: 0; padding: 0; } div.nav { background-color: #eee; border-bottom: 1px solid #ccc; } div.nav a { text-decoration: none; color: #000; padding: 10px 5px; } div.nav a.logo { display: inline-block; font-size: 120%; } - 打开mysite文件夹下的全局设置文件settings.py，在该文件的最后添加静态文件夹static所存放的位置，添加如下内容所示：
STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'), ] - 在base.html文件中引入static文件夹下的base.css文件，有两种方法：下面采用方法1。此时，base.html文件如下所示：
<!-- 方法2：引入static文件夹下的base.css文件 --> {% load staticfiles %} <!DOCTYPE html> <html lang="en"> <head> <title>{% block title %}{% endblock %}</title> <meta charset="UTF-8"> <!-- 方法1：引入static文件夹下的base.css文件 --> <link rel="stylesheet" href="/static/base.css"> <!-- 方法2：引入static文件夹下的base.css文件 --> <!-- <link rel="stylesheet" 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> - 同理，在static文件夹下创建home.css，然后将home.html中的CSS代码剪切至home.css中。如下所示：
h3.home-content { font-size: 222%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } - 由于home.html文件是对base.html文件的拓展，于是，对base.html文件进行修改增加模板标签{% block header_extends %}{% endblock %}，修改后的文件内容如下所示：
<!DOCTYPE html> <html lang="en"> <head> <title>{% block title %}{% endblock %}</title> <meta charset="UTF-8"> <link rel="stylesheet" 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中对模板标签{% block header_extends %}{% endblock %}进行详细说明。因此需要在home.html中引入home.css才能对博客首页的前端页面进行CSS美化，此处使用方法2进行引入CSS文件。home.html文件中的内容如下：
{% extends 'base.html' %} {% load staticfiles %} {% block title %} 我的网站|首页 {% endblock %} {% block header_extends %} <link rel="stylesheet" href="{% static 'home.css' %}"> {% endblock %} {% block content %} <h3 class="home-content">欢迎访问我的网站，随便看</h3> {% endblock %}
网友评论