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

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

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

视差效果

先说下这个效果是怎样的,就是如下图这样:

不错吧~

上面这个效果的代码为:

<div style="height: 50vh;
  background-image: url(https://cdn.jsdelivr.net/gh/cxying/ying-blog-cdn@v1.0.6/files/static/images/pictures/1564919561736.jpeg);
  background-attachment: fixed;
  background-size: ;
  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: 视差

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

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