django项目总结 | 官网
需求分析
分析页面中哪些是动态内容，哪些是静态内容，有一些东西是经常要改动的，不能在页面上写死，需要在后台可以配置。
先分析页面哪些是经常需要变更的，哪些是不需要变更的？
- 第1部分是一个幻灯片，那这个幻灯片呢，有一个背景图，它的效果是由js事件的，如果经常要维护的话，就以它设置为动态的。动态内容包含这个图片 这里的标题，还有图片中的内容，需要我们进行在后端进行设置。
- 第2部分，关于我们，这个关于我们那基本上很多公司都有，这个东西基本上就没变过，很少变化。
- 第3部分成功案例，包含企业集团、移动金融、建筑设计。有的时候需要变更一下，如果有新的合作伙伴了，宣传一下就需要用到。成功案例主要就是图片，这是经常变化的。
- 第4部分，服务流程和关于我们差不多一样，基本上每个公司这个服务流程都是不怎么改动的，这个相当于静态页内容了。
- 第5部分，团队成员团队介绍，如果公司经常会变更一些人物啊，或者是你想宣传更多的新来的小伙伴呢，那这个时候它就会发生变化了，团队介绍这部分内容也是动态的。
- 第6部分，资讯中心，是动态的，每天公司会有一些新闻，我们跟谁谁合作了，我们取得什么样成绩了。让用户知道了解这些东西。资讯中心它肯定是变化的。
再看一看哪些东西是可以进行合并的？
- 轮播图这个没法和其它的合并，因为它这个图都是一些背景大图。
- 成功案例这里有图片，然后点击进去应该有一个链接进去，让其他人看到你和谁合作了，所以呢，它点进去应该就是和我们资讯中心的内容差不多少，点进去应该有一些标题啊，日期、内容。所以呢，这两块是可以合并到一起的，它有图片，它有图片，我们却别他们的时候，我们做一个分类，设置一个分类ID。分别表示成功案例和资讯中心。
- 接下来就是团队介绍，它就没有什么可合并的了。
整个页面能够变化的就是这么多： 轮播图、团队介绍、资讯中心、成功案例。
经过分析以后，把整个页面分为动态和静态的。动态的这些内容就需要我们在后台进行添加维护。需要创建用数据库，在数据库里进行增删改查来维护网站内容。
创建项目和应用
分析完需求以后，接下来就开始创建项目创建应用，大致分为三个应用。
- 轮播图：图片、标题、内容
- 团队介绍：图片、姓名、职位
- 资讯中心|成功案例：图片、标题、日期、内容
虚拟环境
新建一个虚拟环境
1 | python -m venv venv |
接下来，启动虚拟环境。如果是windows的话，直接使用
1 | venv/scripts/activate |
如果使用的是MAC的话，需要使用
1 | source venv/bin/activate |
在这个虚拟环境下来安装Django
1 | pip install django==4.1 |
创建Django项目
项目名称就叫做website，项目路径在当前这个路径下，使用一个点号。
1 | django-admin startproject website . |
. 在这个命令中的作用是指定项目创建的位置，即当前目录。
website文件里这个website，它是一个配置文件，这个配置文件和我们的项目名称，它俩一样，可以给它改一个新的名字叫做config。
把这个文件名字改了，那么代码有website的地方需要随之改变。比如说在settings.py配置文件中所有的叫做website的需要给它改成config，在manage.py这个文件里它还有一个website，我们需要把它改成config。
创建3个应用分别是幻灯片、团队简介、新闻消息和一个总应用mysite。我们这里就新建了三个应用，每个应用的目录结构都是一样的，那就对应着我们网站中的三个动态部分。mysite对比其他三个应用相当于一个总分的结构。
1 | django-admin startapp slide |
配置数据库
settings.py
找到website/config/settings.py这个文件，配置一下这里的settings.py文件，先把这个文字编码改成中文zh-HANS，时区改成上海时区。
1 | LANGUAGE_CODE ="zh-HANS" |
使用的是MySQL数据库,默认是sqlite，使用快捷键ctrl+f直接搜一下sqlite，整体修改一下，引擎我们使用MySQL，接着修改主机名、用户名、密码 。数据库名字，我们新建一个数据库就叫做website，修改代码如下：
1 | DATABASES ={ |
新建数据库
新建数据库你可以使用sql命令，也可以使用可视化工具都是可以的。
数据库名字就叫做website，为了保持一致字符集呢你可以使用utf-8或者使用utf-8mb4，排序规则使用默认的就可以，
数据迁移
执行一下数据迁移操作，将 MySQL自带的这些数据给它迁移到我们的数据库中，在命令行中输入命令如下：
1 | python manage.py migrate |
PyMySQL
这一次提示一个错信息：django.core.exceptions.ImproperlyConfigured: Error loading MySQLdb module.Did you install mysqlclient？
这个错误它提示我们需要使用MySQLDB model通常要安装这里的MySQL client，我们使用的是PyMySQL。
在命令行输如下命令先安装一下PyMySQL
1 | pip install pymysql |
安装成功以后，我们需要配置一下数据库，在website/config/init.py初始化文件中，在这里面我们配置一下我们使用的数据库是PyMySQL，代码如下：
1 | import pymysql |
声明一下我们使用的是PyMySQL把它当作MySQL DB来用，接下来在命令行中输入
1 | python manage.py migrate |
执行上面命令来实现数据迁移，迁移成功了。那怎么看是否成功呢？接下来我们创建一个后台管理员，在命令行中输入：
1 | python manage.py createsuperuser |
登录成功进入到了django的后台，至此，配置基本上就配置完成了。
渲染静态文件
把页面渲染到我们的URL中，让输出helloworld页面内容显示index页面的内容，需要使用模板的渲染。先把这些资源文件准备好，目录中通常会把这些静态资源文件放到一个文件夹中，这个文件夹通常叫做static。在这个website根目录下，新建一个文件夹叫做static。
把所有的除了index.html页面的静态资源文件全都给它拷贝过来，放到static文件夹里面
接下来在website根目录下新建一个模板文件夹，起一个名字叫做templates，所有的模板文件都放到这里。
回到我们的配置文件中来配置一下它，找到website/config/settings.py文件中，使用快捷键ctrl+f搜索templates，定位到templates代码块来配置dirs，代码如下：
1 | 'DIRS': [os.path.join()], |
这个os模块需要先导入一下，在settings.py文件中的顶部来导入。
1 | import os |
继续拼接路径，拼接使用BASE_DIR，已经配置了一个BASE_DIR这样的全局变量，就可以在这里使用。
1 | from pathlib import Path |
找到website/mysite/views.py文件中，它输出的是helloworld，现在要渲染一个页面，使用render来进行渲染index.html，代码如下:
1 | from django.http import HttpResponse |
此时css文件、js文件没有加载进来，所以看起来没有页面效果
需要修改一下html里的路径，让它加载static文件夹下的文件，
可以使用模板，在index.html的顶部写入代码：
1 | {% load static %} |
接下来就可以使用static来引入这些文件了，使用static这个模板标签，它就会自动找到static这个文件夹下的文件了，修改后的代码如下:
1 | <head> |
同理，我们把图片给它加载过来，我们在加载的时候一样的，也可以用使用static文件夹下的文件，代码和加载css文件、js文件类似，整体修改后的代码如下：
1 | {% load static %} |
此时，这些图片并没有引入成功
需要在配置文件中来配置一下，在website/config/settings.py配置文件中找到STATIC_URL下面已经设置static，还需要在下面添加一个STATICFILES_DIRS，代码如下：
1 | STATIC_URL = 'static/' |
静态页，经过使用render函数进行渲染以及配置静态文件，这些内容全部都可以正常显示了。
创建幻灯片模型
幻灯片这里有三张图片，只需要在后台设置好对应的数据，在前端进行一个渲染，在div标签中进行一个替换就可以了。
数据是存储到数据库中的，在django中我们可以使用orm来生成数据库中的数据。
创建模型
先找到对应的应用叫做slide，在slide文件夹下面我们找到models.py这个文件，在这里创建模型。
- 创建1个类class就叫做slide，和我们的数据库中的表是一一对应的，继承models.model。
- 设置对应的字段，主要有三个内容：一个是图片，一个是标题，一个是内容。
- 在创建数据表的时候会有一个主键，添加一个主键ID，创建主键的时候我们就可以使用models.AutoField，它是主键，我们设置primarykey这个属性设置为True，这个键呢是自增的，每次新增一个数据，它的id就会从1开始计数，以此类推，代码如下：
1
2
3
4from django.db import models
# Create your models here.
class Slide (models. Model):
id = models.AutoField(primary_key=True) - 设置图片image，第一个参数设置图片名字，第二个参数设置上传路径，第三个参数设置上传图片信息。代码如下：
1
image = models.ImageField('幻灯片名字', upload_to='slide', help_text='最佳尺寸:1920*1280')
- 设置title，我们使用models.CharField，第一个参数设置标题名字，第二个参数设置最大长度，第三个参数设置提示信息
1
title = models.CharField('标题', max_length=200,help_text='一级标题')
- 设置content内容，设置内容我们也使用models.Charfield，第一个参数设置内容名字，第二个参数设置最大长度，第三个参数设置提示信息，代码如下：
1
content = models.CharField('内容', max_length=200, help_text='二级标题')
pillow
创建model的时候使用了一个image，使用的是imagefield，它需要处理图片，那这个时候就需要依赖这个pillow模块，我们可以使用这个命令直接把pillow装上，代码如下
1 | pip install Pillow |
元类class Meta
设计一下元类class Meta，在这里面添加一些常用的属性，这些信息在后台里显示的时候就非常有作用了。
verbose_name幻灯片管理
verbose_name_plural幻灯片管理
1 | class Meta: |
添加应用
创建完slide应用还需要添加到settings.py中，搜索INSTALLED_APPS代码块，添加代码：
1 | INSTALLED_APPS = [ |
数据迁移
- 创建完了这个slide对应的类，我们要把它应用到数据库就可以使用orm来把数据迁移到数据库上，接下来我们在vscode的终端（terminal）中使用命令ctrl+c先把这个服务关掉，然后我们输入命令生成迁移文件，代码如下：
1
python manage.py makemigrations
- 生成以后我们要把它应用到数据库，所以还需要使用一个执行迁移命令， 代码如下：
1
python manage.py migrate
db_table
数据迁移后就能看到website数据库里有一个表叫做slide_slide
之所以生成这样的名字是因为默认情况下第1个名字就是它的应用名字，第2个slide才是我们使用的类名
如果你不习惯这样的表名，可以自己定义，在创建这个模型的时候，在class Meta元类里可以设置一个参数db_table这个属性给它设置为表名，代码如下：
1 | class Meta: |
更改需要再执行一次生成迁移文件，然后再执行一次迁移
1 | python manage.py makemigrations |
注册到后台
在website/slide/admin.py这个文件中把slide注册到后台模型中，代码如下：
1 | from django.contrib import admin |
后台上传文件
因为我们在设置这个模型的时候，上传的时候直接使用了这个slide，upload_to='slide'那这样就会导致将所有的图片都会上传到slide应用的文件夹下，就会影响目录结构。
1 | image = models.ImageField('幻灯片名字', upload_to='slide', help_text='最佳尺寸:1920*1280') |
解决：把上传的图片上传到单独的一个文件夹，叫做media。如果是静态资源文件，存到static文件夹。如果是上传的图片，在根目录新建一个叫做media文件夹，把上传的图片放到这里。
配置media我们需要在settings.py配置文件中来配置一下，在settings.py文件中最后一行写代码如下：
1 | #media 配置 |
数据迁移后重新上传，在项目目录结构中会新增一个media，在media下面有一个文件夹叫slide，slide文件夹下有一张图片就是刚才上传的这张图片，它会默认的放到media下面，在代码中设置了上传到slide，所以它会在这个media文件夹下又新增一个文件夹叫做slide。
幻灯片效果前端显示
接下来需要将数据库中的数据显示在前端页面上，也就是前台。
当前页面虽然已经存在，但是内容是静态的，需要替换掉这些写死的内容。
- 首先，找到对应的视图文件，位于项目中的 mysite 文件夹下的 views.py 文件中。在这个视图文件中，渲染了页面。
- 现在，我们要从数据库中获取数据，因此需要使用 ORM。首先引入模型，然后获取 slide 表中的所有数据。代码如下：
1
2
3
4
5
6
7
8
9
10
11from django.http import HttpResponse
from django.shortcuts import render
from slide.models import Slide
# Create your views here.
# 定义视图函数
def index(request):
# 获取slide表数据
slides = Slide.objects.all()
# 渲染index.html模板，并传递slides数据到模板中
return render(request, 'index.html', {'slides': slides, }) - 然后到模板文件中，找到对应的数据，并进行替换。
在 index.html 中，找到了幻灯片的内容，每一张幻灯片都有相同的结构，它们都在一个下，并且有一个glide_slides 类。保留一个作为模板，其余的删除掉，使用 for 循环进行遍历。- 接着，使用模板标签 for 遍历传递过来的 slides，并将每个幻灯片的标题、内容和图片替换掉。替换代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21<div class="glide__slides">
<!-- 循环遍历幻灯片数据 -->
{% for slide in slides %}
<div class="glide__slide">
<div class="slide-caption">
<!-- 幻灯片标题 -->
<h1>{{ slide.title }}</h1>
<!-- 幻灯片内容 -->
<h3>
{{ slide.content }}
</h3>
<!-- 探索更多按钮 -->
<button class="explore-btn">探索更多</button>
</div>
<!-- 遮罩层 -->
<div class="backdrop"></div>
<!-- 幻灯片图片 -->
<img src="media/{{slide.image}}" alt="">
</div>
{% endfor %}
</div>暴露 media 目录
刷新浏览器页面，在替换图片的时候，图片没有显示，因为没有将 media 目录暴露出来，导致外部无法访问，会提示 page not found。
需要在 URL 中配置一下。在config文件下 urls.py 配置文件中，我们将 media 目录暴露出来。在配置代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17from django.contrib import admin
from django.urls import path, include
from mysite import views
# 定义 URL 路由列表
urlpatterns = [
# 首页路由，指向 views.index 视图函数
path('', views.index),
# 后台管理路由
path('admin/', admin.site.urls),
]
# 将媒体文件的 URL 路由配置添加到 urlpatterns 中
from django.conf import settings
from django.conf.urls.static import static
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)团队介绍模块实现
团队介绍与轮播图类似，包含图片、姓名和职位三个栏位，因此我们可以沿用相似的实现方式来快速完成。在团队介绍中，我们需要考虑人物的排序，通常会根据职位的重要性或者其他因素进行排序。
默认情况下，数据库会根据 ID 创建记录，但我们可以通过添加一个排序字段来控制人物的排列顺序。
首先，需要创建一个与轮播图类似的模型。
复制之前创建的轮播图模型，把slide文件夹下models.py中代码复制到team文件夹下models.py并进行相应的修改。
修改包括将图片字段的名称改为“头像”，定义一个新的字段用于排序，以及调整模型名称为“team”。
在模型中，我们还定义了一个方法 __str__，用于返回员工的姓名，以便在后台管理界面和其他地方显示。修改代码如下：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18from django.db import models
# Create your models here.
class Team(models.Model):
id = models.AutoField(primary_key=True) # 主键ID
avatar = models.ImageField('头像', upload_to='team', help_text='最佳尺寸:500*755') # 头像图片
name = models.CharField('姓名', max_length=100) # 姓名
title = models.CharField('职务', max_length=100) # 职务
rank = models.IntegerField('排序') # 排序
class Meta:
db_table = 'team' # 指定数据库表名
verbose_name = '团队管理' # 在后台管理中显示的名称
verbose_name_plural = '团队管理' # 在后台管理中显示的复数名称
def __str__(self):
return self.name # 返回对象的字符串表示形式，用于后台管理界面显示然后，在 team文件夹下admin.py 文件中注册这个模型，以便在后台管理中对团队成员进行管理。添加代码如下：
1
2
3
4
5
6
7
8
9
10from django.contrib import admin
from team.models import Team # 导入团队模型
# Register your models here.
class TeamAdmin(admin.ModelAdmin):
list_display = ('name','title') # 在后台管理界面显示的字段
search_fields = ('name',) # 允许根据姓名搜索
admin.site.register(Team, TeamAdmin) # 将团队模型注册到后台管理，并指定自定义的管理类接下来，进行数据库迁移操作，以及启动服务器测试新增的团队管理功能。
1
2
3python manage.py makemigrations
python manage-py migrate
python manage.py runserver在team文件夹下apps.py文件中来修改一下，新增了一个“团队管理”选项，方便对团队成员进行管理。
1
2
3
4
5
6from django.apps import AppConfig
class TeamConfig(AppConfig):
default_auto_field = 'django.db.models.BigAutoField' # 默认自动字段类型
name = 'team' # 应用名称
verbose_name = '团队管理' # 显示在Django管理后台的应用名称app.py里的verbose_name和models.py里的区别：
- 上下文：AppConfig 中的 verbose_name 用于描述应用本身，而模型的 Meta 中的 verbose_name 用于描述模型的实例。
- 显示位置：AppConfig 中的 verbose_name 显示在 Django 管理后台的“应用”列表中，而模型的 Meta 中的 verbose_name 显示在管理后台对应模型的列表和表单中。
- 作用域：AppConfig 中的 verbose_name 作用于整个应用，而模型的 Meta 中的 verbose_name 作用于单个模型。
前端展示后台新增数据
在前端页面中，将后台新增的团队成员展示出来。
- 首先，在 website/mysite/views.py 文件中导入团队模型，并获取所有团队成员的数据。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15from django.http import HttpResponse
from django.shortcuts import render
from slide.models import Slide
from team.models import Team
# Create your views here.
def index(request):
# 获取轮播图数据
slides = Slide.objects.all() # 获取所有轮播图数据
# 获取团队成员数据并按照排序字段排列
team = Team.objects.all().order_by('rank')
return render(request, 'index.html', {
'slides': slides, # 将轮播图数据传递给模板
'team': team, # 将团队成员数据传递给模板
})- 将这些数据传递到模板中，在index.html文件中找打团队成员。在模板中使用 for 循环遍历团队成员数据，并替换页面中相应的内容，包括姓名、职务和头像。修改代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24<!-- 团队介绍 -->
<section id="team-intro" class="team-intro section-bg">
<h2 class="title1">团队介绍</h2>
<div class="team-members">
{% for item in team %}
<div class="team-member">
<div class="profile-image">
<!-- 显示团队成员头像 -->
<img src="media/{{item.avatar}}" alt="">
</div>
<!-- 显示团队成员姓名 -->
<h4 class="name">{{ item.name }}</h4>
<!-- 显示团队成员职务 -->
<p class="position">{{ item.title }}</p>
<ul class="social-links">
<li><i class="fa fa-weixin"></i></li>
<li><i class="fa fa-weibo"></i></li>
<li><i class="fa fa-github"></i></li>
<li><i class="fa fa-linkedin-square "></i></li>
</ul>
</div>
{% endfor %}
</div>
</section>
使用倒序排序
在views.py里修改：
1
team = Team.objects.all().order_by('-rank')
文章管理模块实现
企业官网中的重点部分，即新闻管理。
在新闻管理中，新闻可以包含图片，但图片是非必需的。
除了图片，新闻还包括标题、日期和内容。
此外，还将成功案例纳入新闻管理范畴。成功案例有多种分类，当选择不同分类时，将显示不同内容。
分类管理
分类具有分类ID，因此需要创建一个分类表。该表非常简单，只包含分类名称和ID两个字段。
然后，创建新闻表。新闻表包括图片、标题、日期、内容和分类ID等字段。新闻表中的分类ID与分类表中的ID对应，实现了一对多的关系，即一个分类对应多个新闻，这是一对多的关系。
创建模型
进入news文件夹中的models.py文件中，因为有两张表创建两个类：一个是Category（分类），另一个是News（新闻）。
首先是Category类，它包含一个自增的主键ID和一个最大长度为20的分类名称字段。
接着是News类，它也有一个自增的主键ID，标题字段限制最大长度为100，内容字段使用Text类型以支持较长的内容，封面字段是图片类型，上传至news文件夹下。封面字段是可选的，因此我们使用了blank=True。此外，新闻还包括发布时间（created_at）和更新时间（updated_at），它们使用datetime字段，创建时间使用auto_now_add设置为True，允许编辑（editable=True），更新时间也是类似的设置。分类和新闻是一对多的关系，因此在新闻表中使用外键关联到分类表。代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49from django.db import models
from ckeditor.fields import RichTextField
from ckeditor_uploader.fields import RichTextUploadingField
# 分类模型
class Category(models.Model):
# 主键，自增
id = models.AutoField(primary_key=True)
# 分类名称
name = models.CharField('分类名称', max_length=20)
class Meta:
# 数据库表名
db_table = 'category'
# 在管理后台显示的名称
verbose_name = '分类管理'
# 在管理后台显示的名称
verbose_name_plural = '分类管理'
def __str__(self):
return self.name # 返回分类名称作为对象的字符串表示形式
# 新闻模型
class News(models.Model):
# 主键，自增
id = models.AutoField(primary_key=True)
# 标题
title = models.CharField('标题', max_length=100)
# 内容，使用富文本上传字段
content = RichTextUploadingField()
# 封面图片，上传至news文件夹下，可选字段
cover = models.ImageField('封面', upload_to='news', blank=True, null=True, help_text='最佳尺寸:480*270')
# 创建时间，自动获取当前时间，可编辑
created_at = models.DateTimeField('创建时间', auto_now_add=True, editable=True)
# 更新时间，自动获取当前时间，可编辑
updated_at = models.DateTimeField('更新时间', auto_now=True, editable=True)
# 分类，外键关联到Category模型，删除分类时级联删除相关新闻
category = models.ForeignKey(Category, on_delete=models.CASCADE)
class Meta:
# 数据库表名
db_table = 'news'
# 在管理后台显示的名称
verbose_name = '新闻管理'
# 在管理后台显示的复数形式名称
verbose_name_plural = '新闻管理'
def __str__(self):
return self.title # 返回新闻标题作为对象的字符串表示形式
创建模型后，我们执行迁移并启动服务。
配置管理后台
news文件夹下admin.py中分别创建CategoryAdmin和NewsAdmin类，并将它们注册到管理后台。后台新增了分类管理和新闻管理。代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16from django.contrib import admin
from news.models import Category, News # 导入模型类
# 分类模型的管理类
class CategoryAdmin(admin.ModelAdmin):
# 在管理后台中显示的字段
list_display = ('id', 'name')
# 新闻模型的管理类
class NewsAdmin(admin.ModelAdmin):
# 在管理后台中显示的字段
list_display = ('title', 'category', 'created_at')
# 将模型类和管理类注册到管理后台
admin.site.register(Category, CategoryAdmin)
admin.site.register(News, NewsAdmin)修改应用的verbose_name，使之更符合逻辑，把news修改成新闻管理。
在news文件夹下apps.py文件中来修改，添加代码如下：
1
2
3
4
5
6
7
8
9
10
11from django.apps import AppConfig
# 定义News应用的配置类
class NewsConfig(AppConfig):
# 指定默认的自增字段类型
default_auto_field = 'django.db.models.BigAutoField'
# 应用的名称
name = 'news'
# 在管理后台中显示的应用名称
verbose_name = '新闻管理'新闻列表页和详情页模块实现
在前端页面中，通常会有一个新闻的列表页和一些新闻的详情页。因此需要设置两个URL，一个用于列表页，一个用于新闻详情页。
在配置文件中在config文件夹下urls.py文件中，直接设置这两个路径。在路径中设计
news/list来表示列表页还需要一个url来表示news详情页。由于都以
news开头，所以将它们放到了news应用（文件夹）下，在config文件夹下urls.py文件中使用include函数导入相应的URL配置。代码如下：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20from django.contrib import admin
from django.urls import path, include
from mysite import views
# 定义URL模式列表
urlpatterns = [
# 首页路径，指向视图函数 index
path('', views.index),
# 新闻相关路径，包含 news 应用的 URL 配置
path('news/', include('news.urls')),
# 管理员路径，指向 Django 自带的管理后台
path('admin/', admin.site.urls),
]
# 添加媒体文件访问的 URL 配置
from django.conf import settings
from django.conf.urls.static import static
# 添加媒体文件的 URL 配置，指向 settings 中设置的 MEDIA_ROOT
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)在news文件夹下，新建一个urls.py文件，配置与主urls.py中类似的路由模式。
导入视图函数并设置两个路径，一个用于新闻列表页，一个用于新闻详情页。
创建两个视图函数，一个用于列表页，一个用于详情页，代码如下：
1
2
3
4
5
6
7
8
9
10from django.urls import path
from . import views # 从当前应用中导入 views 模块
# 定义 URL 模式列表
urlpatterns = [
# 列表页路径，指向 views 模块中的 news_list 函数
path('list/', views.news_list),
# 详情页路径，使用了动态参数 <int:id> 来匹配新闻的 ID，指向 views 模块中的 detail 函数
path('<int:id>/', views.detail)
]接着在news文件夹下views.py中创建两个函数实现页面的内容，代码如下：
1
2
3
4
5
6
7
8
9
10
11
12from django.http import HttpResponse
from django.shortcuts import render
def news_list(request):
# 获取新闻列表视图
# 在这个视图函数中，我们渲染一个名为 'list.html' 的模板
return render(request, 'list.html')
def detail(request, id):
# 新闻详情视图
# 在这个视图函数中，我们将渲染一个名为 'detail.html' 的模板来显示特定新闻的详细信息
return render(request, 'detail.html')在templates文件夹中，创建list.html和detail.html，用于渲染新闻列表页和新闻详情页的内容。
在list.html列表页中要显示全部的文章。
在news文件夹下views.py中添加传递全部文章列表的代码并渲染到页面上，修改代码如下：
1
2
3
4
5def news_list(request):
# 获取所有新闻对象的列表
news_list = News.objects.all()
# 使用 'list.html' 模板渲染页面，并将新闻列表作为上下文传递给模板
return render(request, 'list.html', {'news_list': news_list})接下来在list.html列表页中将需要将文章列表遍历显示每篇文章的标题及文章内容详情页。list.html代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
{% for item in news_list %}
<h2>
<a href="/news/{{ item.id }}">
{ item.title } </a>
</h2>
{% endfor %}
</body>
</html>在浏览器地址输入：127.0.0.1:8000/news/list/，我们就可以看到每一个标题都添加了一个链接。点击不同的标题会进入到不同新闻列表页。
在详情页中，通过传递文章的id来获取具体的新闻内容，并在模板中展示标题、日期和内容。
在news文件夹下views.py中添加代码并渲染到页面上， 修改代码如下：
1
2
3
4
5def detail(request, id):
# 根据给定的主键（pk），获取特定的新闻对象
news = News.objects.get(pk=id)
# 使用 'detail.html' 模板渲染页面，并将特定新闻对象作为上下文传递给模板
return render(request, 'detail.html', {'news': news})在templates文件下的detail.html添加如下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>{{f news.title }} </h2>
<p>{{ news.created_at }}</p>
<p>
{{ news.content}}
</p>
</body>
</html>404模板
为了处理不存在的id，我们添加了异常处理，当id不存在时返回404页面。我们创建了一个404.html模板，并在views.py中进行异常处理，以确保用户能够得到友好的错误提示。新增代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19from django.http import HttpResponse
from django.shortcuts import render
from news.models import News
def news_list(request):
# 获取所有新闻对象的列表
news_list = News.objects.all()
# 使用 'list.html' 模板渲染页面，并将新闻列表作为上下文传递给模板
return render(request, 'list.html', {'news_list': news_list})
def detail(request, id):
try：
# 根据给定的主键（pk），获取特定的新闻对象
news = News.objects.get(pk=id)
# 使用 'detail.html' 模板渲染页面，并将特定新闻对象作为上下文传递给模板
return render(request, 'detail.html', {'news': news})
except:
# 如果出现异常（如未找到特定 id 的新闻），返回404页面
return render(request, '404.html')接着我们在templates文件夹中新建一个404.html文件，html代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="span4">
<div class="alert alert-danger">
<strong>出错了/(ㄒoㄒ)/~~</strong>
</div>
<img src="{% static 'images/404.png' %}">
</div>
</div>
<div class="row" style="margin-top: 30px">
<a href='#' onClick='history.back(-1);'> <span class="glyphicon glyphicon-menu-left"></span><strong>返回上一页</strong></a>
</div>
</div>
</body>
</html>使用富文本编辑器
通过富文本，我们能够赋予新闻内容更多样的格式，包括上传图片等功能。
富文本
通过富文本编辑器我们可以设置文本格式，上传图片，插入视频链接等。
文章生成将会显得非常美观，不再局限于单纯的纯文本。
django-ckeditor
安装
1
pip install django-ckeditor
配置
由于 CKEditor 也是一个应用，所以我们需要在settings.py中添加它。
找到INSTALLED_APP代码块，新增代码如下：1
2
3
4
5
6
7
8
9
10
11
12
13
14INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'slide',
'team',
'news',
'mysite',
'ckeditor',
'ckeditor_uploader',
]由于我们要上传图片，我们还需要配置上传路径和图片后端。一般情况下，我们会将上传的图片保存在 upload目录下，并使用 Pillow 模块作为图片后端。在settings.py文件中最后面添加如下代码：
1
2CKEDITOR_UPLOAD_PATH = 'upload/'
CKEDITOR_IMAGE_BACKEND = 'pillow'配置完成后，我们找到news/models.py文件中需要修改模型以使用 CKEditor。通过导入 RichTextField 和 RichTextUploadingField，我们可以在模型中使用富文本编辑器来替代普通的文本字段。根据需求选择使用上传图片的字段或者普通的富文本字段。修改代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36from django.db import models
from ckeditor.fields import RichTextField # 富文本编辑器字段
from ckeditor_uploader.fields import RichTextUploadingField # 富文本上传字段
# 创建模型类
class Category(models.Model):
id = models.AutoField(primary_key=True) # 自增主键
name = models.CharField('分类名称', max_length=20) # 分类名称字段
# 元数据
class Meta:
db_table = 'category' # 数据库表名
verbose_name = '分类管理' # 在后台显示的名称
verbose_name_plural = '分类管理' # 在后台显示的复数名称
def __str__(self):
return self.name # 返回分类名称
# 新闻模型类
class News(models.Model):
id = models.AutoField(primary_key=True) # 自增主键
title = models.CharField('标题', max_length=100) # 标题字段
content = RichTextUploadingField() # 富文本上传字段
cover = models.ImageField('封面', upload_to='news', blank=True, null=True, help_text='最佳尺寸:480*270') # 封面图片字段
created_at = models.DateTimeField('创建时间', auto_now_add=True, editable=True) # 创建时间字段
updated_at = models.DateTimeField('更新时间', auto_now=True, editable=True) # 更新时间字段
category = models.ForeignKey(Category, on_delete=models.CASCADE) # 外键关联分类表
# 元数据
class Meta:
db_table = 'news' # 数据库表名
verbose_name = '新闻管理' # 在后台显示的名称
verbose_name_plural = '新闻管理' # 在后台显示的复数名称
def __str__(self):
return self.title # 返回新闻标题
接下来，需要添加一个路由以处理上传图片的请求。在全局的 urls.py 中引入 CKEditor 的上传路由即可。在config/urls.py文件中找到urlpatterns代码块添加如下代码：
1
2
3
4
5
6
7# URL模式列表
urlpatterns = [
path('', views.index), # 调用index视图函数
path('news/', include('news.urls')), # 包含news应用的URL模式
path('ckeditor/', include('ckeditor_uploader.urls')), # 包含CKEditor上传器的URL模式
path('admin/', admin.site.urls), # admin管理后台的URL
]修改完模型后，我们需要生成迁移文件并执行 migrate 命令来应用数据库的更改。然后，我们启动服务，在vscode终端输入如下代码：
1
2
3python manage.py makemigrations
python manage-py migrate
python manage.py runserver回到网页端刷新，可以在后台通过富文本编辑器编辑文章内容，设置字体、插入表格、插入图片等。
但页面没有正常显示，因为django框架自带的安全机制。
在前端页面中 ，需要修改模板中的参数以正确显示富文本内容。
找到templates文件夹的detail.html文件中添加 safe 过滤器，可以正常显示富文本内容，并避免 HTML 标签被转义。修改代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>{{f news.title }} </h2>
<p>{{ news.created_at }}</p>
<p>
{{ news.content|safe}}
</p>
</body>
</html>这样，就可以在编辑新闻时，轻松地进行样式设置、插入图片、表情等操作。这项功能将使文章内容更加丰富多彩，呈现出更加吸引人的形式。
首页显示新闻内容
在获取内容时，将获取三个新闻，并设置数量限制。
这三个新闻需要按照时间创建时间的倒序排序。
- 首先，找到
mysite/views.py文件中网站的首页字段。在网站的字段中，继续获取资讯中心下的新闻。 - 使用新闻对象进行筛选，并根据分类选择新闻类型为“新闻”的内容（category ID等于1）。
- 然后，根据创建时间的降序排列，并设置获取数量为三个。
- 将获取的新闻赋值给一个新变量，命名为“news”，并将其传递到页面中的
index.html文件中的资讯中心部分。代码如下：1
2
3
4
5
6
7
8
9
10
11
12
13
14from django.http import HttpResponse
from django.shortcuts import render
from slide.models import Slide
from team.models import Team
from news.models import News
# Create your views here.
def index(request):
# 获取slide表数据
slides = Slide.objects.all()
# 获取团队成员
team = Team.objects.all().order_by('-rank')
# 获取咨询中心新闻
news = News.objects.filter(category_id=1).order_by('-created_at')[:3] - 接下来在templates文件夹中index.html中通过for循环遍历新闻内容，并将日期、标题和新闻图片替换到页面中的相应位置，
- 并且在标题后面添加一个a标签链接，使其跳转到文章详情页。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29<!-- 公司动态 -->
<section id="company-activities" class="company-activities">
<h2 class="title1">资讯中心</h2>
<p class="intro">关注公司动态，获取一手信息</p>
<div class="activities">
{% for item in news %}
<div class="activity">
<div class="act-image-wrapper">
<img src="/media/{{item.cover}}" alt="">
</div>
<div class="meta">
<p class="date-published">
<i class="fa fa-calendar"></i> {{ item.created_at }}
</p>
</div>
<h2 class="act-title">{{ item.title }}</h2>
<article>{{ item.content|slice:'20' }}...</article>
<a href="/news/{{item.id}}">
<button class="readmore-btn">阅读更多</button>
</a>
</div>
{% endfor %}
</div>
<div>
<a href="/news/list">
<button class="readmore-btn">查看全部新闻</button>
</a>
</div>
</section>
成功案例
首先找到mysite/views.py文件中网站的首页字段，在视图中获取成功案例。
虽然它也是在新闻中获取的，但内容不同。我们将其命名为“cases”。
在筛选时，要求ID不等于1的案例，因为这些案例和新闻不同。
使用了排除方法来实现这一要求，排除了分类为1的情况。
同样地，也对其进行了排序，并选择了最多6个案例进行展示。修改代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22from django.http import HttpResponse
from django.shortcuts import render
from slide.models import Slide
from team.models import Team
from news.models import News
# Create your views here.
def index(request):
# 获取slide表数据
slides = Slide.objects.all()
# 获取团队成员
team = Team.objects.all().order_by('-rank')
# 获取咨询中心新闻
news = News.objects.filter(category_id=1).order_by('-created_at')[:3]
# 获取成功案例内容
cases = News.objects.filter().exclude(category_id=1).order_by('-created_at')[:6]
return render(request, 'index.html', {
'slides': slides,
'team': team,
'news': news,
'cases': cases,
})接着，将获取到的案例渲染到页面上，并在“index.html”文件中找到对应的图片部分。
找到筛选图片，但筛选时可能会遇到一些特殊的标识，比如class为
web。在这里，需要对其进行处理。- 先找到各个分类的ID，比如企业集团的ID为2，移动金融的ID为3，建筑设计的ID为4
- 然后在index.html中相应地修改class。使用循环的方式来展示这些图片，并根据其所属的ID添加相应的class。代码如下：成功地实现了在首页展示成功案例并根据分类展示不同图片的功能。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22<!-- 成功案例 -->
<section id="showcases" class="showcases section-bg">
<h2 class="title1">成功案例</h2>
<!-- 筛选按钮 -->
<div class="filter-btns">
<button class="filter-btn active" data-filter="*">全部</button>
<button class="filter-btn" data-filter=".category_2">企业集团</button>
<button class="filter-btn" data-filter=".category_3">移动金融</button>
<button class="filter-btn" data-filter=".category_4">设计建筑</button>
</div>
<!-- 筛选图片 -->
<div class="cases">
{% for item in cases %}
<div class="case-item category_{{item.category.id}}">
<a href="/news/{{item.id}}">
<img src="/media/{{item.cover}}" alt="">
</a>
</div>
{% endfor %}
</div>
</section>
设置新闻页样式
新闻资讯页面和新闻详情页面的样式尚未修改，目前看起来比较简陋。因此，需要添加一些样式来改善它们的外观。在进行样式添加时，需要运用一些 CSS 技术。为了保持与原页面整体风格的一致性，将首页的头部信息和底部信息复制过来，并在中间显示新闻列表。
首先，找到首页 index.html，将其顶部信息（即轮播图之前的内容）全部复制到list.html新闻资讯页面中。header头部html代码如下：
1
2
3
4
5
6
7
8
9
10<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="{% static 'libs/scrollReveal/scrollreveal.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'css/font.css' %}">
<link rel="stylesheet" href="{% static 'libs/glide/glide.core.min.css' %}">
<link rel="stylesheet" href="{% static 'libs/glide/glide.theme.min.css' %}">
<link rel="stylesheet" href="{% static 'css/index.css' %}">
<title>网络科技</title>
</head>然后，在新闻资讯页面中进行相应替换。接着，将底部信息也就是 footer 全部复制到list.html新闻页面中，并进行相应替换。中间部分不需要变动。底部footer替换代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62<!-- 尾部 -->
<footer>
<div class="footer-menus">
<div class="contact-us">
<p class="menu-title">联系我们</p>
<p>地址:北京市XXXX</p>
<p>电话:12345678977</p>
<p>传真:12345678977</p>
<p>电子邮箱:12345678977@qq.com</p>
</div>
<div class="service-menu footer-menu">
<p class="menu-title">服务概览</p>
<ul class="menu-items">
<li><a href="#">网站建设</a></li>
<li><a href="#">域名购买</a></li>
<li><a href="#">网页设计</a></li>
<li><a href="#">移动应用</a></li>
</ul>
</div>
<div class="service-menu footer-menu">
<p class="menu-title">成功案例</p>
<ul class="menu-items">
<li><a href="#">桌面网站</a></li>
<li><a href="#">移动网站</a></li>
<li><a href="#">科研项目</a></li>
<li><a href="#">软件应用</a></li>
</ul>
</div>
<div class="service-menu footer-menu">
<p class="menu-title">资讯中心</p>
<ul class="menu-items">
<li><a href="#">信息公开</a></li>
<li><a href="#">最近新闻</a></li>
<li><a href="#">最新博客</a></li>
</ul>
</div>
<div class="service-menu footer-menu">
<p class="menu-title">帮助与支持</p>
<ul class="menu-items">
<li><a href="#">帮助中心</a></li>
<li><a href="#">联系客服</a></li>
<li><a href="#">文档资源</a></li>
</ul>
</div>
<p class="icp-info">京ICP备案 1234556789 号</p>
<p class="rights">
© 2020 XX科技 - 响应式网站 版权所有
</p>
<p class="scrollToTop">
<a href="#home"><i class="fa fa-chevron-up"></i></a>
</p>
</div>
</footer>
<script src="{% static 'libs/anime/anime.min.js' %}"></script>
<script src="{% static 'libs/glide/glide.min.js' %}"></script>
<script src="{% static 'libs/isotope/isotope.pkgd.min.js' %}"></script>
<script src="{% static 'libs/smooth-scroll/smooth-scroll.polyfills.min.js' %}"></script>
<script src="{% static 'js/index.js' %}"></script>
</body>
</html>刷新页面，可以看到现在页面有了顶部和底部，以及中间的新闻列表。
接下来，在list.html代码中将顶部背景色改为黑色以增强可读性。同时，选择一个原页面中的样式来让内容居中显示。比如关于我们的部分，并将其拷贝过来。然后，将其内容修改为新闻列表，或者直接使用它。接下来，给新闻列表页添加一些间距，使其不那么拥挤。可以修改 <h2> 标签为 <div> 标签，并添加一些样式来设置间距。同样地，也为新闻列表添加上下边距。修改代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="{% static 'libs/scrollReveal/scrollreveal.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'css/font.css' %}">
<link rel="stylesheet" href="{% static 'libs/glide/glide.core.min.css' %}">
<link rel="stylesheet" href="{% static 'libs/glide/glide.theme.min.css' %}">
<link rel="stylesheet" href="{% static 'css/index.css' %}">
<title>网络科技</title>
</head>
<body>
<!-- 导航 -->
<header style="background-color:black">
<div class="logo">网络科技</div>
<nav>
<a href="#home">首页</a>
<a href="#about-us">关于我们</a>
<a href="#showcases">成功案例</a>
<a href="#service">服务流程</a>
<a href="#team-intro">团队介绍</a>
<a href="#company-activities">资讯中心</a>
<i class="fa fa-search"></i>
</nav>
<!-- 小屏幕按钮 -->
<div class="burger">
<div class="burger-line1"></div>
<div class="burger-line2"></div>
<div class="burger-line3"></div>
</div>
</header>
<div class="container-wrapper">
<section id="about-us" class="about-us">
<h2 class="title1" style="padding: 10px;">新闻列表</h2>
{% for item in news_list %}
<div style="padding: 6px 0;">
<a class="intro" href="/news/{{ item.id }}">
{{ item.title }}
</a>
</div>
{% endfor %}
</section>
</div>
<!-- 尾部 -->
<footer>
<div class="footer-menus">
<div class="contact-us">
<p class="menu-title">联系我们</p>
<p>地址:北京市XXXX</p>
<p>电话:12345678977</p>
<p>传真:12345678977</p>
<p>电子邮箱:12345678977@qq.com</p>
</div>
<div class="service-menu footer-menu">
<p class="menu-title">服务概览</p>
<ul class="menu-items">
<li><a href="#">网站建设</a></li>
<li><a href="#">域名购买</a></li>
<li><a href="#">网页设计</a></li>
<li><a href="#">移动应用</a></li>
</ul>
</div>
<div class="service-menu footer-menu">
<p class="menu-title">成功案例</p>
<ul class="menu-items">
<li><a href="#">桌面网站</a></li>
<li><a href="#">移动网站</a></li>
<li><a href="#">科研项目</a></li>
<li><a href="#">软件应用</a></li>
</ul>
</div>
<div class="service-menu footer-menu">
<p class="menu-title">资讯中心</p>
<ul class="menu-items">
<li><a href="#">信息公开</a></li>
<li><a href="#">最近新闻</a></li>
<li><a href="#">最新博客</a></li>
</ul>
</div>
<div class="service-menu footer-menu">
<p class="menu-title">帮助与支持</p>
<ul class="menu-items">
<li><a href="#">帮助中心</a></li>
<li><a href="#">联系客服</a></li>
<li><a href="#">文档资源</a></li>
</ul>
</div>
<p class="icp-info">京ICP备案 1234556789 号</p>
<p class="rights">
© 2020 XX科技 - 响应式网站 版权所有
</p>
<p class="scrollToTop">
<a href="#home"><i class="fa fa-chevron-up"></i></a>
</p>
</div>
</footer>
<script src="{% static 'libs/anime/anime.min.js' %}"></script>
<script src="{% static 'libs/glide/glide.min.js' %}"></script>
<script src="{% static 'libs/isotope/isotope.pkgd.min.js' %}"></script>
<script src="{% static 'libs/smooth-scroll/smooth-scroll.polyfills.min.js' %}"></script>
<script src="{% static 'js/index.js' %}"></script>
</body>
</html>接下来点击进入新闻详情页后，在templates文件中的detail.html文件中可以进行一些简单的改造。同样地，将list.html代码内容拷贝过来，并进行相应替换。例如，可以将参考新闻标题替换为 news.title，删掉for循环，将日期添加为 <p> 标签，并将新闻内容放入\
标签中。接下来在首页添加一个按钮，以便显示全部列表页的新闻。在资讯中心底部添加一个“查看全部”按钮，并将其链接到新闻列表页。修改代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="{% static 'libs/scrollReveal/scrollreveal.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'css/font.css' %}">
<link rel="stylesheet" href="{% static 'libs/glide/glide.core.min.css' %}">
<link rel="stylesheet" href="{% static 'libs/glide/glide.theme.min.css' %}">
<link rel="stylesheet" href="{% static 'css/index.css' %}">
<title>网络科技</title>
</head>
<body>
<!-- 导航 -->
<header style="background-color:black">
<div class="logo">网络科技</div>
<nav>
<a href="#home">首页</a>
<a href="#about-us">关于我们</a>
<a href="#showcases">成功案例</a>
<a href="#service">服务流程</a>
<a href="#team-intro">团队介绍</a>
<a href="#company-activities">资讯中心</a>
<i class="fa fa-search"></i>
</nav>
<!-- 小屏幕按钮 -->
<div class="burger">
<div class="burger-line1"></div>
<div class="burger-line2"></div>
<div class="burger-line3"></div>
</div>
</header>
<div class="container-wrapper">
<section id="about-us" class="about-us">
<h2 class="title1" style="padding: 10px 0;">{{news.title}}</h2>
<p>{{news.created_at}}</p>
<div style="padding: 6px 0;">
<p class="intro" href="/news/{{ item.id }}">
{{ news.content|safe }}
</a>
</div>
</section>
</div>
<!-- 尾部 -->
<footer>
<div class="footer-menus">
<div class="contact-us">
<p class="menu-title">联系我们</p>
<p>地址:北京市XXXX</p>
<p>电话:12345678977</p>
<p>传真:12345678977</p>
<p>电子邮箱:12345678977@qq.com</p>
</div>
<div class="service-menu footer-menu">
<p class="menu-title">服务概览</p>
<ul class="menu-items">
<li><a href="#">网站建设</a></li>
<li><a href="#">域名购买</a></li>
<li><a href="#">网页设计</a></li>
<li><a href="#">移动应用</a></li>
</ul>
</div>
<div class="service-menu footer-menu">
<p class="menu-title">成功案例</p>
<ul class="menu-items">
<li><a href="#">桌面网站</a></li>
<li><a href="#">移动网站</a></li>
<li><a href="#">科研项目</a></li>
<li><a href="#">软件应用</a></li>
</ul>
</div>
<div class="service-menu footer-menu">
<p class="menu-title">资讯中心</p>
<ul class="menu-items">
<li><a href="#">信息公开</a></li>
<li><a href="#">最近新闻</a></li>
<li><a href="#">最新博客</a></li>
</ul>
</div>
<div class="service-menu footer-menu">
<p class="menu-title">帮助与支持</p>
<ul class="menu-items">
<li><a href="#">帮助中心</a></li>
<li><a href="#">联系客服</a></li>
<li><a href="#">文档资源</a></li>
</ul>
</div>
<p class="icp-info">京ICP备案 1234556789 号</p>
<p class="rights">
© 2020 XX科技 - 响应式网站 版权所有
</p>
<p class="scrollToTop">
<a href="#home"><i class="fa fa-chevron-up"></i></a>
</p>
</div>
</footer>
<script src="{% static 'libs/anime/anime.min.js' %}"></script>
<script src="{% static 'libs/glide/glide.min.js' %}"></script>
<script src="{% static 'libs/isotope/isotope.pkgd.min.js' %}"></script>
<script src="{% static 'libs/smooth-scroll/smooth-scroll.polyfills.min.js' %}"></script>
<script src="{% static 'js/index.js' %}"></script>
</body>
</html>接下来在首页index.html中添加一个按钮，以便显示全部列表页的新闻。在资讯中心底部添加一个“查看全部”按钮，并将其链接到新闻列表页。修改代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29<section id="company-activities" class="company-activities">
<h2 class="title1">资讯中心</h2>
<p class="intro">关注公司动态，获取一手信息</p>
<div class="activities">
{% for item in news %}
<div class="activity">
<div class="act-image-wrapper">
<img src="/media/{{item.cover}}" alt="">
</div>
<div class="meta">
<p class="date-published">
<i class="fa fa-calendar"></i> {{ item.created_at }}
</p>
</div>
<h2 class="act-title">{{ item.title }}</h2>
<article>{{ item.content|slice:'20' }}...</article>
<a href="/news/{{item.id}}">
<button class="readmore-btn">阅读更多</button>
</a>
</div>
{% endfor %}
</div>
<!-- 在此添加按钮 -->
<div>
<a href="/news/list">
<button class="readmore-btn">查看全部新闻</button>
</a>
</div>
</section>
至此，成功地开发了一个官方企业网站。
- 接着，使用模板标签 for 遍历传递过来的 slides，并将每个幻灯片的标题、内容和图片替换掉。替换代码如下：
数据库加载中