从前慢现在也慢

这个屌丝很懒，什么也没留下！

热门标签

[django项目] 利用elasticsearch实现搜索功能_django3 vue 配置 elastic search

作者：从前慢现在也慢 | 2024-03-07 12:15:57

踩

django3 vue 配置 elastic search

原创

[django项目] 利用elasticsearch实现搜索功能

2019-08-25 11:45:54 Makesths 阅读数 123 更多

分类专栏： django笔记

本文链接： https://blog.csdn.net/makesomethings/article/details/100061591

新闻搜索

I. 搜索功能分析

本节我们来完成新闻搜索功能, 首先让我们来思考一下，要做一个通过关键词搜索文章的功能，需要搜索哪些字段，以及使用什么技术方案呢？

既然我们是准备做新闻博客网站, 那我们就可以拿同类型网站的做一下对比, 例如CSDN, 简书, 博客园等, 这些常见的博客网站其主要覆盖的搜索字段有：

标题
内容
作者

实现这些字段检索的技术方案有以下两种：

mysql的模糊查询 %like%
1. 优点：实现起来简单
2. 缺点：数据量比较大的情况下，查询效率极低
全文检索引擎
1. 优点：专业的全文检索引擎，效率高
2. 缺点：实现起来比较复杂

本项目选择使用过全文检索引擎。自行实现django框架和全文检索引擎的代码比较麻烦，抱着不重复造轮子的原则，这里我们选用django的第三方包djangohaystack。它支持多种全文检索引擎，本项目选择最流行的全文检索引擎之一elasticsearch。

II. elasticsearch介绍

elasticsearch 原理:http://developer.51cto.com/art/201904/594615.htm

工作原理示意图

$[外链图片转存失败(img-HvAY3Wat-1566702560769)(E:\Fire\QQfire\992994875\FileRecv\Django项目_心蓝班\7.新闻搜索\assets\1566393245580.png)]$

首先来看图中, 用户将全文搜索的请求发送至django, 即输入搜索内容
全文搜索需要分词和模糊查询, 这些操作在mysql中也可以使用, 但如果遇到数据量大的项目, 效率会很低, 因此, 就需要借助搜索引擎elasticsearch
要实现查询, 那么我们的django需要连接mysql和elasticsearch:
1. 连接mysql使用的是mysqlclient
2. 连接elasticsearch使用的是django-haystack, 以及python的es驱动
elasticsearch会去到mysql中获取数据, 然后进行索引, 并储存到它自己那里
然后django就会利用haystack到elasticsearch中查询想要的数据, 即执行搜索
es查询到后返回给haystack(haystack是属于django项目中的一个从外部引入的app)
haystack会返回给django框架, 然后django再展示给用户看, 即展示搜索结果

III. docker介绍与安装

1>docker介绍

1.1>什么是docker？

简化创建，部署，运行应用程序的一个工具
打包应用程序所需的库和依赖环境
精简的虚拟机

[外链图片转存失败(img-9KJ8jUaW-1566702560769)(新闻搜索.assets/what_is_docker.png)]

1.2>为什么使用docker?

流行，方便，强大

1.3>docker vs 虚拟机

[外链图片转存失败(img-Zu2k2B3U-1566702560770)(新闻搜索.assets/VM-vs-Docker-What-is-Docker-Container-Edureka-1.png)]

[外链图片转存失败(img-bg6kbWn7-1566702560771)(新闻搜索.assets/docker-vm-container.png)]

1.4>docker架构

[外链图片转存失败(img-OpVPQr6l-1566702560772)(新闻搜索.assets/1563198966139.png)]

架构
- 客户端
- 守护进程
- 仓库
docker 对象
- 镜像精简的linux
- 容器
- 服务
docker Hub

安装

官方安装文档

lsb_release -a   # 查看系统信息
uname -a		# 查看位数

       
       
       
       1
2
1
2

2>ubuntu下安装

如果是第一次安装，你需要先添加docker的源然后再安装

2.1>添加阿里云源

百度搜索"阿里云源"
选择Ubuntu然后复制源链接
桌面创建一个txt文件, 重命名为sources.list
使用NotePad++或是pycharm打开, 粘贴源链接, 保存
粘贴文件到linux的家目录
cd /etc/apt/
备份原有的sources.list, 使用命令: sudo cp sources.list sources.dbk.list
然后sudo rm sources.list, 再将你刚才创建的sources.list拷贝到/etc/apt/
运行命令: sudo apt-get update, 刷新源
如果有问题则sudo apt-get upgrade更新系统, 然后再刷新源

2.2>安装证书

  $ sudo apt-get install apt-transport-https ca-certificates curl gnupg-agent software-properties-common

     
     
     
     1
1

2.3>添加官方GPGkey

  $ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -

     
     
     
     1
1

2.4>添加docker源

  $ sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"

     
     
     
     1
1

3>安装 docker ce

3.1>更新包索引

  $ sudo apt-get update

     
     
     
     1
1

3.2>安装docker

（这个可能会很久）

$ sudo apt-get install docker-ce

     
     
     
     1
1

3.3>检测是否安装成功

$ sudo docker run hello-world

     
     
     
     1
1

安装成功会出现如下输出：

Hello from Docker!
  This message shows that your installation appears to be working correctly.
1
2

To generate this message, Docker took the following steps:

The Docker client contacted the Docker daemon.
The Docker daemon pulled the “hello-world” image from the Docker Hub.
(amd64)
The Docker daemon created a new container from that image which runs the
executable that produces the output you are currently reading.
The Docker daemon streamed that output to the Docker client, which sent it
to your terminal.

To try something more ambitious, you can run an Ubuntu container with:
$ docker run -it ubuntu bash

Share images, automate workflows, and more with a free Docker ID:
https://hub.docker.com/

For more examples and ideas, visit:
https://docs.docker.com/get-started/

为了方便使用，不用sudo就可以运行docker命令，安装好docker后再命令行输入如下命令：

  $ sudo usermod -aG docker $USER

 
 
 
 1
1

运行正常后，重新连接即可。

IIII. 搜索功能环境搭建

1>在docker中安装elasticsearch

1.1>获取镜像

# 注意：因为haystack目前支持的elasticsearch版本为 1.x和2.x
# 所以这里选择2.4.6
$ docker pull elasticsearch:2.4.6

 
 
 
 1
2
3
1
2
3

1.2>安装中文分词插件

可以创建容器之后再安装插件，为了后面部署方便，我们创建镜像。elasticsearch的中文分词插件是elasticsearch-ik，国人开发，github地址。

根据文档介绍，2.4.6版本对应的ik是1.10.16

[外链图片转存失败(img-0oOzRk0J-1566702560772)(新闻搜索.assets/)]

因为直接使用elasticsearch的plugin命令安装会报错，所以通过下载后解压到相应文件夹的方式安装。

新闻搜索.assets/1563190261012.png )]

a.下载es-ik后，将其解压到名为ik的文件夹

~$ unzip elasticsearch-analysis-ik-1.10.6.zip -d ./ik

 
 
 
 1
1

b.在ik所在文件下创建名为Dockerfile的文件，内容如下

# dockerfile
FROM	elasticsearch:2.4.6
MAINTAINER	Fisher "xinlan@tanzhou.com"
ADD 	./ik/ /usr/share/elasticsearch/plugins/ik/	

 
 
 
 1
2
3
4
1
2
3
4

然后运行命令

~$ sudo docker build -t xinlan/els-ik:2.4.6 .

 
 
 
 1
1

如果出现下面的错误是因为没有带sudo

~$ docker build -t xinlan/els-ik:2.4.6 .
error checking context: 'no permission to read from '/home/wcf/.viminfo''.

 
 
 
 1
2
1
2

运行成功后，会在你的docker中创建一个新的镜像

~$ docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
xinlan/els-ik       2.4.6               ecf93deefe2b        26 minutes ago      489MB
elasticsearch       2.4.6               5e9d896dc62c        10 months ago       479MB

 
 
 
 1
2
3
4
1
2
3
4

如果上面的步骤搞不定请直接下载如下镜像

$ sudo docker image pull wcfdehao/els-ik:2.4.6

 
 
 
 1
1

2>创建容器

利用上面创建好的镜像创建一个容器。为了能够进行设置elasticsearch，通过卷挂载的方式创建容器。

将提供给大家的es配置文件elasticsearch.zip拷贝到家目录下，然后解压

# 在xshell中使用rz命令将elasticsearch.zip文件传到虚拟机的家目录中
＃然后在家目录中解压
~$ unzip elasticsearch.zip

 
 
 
 1
2
3
1
2
3

然后运行下面的命令创建容器

# 根据上面创建的镜像创建容器，需要将/home/wcf/elasticsearch/config配置文件路径修改为你自己的路径
~$ docker run -dti --network=host --name es-ik -v /home/pyvip/elasticsearch/config:/usr/share/elasticsearch/config wcfdehao/els-ik:2.4.6
1
2

# 查看当前运行的容器
~$ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
61c42c36a8f2 xinlan/els-ik:2.4.6 “/docker-entrypoint.…” 29 minutes ago Up 28 minutes es-ik

你也可以在创建时携带restart参数, 让容器可以自启, 具体可以参考本文的后半段

最后运行curl命令检测es是否正常

~$ curl http://127.0.0.1:9200
{
  "name" : "Shard",
  "cluster_name" : "elasticsearch",
  "cluster_uuid" : "Pq6BQQhTQN6q6ML6ThPlbw",
  "version" : {
    "number" : "2.4.6",
    "build_hash" : "5376dca9f70f3abef96a77f4bb22720ace8240fd",
    "build_timestamp" : "2017-07-18T12:17:44Z",
    "build_snapshot" : false,
    "lucene_version" : "5.5.4"
  },
  "tagline" : "You Know, for Search"
}

 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3>安装djangohaystack

官方文档

3.1>安装

# 安装djangohaystack
# 使用的是当期最新版本 2.8.1
pip install django-haystack

 
 
 
 1
2
3
1
2
3

3.2>配置文件

# 将Haystack添加到`INSTALLED_APPS`中
# settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'haystack',
    'user',
    'news',
    'doc',
    'course',
    'verification'
]

 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 配置搜索引擎
# 在settings.py中添加如下设置
# 全文搜索引擎haystack 配置
# 不同的搜索引擎，配置不同，详情见官方文档
HAYSTACK_CONNECTIONS = {
    'default': {
        'ENGINE': 'haystack.backends.elasticsearch_backend.ElasticsearchSearchEngine',
        'URL': 'http://127.0.0.1:9200/',    # 此处为elasticsearch运行的服务器ip地址和端口
        'INDEX_NAME': 'tzpython',           # 指定elasticserach建立的索引库名称
    },
}
1
2
3
4
5
6
7
8
9
10
11

# 搜索结果每页显示数量
HAYSTACK_SEARCH_RESULTS_PER_PAGE = 5
# 实时更新index
HAYSTACK_SIGNAL_PROCESSOR = ‘haystack.signals.RealtimeSignalProcessor’

3.3>安装elasticsearch-py

haystack操作es还需要python的es驱动。兼容性见官网

[外链图片转存失败(img-1BesZeeK-1566702560773)()]

根据官网，选择2.4.1版本

pip install elasticsearch==2.4.1

 
 
 
 1
1

至此，环境搭建完成。相对应的es，es-ik，haystack，es-python的版本请保持一致。

V. 新闻搜索功能实现

1>业务流程分析

设查询文章时输入的参数为q

判断是否传递查询参数q
如果没有传递q，则直接返回热门新闻数据
如果有传递，则返回查询结果
分页

2>接口设计

接口说明：

类目	说明
请求方法	GET
url定义	`/news/search/`
参数格式	查询参数

参数说明：

参数名	类型	是否必须	描述
q	字符串	否	查询的关键字
page	整数	否	页码

返回结果：

搜索页面html

3>后端代码

3.1>创建haystack数据模型

在apps/news/目录下创建search_indexes.py文件，注意文件名必须使用search_indexes.py，代码如下：

   # !/usr/bin/env python
   # -*- coding:utf-8 -*-
   # create_time: 2019/7/13
   # Author = '心蓝'
   from haystack import indexes
   from .models import News
1
2
3
4
5
6

class NewsIndex(indexes.SearchIndex, indexes.Indexable):
“”"
这个模型的作用类似于django的模型，它告诉haystack哪些数据会被
放进查询返回的模型对象中，以及通过哪些字段进行索引和查询
“”"
# 这字段必须这么写，用来告诉haystack和搜索引擎要索引哪些字段
text = indexes.CharField(document=True, use_template=True)
# 模型字段,打包数据
id = indexes.CharField(model_attr=‘id’)
title = indexes.CharField(model_attr=‘title’)
digest = indexes.CharField(model_attr=‘digest’)
content = indexes.CharField(model_attr=‘content’)
image_url = indexes.CharField(model_attr=‘image_url’)

   <span class="token keyword">def</span> <span class="token function">get_model</span><span class="token punctuation">(</span>self<span class="token punctuation">)</span><span class="token punctuation">:</span>
       <span class="token triple-quoted-string string">"""
       返回建立索引的模型
       :return:
       """</span>
       <span class="token keyword">return</span> News

   <span class="token keyword">def</span> <span class="token function">index_queryset</span><span class="token punctuation">(</span>self<span class="token punctuation">,</span> using<span class="token operator">=</span><span class="token boolean">None</span><span class="token punctuation">)</span><span class="token punctuation">:</span>
       <span class="token triple-quoted-string string">"""
       返回要建立索引的数据查询集
       :param using:
       :return:
       """</span>
       <span class="token comment"># 这种写法遵从官方文档的指引</span>
       <span class="token keyword">return</span> self<span class="token punctuation">.</span>get_model<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>objects<span class="token punctuation">.</span><span class="token builtin">filter</span><span class="token punctuation">(</span>is_delete<span class="token operator">=</span><span class="token boolean">False</span><span class="token punctuation">)</span>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3.2>创建索引数据模板

根据上面创建的模型中的第一个text字段中的use_template=True参数，还需要创建一个索引数据模板，用来告诉搜索引擎需要索引哪些字段。

在templates中创建文件search/indexes/<your app name>/<model name>_text.txt，

所以本项目需要创建search/indexes/news/news_text.txt，文件内容如下：

   {{ object.title }}
   {{ object.digest }}
   {{ object.content }}
   {{ object.author.username }}

 
 
 
 1
2
3
4
1
2
3
4

3.3>创建索引

按上面的步骤配置好后，就可以运行haystack的命令创建索引了

~$ python manage.py rebuild_index	# 看到如下信息,说明运行成功
WARNING: This will irreparably remove EVERYTHING from your search index in connection 'default'.
Your choices after this are to restore from backups or rebuild via the `rebuild_index` command.
Are you sure you wish to continue? [y/N] y
Removing all documents from your index because you said so.
All documents removed.
Indexing 889 新闻文章
GET /tzpython/_mapping [status:404 request:0.005s]

 
 
 
 1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8

如果出现了get 404错误, 没关系不用管它

3.4>视图代码

在news/views.py中添加如下视图

   from haystack.generic_views import SearchView
1

class NewsSearchView(SearchView):
“”"
新闻搜索视图
“”"
# 设置搜索模板文件
template_name = ‘news/search.html’

   <span class="token comment"># 重写get请求，如果请求参数q为空，返回模型News的热门新闻数据</span>
   <span class="token comment"># 否则根据参数q搜索相关数据</span>
   <span class="token keyword">def</span> <span class="token function">get</span><span class="token punctuation">(</span>self<span class="token punctuation">,</span> request<span class="token punctuation">,</span> <span class="token operator">*</span>args<span class="token punctuation">,</span> <span class="token operator">**</span>kwargs<span class="token punctuation">)</span><span class="token punctuation">:</span>
       <span class="token comment"># 1. 获取查询参数</span>
       query <span class="token operator">=</span> request<span class="token punctuation">.</span>GET<span class="token punctuation">.</span>get<span class="token punctuation">(</span><span class="token string">'q'</span><span class="token punctuation">)</span>
       <span class="token comment"># 2. 如果没有查询参数</span>
       <span class="token keyword">if</span> <span class="token operator">not</span> query<span class="token punctuation">:</span>
           <span class="token comment"># 则返回热门新闻</span>
           <span class="token comment"># 获取热门新闻对象, 包含外键标签, 查询数据并做筛选和排序</span>
           hot_news <span class="token operator">=</span> HotNews<span class="token punctuation">.</span>objects<span class="token punctuation">.</span>select_related<span class="token punctuation">(</span><span class="token string">'news__tag'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>only<span class="token punctuation">(</span><span class="token string">'news__title'</span><span class="token punctuation">,</span> <span class="token string">'news__image_url'</span><span class="token punctuation">,</span> <span class="token string">'news_id'</span><span class="token punctuation">,</span> <span class="token string">'news__tag__name'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token builtin">filter</span><span class="token punctuation">(</span>is_delete<span class="token operator">=</span><span class="token boolean">False</span><span class="token punctuation">)</span><span class="token punctuation">.</span>order_by<span class="token punctuation">(</span><span class="token string">'priority'</span><span class="token punctuation">,</span> <span class="token string">'-news__clicks'</span><span class="token punctuation">)</span>
           <span class="token comment"># 分页, 从配置文件中拿到haystack参数</span>
           paginator <span class="token operator">=</span> Paginator<span class="token punctuation">(</span>hot_news<span class="token punctuation">,</span> settings<span class="token punctuation">.</span>HAYSTACK_SEARCH_RESULTS_PER_PAGE<span class="token punctuation">)</span>
           <span class="token keyword">try</span><span class="token punctuation">:</span>
               <span class="token comment"># 拿到前端传递的page,</span>
               page <span class="token operator">=</span> paginator<span class="token punctuation">.</span>get_page<span class="token punctuation">(</span><span class="token builtin">int</span><span class="token punctuation">(</span>request<span class="token punctuation">.</span>GET<span class="token punctuation">.</span>get<span class="token punctuation">(</span><span class="token string">'page'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
           <span class="token keyword">except</span> Exception <span class="token keyword">as</span> e<span class="token punctuation">:</span>
               <span class="token comment"># 如果出错则返回第一页,保证容错性</span>
               page <span class="token operator">=</span> paginator<span class="token punctuation">.</span>get_page<span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>

           <span class="token keyword">return</span> render<span class="token punctuation">(</span>request<span class="token punctuation">,</span> self<span class="token punctuation">.</span>template_name<span class="token punctuation">,</span> context<span class="token operator">=</span><span class="token punctuation">{</span>
               <span class="token string">'page'</span><span class="token punctuation">:</span> page<span class="token punctuation">,</span>
               <span class="token comment">#'paginator': paginator,</span>
               <span class="token string">'query'</span><span class="token punctuation">:</span> query
           <span class="token punctuation">}</span><span class="token punctuation">)</span>
       <span class="token comment"># 3. 如果有查询参数</span>
       <span class="token keyword">else</span><span class="token punctuation">:</span>
           <span class="token comment"># 则执行搜索</span>
           <span class="token keyword">return</span> <span class="token builtin">super</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>get<span class="token punctuation">(</span>request<span class="token punctuation">,</span> <span class="token operator">*</span>args<span class="token punctuation">,</span> <span class="token operator">**</span>kwargs<span class="token punctuation">)</span>

   <span class="token keyword">def</span> <span class="token function">get_context_data</span><span class="token punctuation">(</span>self<span class="token punctuation">,</span> <span class="token operator">*</span>args<span class="token punctuation">,</span> <span class="token operator">**</span>kwargs<span class="token punctuation">)</span><span class="token punctuation">:</span>
       <span class="token triple-quoted-string string">"""
       在context中添加page变量
       """</span>
       context <span class="token operator">=</span> <span class="token builtin">super</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>get_context_data<span class="token punctuation">(</span><span class="token operator">*</span>args<span class="token punctuation">,</span> <span class="token operator">**</span>kwargs<span class="token punctuation">)</span>
       <span class="token keyword">if</span> context<span class="token punctuation">[</span><span class="token string">'page_obj'</span><span class="token punctuation">]</span><span class="token punctuation">:</span>
           <span class="token comment"># 捕获page_obj,将其赋值到page</span>
           context<span class="token punctuation">[</span><span class="token string">'page'</span><span class="token punctuation">]</span> <span class="token operator">=</span> context<span class="token punctuation">[</span><span class="token string">'page_obj'</span><span class="token punctuation">]</span>
       <span class="token keyword">return</span> context
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

3.5>路由

在news/urls.py中添加如下路由

       path('news/search/', views.NewsSearchView.as_view(), name='news_search')

 
 
 
 1
1

4>前端代码

4.1>自定义过滤器

在news/templatetags/news_template_filters.py中定义一个处理分页的过滤器

# !/usr/bin/env python
# -*- coding:utf-8 -*-
# create_time: 2019/7/14
# Author = '心蓝'
from django import template
1
2
3
4
5

@register.filter
def page_bar(page):
page_list = []
if page.number != 1:
page_list.append(1)
if page.number - 3 > 1:
page_list.append(’…’)
if page.number - 2 > 1:
page_list.append(page.number - 2)
if page.number - 1 > 1:
page_list.append(page.number - 1)
page_list.append(page.number)
if page.paginator.num_pages > page.number + 1:
page_list.append(page.number + 1)
if page.paginator.num_pages > page.number + 2:
page_list.append(page.number + 2)
if page.paginator.num_pages > page.number + 3:
page_list.append(’…’)
if page.paginator.num_pages != page.number:
page_list.append(page.paginator.num_pages)
return page_list

4.2>前端html代码

{% extends 'base/base.html' %}
{% load static %}
{% load news_customer_filters %}
{% block title %}新闻搜索{% endblock %}
{% block link %}
    <link rel="stylesheet" href="{% static 'css/news/search.css' %}">
{% endblock %}
1
2
3
4
5
6
7

{% block main_contain %}

<div class=“main-contain “>

<div class=“search-box”>
<form action=”” style=“display: inline-flex;”>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>请输入要搜索的内容<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>q<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>search-control<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>


            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>搜索<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>search-btn<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
        <span class="token comment">&lt;!-- 可以用浮动 垂直对齐 以及 flex  --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- search-box end --&gt;</span>
    <span class="token comment">&lt;!-- content start --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>content<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        {% if query %}
            <span class="token comment">&lt;!-- search-list start --&gt;</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>search-result-list<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>search-result-title<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>搜索结果 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>{{ page.paginator.num_pages|default:0 }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span> 页<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>news-list<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                    {% load highlight %}
                    {% for news in page.object_list %}
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>news-item clearfix<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{% url <span class="token punctuation">'</span>news:news_detail<span class="token punctuation">'</span> news.id %}<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>news-thumbnail<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{{ news.image_url }}<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>news-content<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>news-title<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{% url <span class="token punctuation">'</span>news:news_detail<span class="token punctuation">'</span> news.id %}<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>{% highlight news.title with query %}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>news-details<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>{{ news.digest }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>news-other<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>news-type<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>{{ news.object.tag.name }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>news-time<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>{{ news.object.update_time }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>news-author<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>{% highlight news.object.author.username with query %}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
                    {% empty %}
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>news-item clearfix<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>没有找到你想要的找的内容.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
                    {% endfor %}
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

            <span class="token comment">&lt;!-- search-list end --&gt;</span>
        {% else %}
            <span class="token comment">&lt;!-- news-contain start --&gt;</span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>news-contain<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hot-recommend-list<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hot-recommend-title<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>热门推荐<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>news-list<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                        {% for hotnews in page %}
                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>news-item clearfix<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>news-thumbnail<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{{ hotnews.news.image_url }}<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>news-content<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>news-title<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{% url <span class="token punctuation">'</span>news:news_detail<span class="token punctuation">'</span> hotnews.news_id %}<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>{{ hotnews.news.title }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>news-details<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>{{ hotnews.news.digest }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>news-other<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>news-type<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>{{ hotnews.news.tag.name }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
                                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>news-time<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>{{ hotnews.update_time }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
                                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>news-author<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>{{ hotnews.news.author.username }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
                                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
                        {% endfor %}


                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>


            <span class="token comment">&lt;!-- news-contain end --&gt;</span>
        {% endif %}
        <span class="token comment">&lt;!-- Pagination start--&gt;</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>page-box<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>pages<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>pagebar<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>pageBar<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>al<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>{{ page.paginator.count|default:0 }}条<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
                <span class="token comment">&lt;!-- prev page start--&gt;</span>
                {% if page.has_previous %}
                <span class="token comment">&lt;!-- has_previous判断是否有上一页--&gt;</span>
                    {% if query %}
                	<span class="token comment">&lt;!-- previous_page_number上一页的页码--&gt;</span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{% url <span class="token punctuation">'</span>news:news_search<span class="token punctuation">'</span> %}?q={{ query }}&amp;page={{ page.previous_page_number }}<span class="token punctuation">"</span></span>
                           <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>prev<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>上一页<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
                    {% else %}
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{% url <span class="token punctuation">'</span>news:news_search<span class="token punctuation">'</span> %}?page={{ page.previous_page_number }}<span class="token punctuation">"</span></span>
                           <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>prev<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>上一页<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
                    {% endif %}
                {% endif %}
                <span class="token comment">&lt;!-- prev page end--&gt;</span>

             <span class="token comment">&lt;!-- page bar start--&gt;</span>
             <span class="token comment">&lt;!-- 有上一页或是有下一页时执行,若都没有说明不需要分页 --&gt;</span>
            {% if page.has_previous or page.has_next %}
            <span class="token comment">&lt;!-- 使用自定义的过滤器来处理分页 --&gt;</span>
                {% for n in page|page_bar %}
                    {% if query %}
                        {% if n == '...' %}
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>point<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>{{ n }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
                        {% else %}
                            {% if n == page.number %}
                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sel<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>{{ n }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
                            {% else %}
                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{% url <span class="token punctuation">'</span>news:news_search<span class="token punctuation">'</span> %}?page={{ n }}&amp;q={{ query }}<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>{{ n }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
                            {% endif %}
                        {% endif %}
                    {% else %}
                        {% if n == '...' %}
                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>point<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>{{ n }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
                        {% else %}
                            {% if n == page.number %}
                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sel<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>{{ n }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
                            {% else %}
                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{% url <span class="token punctuation">'</span>news:news_search<span class="token punctuation">'</span> %}?page={{ n }}<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>{{ n }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
                            {% endif %}
                        {% endif %}
                    {% endif %}
                {% endfor %}
            {% endif %}
                <span class="token comment">&lt;!-- page bar end--&gt;</span>

                <span class="token comment">&lt;!-- next page start--&gt;</span>
                {% if page.has_next %}
                    {% if query %}
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{% url <span class="token punctuation">'</span>news:news_search<span class="token punctuation">'</span> %}?q={{ query }}&amp;page={{ page.next_page_number }}<span class="token punctuation">"</span></span>
                           <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>prev<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>下一页<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
                    {% else %}
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{% url <span class="token punctuation">'</span>news:news_search<span class="token punctuation">'</span> %}?page={{ page.next_page_number }}<span class="token punctuation">"</span></span>
                           <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>prev<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>下一页<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
                    {% endif %}
                {% endif %}
                <span class="token comment">&lt;!-- next page end--&gt;</span>


            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token comment">&lt;!-- Pagination end--&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- content end --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- main-contain  end --&gt;</span>
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143

{% endblock %}

4.3>css代码

修改static/css/news/search.css如下：

/* ================= main start ================= */
#main {
    margin-top: 25px;
    min-height: 700px;
}
/* ========= main-contain start ============ */
#main .main-contain {
    width: 800px;
    float: left;
    background: #fff;
}
1
2
3
4
5
6
7
8
9
10
11

/* === search-box start === /
.main-contain .search-box {
padding: 40px 50px;
width: 700px;
box-shadow: 1px 2px rgba(0,0,0,.1);
display: inline-flex;
}
.main-contain .search-box .search-control {
width: 600px;
height: 40px;
border-radius: 20px 0 0 20px;
border: 1px solid #ddd;
border-right: none;
padding-left: 0.88em;
font-size: 20px;
}
.main-contain .search-box .search-btn {
width: 100px;
height: 40px;
border: 1px solid red;
background: red;
color: #fff;
font-size: 20px;
border-radius: 0 20px 20px 0;
cursor: pointer;
}
/ === search-box end === */

/* === content start === /
/ == search-list start == /
.content .search-result-list {
padding-top: 20px;
}
.content .search-result-list .search-result-title {
padding-left: 20px;
font-size: 20px;
line-height: 26px;
}
.content .search-result-list .search-result-title span {
font-weight: 700;
color: #ff6620;
}
/ == search-list end == /
/ == news-contain start == /
.content .news-contain .hot-recommend-list {
padding-top: 20px;
}
.hot-recommend-list .hot-recommend-title {
padding-left: 20px;
font-size: 20px;
line-height: 26px;
}
.content .news-contain li {
border-bottom: 1px solid #ededed;
}
.news-list .news-item {
padding: 20px;
}
.news-list .news-item .news-thumbnail {
float: left;
width: 224px;
height: 160px;
margin-right: 30px;
overflow: hidden;
}
.news-item .news-thumbnail img {
width: 100%;
height: 100%;
transition: all 0.3s ease-out;
}
.news-item .news-thumbnail:hover img {
transform: scale(1.1);
transition: all 0.3s ease-in;
}
.news-list .news-item .news-content {
width: 500px;
height: 170px;
float: right;
color: #878787;
font-size: 14px;
}
.news-item .news-content .news-title{
color: #212121;
font-size: 22px;
height: 52px;
line-height: 26px;
transition:all 0.3s ease-out;
}
.news-item .news-content .news-title:hover {
color: #5b86db;
transition:all 0.3s ease-in;
}
.news-item .news-content .news-details {
height: 44px;
line-height: 22px;
margin-top: 19px;
text-align: justify;
}
.news-item .news-content .news-other {
margin-top: 30px;
}
.news-content .news-other .news-type {
color: #5b86db;
}
.news-content .news-other .news-author {
float: right;
margin-right: 15px;
}
.news-content .news-other .news-time {
float: right;
}
/ === current index start === */
#pages {
padding: 32px 0 10px;
}

.page-box {
text-align: center;
/font-size: 14px;/
}

#pages a.prev, a.next {
width: 56px;
padding: 0
}

#pages a {
display: inline-block;
height: 26px;
line-height: 26px;
background: #fff;
border: 1px solid #e3e3e3;
text-align: center;
color: #333;
padding: 0 10px
}

#pages .sel {
display: inline-block;
height: 26px;
line-height: 26px;
background: #0093E9;
border: 1px solid #0093E9;
color: #fff;
text-align: center;
padding: 0 10px
}
#pages .point {
display: inline-block;
height: 26px;
line-height: 26px;
background: #fff;
border: 1px solid #e3e3e3;
text-align: center;
color: #333;
padding: 0 10px
}
.highlighted {
font-weight: 700;
color: #ff6620;
}
/* === current index end === /
/ === content end === /
/ ================= main end ================= */

4.4>js代码

搜索页面的js代码于新闻页面的雷同, 仅仅只需要改一些参数即可

$(() => {
    let iPage = 1;       // 当前页面页数
    let iTotalPage = 1;      // 总页数
    let bIsLoadData =false;      // 是否正在加载
    fn_load_docs();      //  加载文件列表
    // 页面滚动加载
    $(window).scroll(function () {
       // 浏览器窗口高度
        let showHeight = $(window).height();
       // 整个网页高度
        let pageHeight = $(document).height();
        //页面可以滚动的距离
        let canScrollHeight = pageHeight - showHeight;
        // 页面滚动了多少， 整个是随着页面滚动实时变化的
        let nowScroll = $(document).scrollTop();
        if ((canScrollHeight - nowScroll) < 100){
            if(!bIsLoadData){
                bIsLoadData = true;
                //判断页数，去更新新闻，小于总数才加载
                if(iPage < iTotalPage){
                    iPage += 1;
                    fn_load_docs();
            <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token punctuation">{</span>
                message<span class="token punctuation">.</span><span class="token function">showInfo</span><span class="token punctuation">(</span><span class="token string">'已全部加载，没有更多内容！'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'a.btn-more'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token string">'已全部加载，没有更多内容！'</span><span class="token punctuation">)</span>
            <span class="token punctuation">}</span>

        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 获取docs信息</span>
<span class="token keyword">function</span> <span class="token function">fn_load_docs</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    $
        <span class="token punctuation">.</span><span class="token function">ajax</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            url<span class="token punctuation">:</span> <span class="token string">'/doc/docs'</span><span class="token punctuation">,</span>
            type<span class="token punctuation">:</span> <span class="token string">'GET'</span><span class="token punctuation">,</span>
            data<span class="token punctuation">:</span> <span class="token punctuation">{</span>page<span class="token punctuation">:</span> iPage<span class="token punctuation">}</span><span class="token punctuation">,</span>
            dataType<span class="token punctuation">:</span> <span class="token string">'json'</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">done</span><span class="token punctuation">(</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">.</span>errno <span class="token operator">===</span> <span class="token string">'0'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                iTotalPage <span class="token operator">=</span> res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>total_page<span class="token punctuation">;</span>
                res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>docs<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>doc<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                    <span class="token keyword">let</span> content <span class="token operator">=</span> <span class="token template-string"><span class="token string">`&lt;li class="pay-item"&gt;
                    &lt;div class="pay-img doc"&gt;&lt;/div&gt;
                       &lt;img src="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> doc<span class="token punctuation">.</span>image_url <span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">" alt="" class="pay-img doc"&gt;
                    &lt;div class="d-contain"&gt;
                        &lt;p class="doc-title"&gt;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> doc<span class="token punctuation">.</span>title <span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&lt;/p&gt;
                        &lt;p class="doc-desc"&gt;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> doc<span class="token punctuation">.</span>desc <span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&lt;/p&gt;

                        &lt;!-- /www/?xxx --&gt;
                        &lt;a href="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> doc<span class="token punctuation">.</span>file_url <span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">" class="pay-price" download="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> doc<span class="token punctuation">.</span>file_name <span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">"&gt;下载&lt;/a&gt;
                    &lt;/div&gt;
                &lt;/li&gt;`</span></span><span class="token punctuation">;</span>
                    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.pay-list'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span>content<span class="token punctuation">)</span><span class="token punctuation">;</span>
                    bIsLoadData <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
                    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'a.btn-more'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token string">'滚动加载更多'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span>
            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
                message<span class="token punctuation">.</span><span class="token function">showError</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>errmsg<span class="token punctuation">)</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">fail</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            message<span class="token punctuation">.</span><span class="token function">showError</span><span class="token punctuation">(</span><span class="token string">'服务器超时，请重试！'</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

});

编写完上述代码后就可以运行搜索了，如果运行过程中出现搜索不到结果的问题，请先去检查docker容器的运行状态，到控制台中输入：curl http://127.0.0.1:9200查看状态，若连接失败并且输入docker ps时没有内容，那么说明docker没有运行，使用以下方法可以设置docker容器的启动

VI. docker 容器相关启动

docker 是安装在ubuntu中的，所以如果你重启了ubuntu，创建好的elasticsearch容器当然也会关闭。那怎么打开关闭的容器呢？

先查询容器名, 运行命令：
```
docker ps -a

   
   
   
   1
1
```
找到你要启动的容器名，然后运行命令
```
docker start 容器名

   
   
   
   1
1
```
即可启动容器

如果希望docker容器能够遇到错误自动重启, 则可以在创建容器时携带参数:

docker run --restart=on-failure

 
 
 
 1
1

如果已经创建了docker容器, 则可以通过update来更新设置:

docker update --restart=on-failure <CONTAINER ID>

 
 
 
 1
1

其他参数的参考如下:

Flag	Description
no	不自动重启容器. (默认value)
on-failure	容器发生error而退出(容器退出状态不为0)重启容器
unless-stopped	在容器已经stop掉或Docker stoped/restarted的时候才重启容器
always	在容器已经stop掉或Docker stoped/restarted的时候才重启容器

如果想要docker容器开机自启, 可以参考如下设置方法:[reboot 后 Docker服务及容器自动启动设置](https://blog.csdn.net/wxb880114/article/details/82904765

                                </div>
            <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-095d4a0b23.css" rel="stylesheet">
                </div>
</article>
<div class="postTime">
    <p class="article-bar-bottom"></p>
    <span>
        文章最后发布于: 2019年08月25日 11:45:54        </span>
</div>
1
2
3
4
5
6
7
8
9

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/205576