基于Python Django写博客（三） - 美化模板

本文我们将美化首页。

• 模板继承
• 静态文件
• • • 配置静态文件
    • 下载框架
• 编写模板
• • • 编写母版
    • 编写主页
• 运行！
• 总结

一些网站的页面会有固定的排版。如Oracle，站内每个网页都会有上面的导航条。
固定的内容我们可以把他单独提取到一个网页里，我们称为母板。
其他页面只需要继承模板，就能达到像Oracle的导航栏那样的效果了。

有时，模板会需要电脑本地的文件（如图片、视频、样式表和JS等），这就需要静态文件来支持。

打开HZHBBSsettings.py，增加STATICFILES_DIRS：

HZHBBSsettings.py

...

# Static files (CSS, Javascript, Images)
# https://docs.djangoproject.com/en/4.0/howto/static-files/

STATIC_URL = 'static/'

STATICFILES_DIRS = (  # 新增这行，表示静态文件的路径
    os.path.join(base_DIR, 'static'),  # 别忘了加逗号
)

...

我们需要Bootstrap5、JQuery。

新建static文件夹，去Bootstrap5官网下载生产文件到static里面。
解压，并且删掉一些没用的文件，css文件夹保留bootstrap.min.css，js文件夹保留bootstrap.bundle.min.js。

在JQuery官网下载JQuery到staticjquery，并重命名为jquery.min.js。

现在的目录应该是这样的：

.
│  db.sqlite3
│  manage.py
│
├─article
│  ...
│
├─HZHBBS
│  ...
│
├─static
│  ├─bootstrap
│  │  ├─css
│  │  │      bootstrap.min.css
│  │  │
│  │  └─js
│  │          bootstrap.bundle.min.js
│  │
│  └─jquery
│          jquery.min.js
│
└─templates
    ...

一般母版的文件名是base.html。
新建templatesbase.html，编写代码 (代码高能预警) ：

templatesbase.html


{% load static %}



	
		

		
		

		
		
		
		
		
		
		
	

	
		
		

			

			    

			    	

			        	
			        		
							
							HZH论坛
			        	

			        	

			        		
			          		
主页
			        	

			        	

			        		
			          		登录
			          		注册
			        	
			    	
				
			 
		

		
{% block content %}{% endblock content %}

		
COPYRIGHt (c) hzhws.org 2021
	

这里我们一下子打了一长串代码，不懂的读者借助注释（）多消化一下。

清除templatesarticleindex.html里面的所有内容，用下面的代码覆盖：

templatesarticleindex.html

{% extends 'base.html' %}

{% block title %}
	HZH论坛
{% endblock title %}

{% block content %}
	

		{% for article in articles %}
			
				

					
{{ article.title }}
					
{{ article.description }}
				
				
				{{ article.looks }}
			
		{% endfor %}
	
{% endblock content %}

• {% extends ‘base.html’ %} - 声明此模板继承自base.html。
• {% block content %}XXX{% endblock content %} - 将content（母板里的内容部分）设置为中间夹的内容。

CMD输入PYTHON manage.py runserver，浏览器打开127.0.0.1:8000，界面应该类似这样：

本文我们学习了模板的继承与静态文件，美化了主页。

有疑问请私信我Email：h18989847468@163.com。