Django搭建网络相册：模态与动画

3597 views, 2021/08/09 updated Go to Comments

如何展示图片的细节有很多种方法。作为一个小巧的相册网站，不需要给每张照片单独的详情页面，而是用浮窗的形式就足够了。

本章将用模态窗和动画的搭配，实现单页面图片展示的功能。

这更多的是模板部分的内容。

悬浮动画

动画是产品精致程度的体现，好的动画可以让用户感觉非常舒适。

随着前端技术的发展，仅靠 css 也可以实现相当精美的动画，并且有很多现成可参考的代码。

比如下面这段鼠标悬停后，元素悬浮的动画。

在项目根路径新建 /static/hover.css 文件，写入：（直接复制即可，暂时不用深究细节）

/* /static/hover.css */

/* 此样式来自 Hover.css */
/* https://ianlunn.github.io/Hover/ */
/* Float Shadow */
.hvr-float-shadow {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.hvr-float-shadow:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: 0;
background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
/* W3C */
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform, opacity;
transition-property: transform, opacity;
}
.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
/* move the element up by 5px */
}
.hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before {
opacity: 1;
-webkit-transform: translateY(5px);
transform: translateY(5px);
/* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}

css 文件与媒体文件类似，都属于静态文件，Django 默认是不处理它们的。

因此需要修改全局配置，指定此类文件的存放路径：（就是 hover.css 的路径）

# /album/settings.py

...
# 修改
STATIC_URL  = '/static/'
# 新增
STATICFILES_DIRS = (
    BASE_DIR / 'static',
)

接着同样的，将其注册到 url 路径中：

# /album/urls.py

...
urlpatterns = [
    ...
]

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

然后就可以像下面这样，在 base.html 中引入它了：

<!-- /templates/base.html -->

...
  <head>
    ...
    {% load static %}
    <link rel="stylesheet" href="{% static 'hover.css' %}">
  </head>
...

{% load static %} 标签载入静态文件相关的全局配置。
{% static 'hover.css' %} 载入此 css 文件的实际地址。

使用也很简单，你想要哪个元素带有鼠标悬停悬浮效果，在元素标签里加 class="hvr-float-shadow" 就可以了。

像这样修改 list.html ：

<!-- /templates/photo/list.html -->

...
{% for photo in photos %}
<div class="...">
    <div class="... hvr-float-shadow">
        ...
    </div>
</div>
{% endfor %}
...

刷新页面并将鼠标悬停在图片卡片上，它就有向上腾空的动画了。

如果无此效果，检查浏览器控制台是否有 404 报错。有就表示静态文件载入失败。

模态窗

模态窗是指平铺在页面上的一个窗口，并且带有背景遮罩的效果。Bootstrap 自带的模态窗就非常够用了。

继续修改 list.html 代码对应位置：

<!-- /templates/photo/list.html -->

...
{% block content %}
...
{% for photo in photos %}
<div class="col-4 py-2">
    <div class="card hvr-float-shadow">
        <!-- 修改了这里 -->
        <a 
           href="#"
           data-bs-toggle="modal" 
           data-bs-target="#photo-{{ photo.id }}"
           >
            <img 
                 src="{{ photo.image.url }}" 
                 alt=""
                 class="card-img"
                 >
        </a>
        <!-- ******* -->
    </div>
</div>
{% endfor %}
...

<!-- 新增了这里 -->
<!-- 注意下面这部分代码不能直接写在卡片的 for 循环中 -->
{% for photo in photos  %}
<!-- Modal -->
<div class="modal fade" id="photo-{{ photo.id }}">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <img 
                     src="{{ photo.image.url }}" 
                     alt=""
                     class="card-img"
                     >
            </div>
        </div>
    </div>
</div>
{% endfor %}
<!-- ************ -->

{% endblock content %}