Butterfly
主题的可配置度很高,但主题界面上比较朴素。Butterfly
原有的文章页面显得有些生硬,于是想着给页面添加一些动态效果。波浪效果在大多数博客页面都有使用到,个人也比较喜欢,主要是因为波浪动效不会让人感觉到浮躁,还增加了页面的生动性。
新增模板
在 themes/butterfly/layout/includes/header
下新增 wave.pug
文件:
1 2 3 4 5 6 7 8 9 10 11
| <svg class="waves-svg" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"> <defs> <path id="gentle-wave" d="M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z"></path> </defs> <g class="parallax"> <use href="#gentle-wave" x="48" y="0"></use> <use href="#gentle-wave" x="48" y="3"></use> <use href="#gentle-wave" x="48" y="5"></use> <use href="#gentle-wave" x="48" y="7"></use> </g> </svg>
|
修改页面
在 themes/butterfly/layout/includes/header/index.pug
文件中的指定位置处新增如下代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| header#page-header(class=`${isHomeClass+isFixedClass}` style=bg_img) !=partial('includes/header/nav', {}, {cache: true}) if top_img !== false if is_post() include ./post-info.pug + include ./wave.pug else if is_home() #site-info h1#site-title=site_title if theme.subtitle.enable - var loadSubJs = true #site-subtitle span#subtitle if(theme.social) #site_social_icons !=partial('includes/header/social', {}, {cache: true}) #scroll-down i.fas.fa-angle-down.scroll-down-effects else #page-site-info h1#site-title=site_title
|
新增样式
在 themes/butterfly/source/css/_layout
下新增样式文件 wave.styl
:
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
| @media (max-width: 768px) { .waves-svg { display: none; } }
.waves-svg { --wave-background: $web-bg || var(--global-bg); position: absolute; bottom: -10px; width: 100%; height: 60px; }
.parallax>use { animation: move-forever 30s cubic-bezier(.55,.5,.45,.5) infinite; }
.parallax>use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; fill: var(--wave-background); opacity: .5; }
.parallax>use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; fill: var(--wave-background); opacity: .6; }
.parallax>use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; fill: var(--wave-background); opacity: .7; }
.parallax>use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; fill: var(--wave-background); }
@keyframes move-forever { from { transform: translate3d(-90px,0,0); } to { transform: translate3d(85px,0,0); } }
|
进一步优化
由于新增了波浪效果后,文章的发布信息会被波浪遮挡一部分,所以这里进一步扩展 butterfly
主题的配置。
在 themes/butterfly/sources/css/var.styl
文件中新增样式变量:
1 2 3 4
| $index_top_img_height = hexo-config('index_top_img_height') ? convert(hexo-config('index_top_img_height')) : 100vh $index_site_info_top = hexo-config('index_site_info_top') ? convert(hexo-config('index_site_info_top')) : 43% + $post_top_img_height = hexo-config('post_top_img_height') ? convert(hexo-config('post_top_img_height')) : 400px + $post_site_info_top = hexo-config('post_site_info_top') ? convert(hexo-config('post_site_info_top')) : 30%
|
修改 themes/butterfly/source/css/_layout/head.styl
文件中的样式:
1 2 3
| &.post-bg height: $post_top_img_height
|
主题配置文件 _config.butterfly.yml
中新增相关配置:
1 2
| + post_site_info_top: 40% + post_top_img_height: 400px
|