Blog Page Top Img兼容mp4视频

page top img兼容mp4视频

参考

本篇拿essay界面举例，自己举一反三

修改主题目录\anzhiyu\layout\includes\page\essay.pug

1
2
3
4
5
-      .author-content.author-content-item.essayPage.single(style = i.top_background ? `background: url(${i.top_background}) left 28% / cover no-repeat;` : "")
+      .author-content.author-content-item.essayPage.single(style = i.top_background && !i.top_background.endsWith('.mp4') ? `background: url(${i.top_background}) left 28% / cover no-repeat;` : "")
+        if i.top_background && i.top_background.endsWith('.mp4')
+          video(autoplay loop muted playsinline style="pointer-events: none; object-fit: cover; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100% ; width: auto; height: auto ;position: absolute;")
+            source(src=url_for(i.top_background) type="video/mp4")

修改完毕，在essay.yml的顶部配置项的top_background，现在也可以调用mp4视频了

1
2
3
 - title: 即刻短文
-  top_background: https://我原来是图片.png
+  top_background: https://现在这里可以是视频了.mp4