实现CSS视差效果并整合到主题中

引

之前尝试halo另一个主题siren，比较喜欢那个视差效果，想整到现在用的hanshan主题上来，经过查找和尝试，终于实现了~
参考了这里的相关例子和说明

视差效果

先说下这个效果是怎样的，就是如下图这样：

不错吧~

上面这个效果的代码为：

<div style="height: 50vh;
  background-image: url(https://api.luvying.com/acgimg?t=1);
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;"></div>

整合到hanshan主题

既然弄出这个效果来了，那就要想办法整合到我现在用的主题上来，具体修改方法如下

1.首先是CSS文件，在 main.min.css 追加

.cover-bg.fixed{
background-attachment: fixed;
background-size: cover;
background-position: center center;
}

然后在各页面模板文件首部图片处加上fixed，再指定图片就好了，我这里只修改了首页index的模板代码，其他页面类似

2.修改模板文件

以index.ftl为例，其他模板文件类似
有个需要注意的地方，要用视差效果，图片就不能够用< img >标签了，只能在style指定图片，即background-image: url(…)，所以需要删掉原来的< img >，不过感觉删掉…不太好吧，万一以后想替换回来又得改代码？So，我给它加了个home_cover_style的设置，true则是主题默认的，false就用视差效果（设置怎么改后面有），再加个判断，搞定~

			<!-- 封面 -->
                <header class="bg-cover hero">
                    <#if settings.home_cover?? && settings.home_cover!=''>
                      <!--cxy add if =begin=-->
                      <#if settings.home_cover_style>
                        <div class="cover-bg">
                            <img src="${settings.home_cover!}" alt="">
                        </div>
                       <#else>
                        <div class="cover-bg fixed" style="background-image: url(${settings.home_cover!});">
                        </div>
                      </#if>
                      <!--cxy add if =end=-->
                    <#else>
                        <div class="default-cover-bg">
                        </div>
                    </#if>

3.修改配置文件

上面修改后别急着去页面看，会报错的=。=因为home_cover_style都还没加到配置文件去，所以要去settings.yaml添加下面内容

    home_cover_style:
      name: home_cover_style
      label: 首页背景样式
      type: radio
      data-type: bool
      default: true
      options:
        - value: true
          label: 默认
        - value: false
          label: 视差

保存后就可以去主题的设置

出现了！然后改成视差，保存，去首页看看吧~
改完后感叹一句，halo设计的也太好了吧（可能是我孤陋寡闻了=。=），我一开始还想着怎么找不到设置页面的.ftl，结合官方文档和这次的修改，其实就是.ftl从settings.yaml中获取配置信息，然后在.ftl中进行获取。

可能会问，yaml中的内容和我设置的不一样啊？？？其实yaml可以理解为就是渲染了配置项而已，用户设置的值会在用户进入设置页时从后端数据库获取。