通过PS将视频设置为Hexo首页动图

说明

1.原理很简单，用gif即可。不涉及改代码，所以任意hexo主题都能适用，笔者目前使用的是butterfly主题。
2.如果想要4k高清效果的，这边建议，引入视频作为背景吧，亲。（需求不一样）
3.动图的清晰度跟素材视频有关，且考虑加载速度问题，一般不建议太大的图片作为背景（Gif压缩率太低了，建议引入视频）
4.本文仅做笔者流程记录，不作内容说明。

内容1

1.PS打开文件，导入，视频帧到图层，截取需要设置为动图的片段，导入。（建议至少720p，作首页大图，则考虑1080p以上）
2.窗口，打开时间轴和图层，根据时间轴删去无用的帧，以及删去无用的图层。（以及及时存档）
3.调整时间轴，不建议帧数太大，否则可能导出失败。(笔者最大一张图是60帧没什么问题)
4.导出，存储为web所用格式，颜色选256，图案，无透明度仿色。（考虑图片大小问题这么选，无仿色、图案、杂色各有优缺点，建议选图案）
5.将原先的大图替换为动图即可。

同样因为是图片，可以直接作为文章大图。（好，好鸡肋？）暂且就是这样。博客调整的时候做了一些，其实可以找一些搞笑动漫来做动图的。

最后需要的自取：
https://pokemon.lanzoum.com/imI2N1ole22f
密码:pm
https://pokemon.lanzoum.com/i2IPv1ole19g
密码:pm

内容2

另外，如果需要引入视频的话，可以参考这篇帖子，非常简单详细。https://sarakale.top/blog/posts/3ecfae3a

4.x版本的butterfly主题可以参考。

备忘记录：
1.打开layout\includes\header\index.pug，需要增加的部分。建议根据版本进行查找比对。
（增加- var top_img = false，禁用首页图片）

~\themes\butterfly-4.12\layout\includes\header\index.pug
if !theme.disable_top_img && page.top_img !== false
  if is_post()
    - var top_img = false
    - var top_img = page.top_img || page.cover || theme.default_top_img

（增加- var isHomeClass = 'not-top-img',video(src='你的视频地址.mp4' autoplay="" loop="" muted="" style='min-height:100%;height:100%;width:100%;object-fit:cover')）

if !theme.disable_top_img && page.top_img !== false
header#page-header(class=`${isHomeClass+isFixedClass}` style=bg_img)
  !=partial('includes/header/nav', {}, {cache: true})
  if top_img !== false
    if is_post()
      - var isHomeClass = 'not-top-img'
      include ./post-info.pug
    else if is_home() 
      video(src='你的视频地址.mp4' autoplay="" loop="" muted="" style='min-height:100%;height:100%;width:100%;object-fit:cover')
      #site-info
        h1#site-title=site_title

2.引入css，在低于 1080P 分辨率情况下会自动变成静态图片。（不知道放哪，就粘贴到主题引用的任意一个css里面就行，移动端也播放视频，可以不加）

@media screen and (max-width: 767px) {
    video { 
        width: 100%;
        height: auto;
        display: none;
        background: url(图片地址.jpg);
    } 
}

至此，实现了背景图替换为视频，其他文章头图一样的原理，也可以改随机视频，这个网上资料也很全，建议自行查找。（不过不建议，文章多了houbuzhu啊。）