[Python #19] [Django #12] 穿上CSS搜索功能

pixabay

上期只使用了HTML form来显示搜索框，只有骨架没有肉体。今天就给这个骨架穿上CSS及简单的动态。

构想

在主页上部显示一个大搜索框，这个搜索框只限搜索texts的搜索，隐藏掉tag和title搜索。
这个搜索框需要容纳多个关键词，则需要js动态来控制负数参数。
添加一个[搜索更多]按钮，点击时显示tags，titles，texts三个搜索框。

但对一个不太懂CSS与JS的初学者来说，实现这些功能非常艰难。所以呢～～～我就借用开源的力量，网上应该有很多开源的代码。

探索开源1

如我所料，发现网上有很多 Bootstrap 例子。其中https://colorlib.com/wp/free-css3-html5-search-form-examples/ 的v4最合我意，都实现好了的复数搜索框。用它可以一并解决上述1，2，就你了。

探索开源2

w3schools有例子可以解决我第三个问题了。 https://www.w3schools.com/howto/howto_js_collapsible.asp

两个开源代码来之不易，我得怎么料理它们呢？因技术有限无法实现太复杂的UI，只能简单的实现了，上层大搜索框，下层显示‘搜索更多’按钮，点击按钮时第三行显示选项。背景颜色给我喜欢的蓝，黄，红，绿单色。OK

实现

首先在项目根目录创建一个static文件夹，在之下创建三个文件夹叫 css, images, js 并把开源代码放在其中。

此后，用django的设置来读取static文件夹。在settings.py文件设置如下。

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

STATIC_URL = '/static/'

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]

검색 기능은 메인에 노출해야 하므로 base.html에 코드를 추가하자. 주의할 점은 {% load static %}로 static 파일을 읽어야 한다. 또한 로 css 파일을 읽어온다.

{% load static %}
{% load post_extras %}




{% spaceless %}
{% endspaceless %}


  
      
      
      D_Blog

  
  
      
          
              
              
                  
                    
                      
                        
                      
                  
              
              
              
                  
                  
                      
                          
                          
                          
                          
                      
                  
              
          
      

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

结果

输入多个关键词 & 第三行隐藏

第三行显示

背景色太耀眼？，以后再改改吧。

[Cookie 😅] Python 3.7.4 Django 2.2.4 steem-python 1.0.1 goorm IDE 1.3