oyiso 首页适配视频
settings.yaml 修改
- group: index
label: 首页设置
formSchema:
- $formkit: radio
name: oyiso_home_tpl
id: oyiso_home_tpl
key: oyiso_home_tpl
label: 首页模板
value: home
options:
- label: 首页模板（默认）
value: home
- label: 首页模板1
value: home1
- $formkit: group
name: widgets
key: widgets
if: $get(oyiso_home_tpl).value == 'home'
label: 首页小组件
value:
widgets_enable: false
widgets_content: "comment"
children:
- $formkit: checkbox
name: widgets_enable
id: widgets_enable
key: widgets_enable
help: 开启后在首页顶部显示小组件
- $formkit: select
if: $get(widgets_enable).value
name: widgets_content
key: widgets_content
label: 小组件内容
options:
- label: 推荐文章
value: post
- label: 最新评论
value: comment
- $formkit: radio
if: $get(oyiso_home_tpl).value == 'home1'
label: 背景模式
name: enable_above_video
key: enable_above_video
id: enable_above_video
value: false
options:
- label: 显示视频
value: true
- label: 显示图片
value: false
- $formkit: attachment
name: oyiso_home1_video
key: oyiso_home1_video
if: $get(enable_above_video).value && $get(oyiso_home_tpl).value == 'home1'
label: 动态壁纸
placeholder: 请填写动态壁纸地址
value: ""
help: http(s)://xxx.mp4
- $formkit: attachment
name: oyiso_home1_cover
key: oyiso_home1_cover
if: $get(enable_above_video).value == false && $get(oyiso_home_tpl).value == 'home1'
label: 背景图
value: /themes/theme-oyiso/assets/images/default-cover.jpg
help: "支持随机图API，默认：/themes/theme-oyiso/assets/images/default-cover.jpg"
- $formkit: checkbox
name: oyiso_home1_cover_mobile
key: oyiso_home1_cover_mobile
if: $get(oyiso_home_tpl).value == 'home1'
label: 移动端背景图
value: true
help: 开启后移动端显示背景图
- $formkit: code
name: oyiso_home1_slogan
key: oyiso_home1_slogan
if: $get(oyiso_home_tpl).value == 'home1'
label: 首页标语
height: 100px
language: html
help: "标语，字体较大，如需要主题色则使用span标签包裹，如：<span>Oyiso Theme</span>"
- $formkit: code
name: oyiso_home1_slogan_sub
key: oyiso_home1_slogan_sub
if: $get(oyiso_home_tpl).value == 'home1'
label: 首页副标语
height: 100px
language: html
help: "副标语，字体较小，如需要主题色则使用span标签包裹，如：<span>Oyiso Theme</span>"
- $formkit: checkbox
name: oyiso_home1_waves
key: oyiso_home1_waves
if: $get(oyiso_home_tpl).value == 'home1'
label: 隐藏波浪动画
value: false
help: 开启后隐藏波浪动画，该动画用于衔接页面过渡作用（建议默认开启）
templates\macro\tpl-home1.html 替换
<head>
<!-- 动态生成 <style> 标签 -->
<style th:if="${theme.config.index.oyiso_home1_cover_mobile}">
@media (max-width: 768px) {
.home1-bannar {
display: block;
}
}
</style>
<style th:unless="${theme.config.index.oyiso_home1_cover_mobile}">
@media (max-width: 768px) {
.home1-bannar {
display: none;
}
}
.home1-newest {
padding-top: 0 !important;
}
</style>
<style>
main .home1-bannar .screen .imgbox video {
width: 100%;
height: 100%;
object-fit: cover;
user-select: none;
pointer-events: none;
}
</style>
</head>
<section class="home1-bannar">
<div class="screen">
<div class="preloader">
<div class="loader"></div>
</div>
<div class="imgbox">
<!-- 判断显示视频还是图片 -->
<th:block th:if="${theme.config.index.enable_above_video}">
<video th:src="${theme.config.index.oyiso_home1_video}" autoplay loop muted></video>
</th:block>
<th:block th:unless="${theme.config.index.enable_above_video}">
<img th:src="${theme.config.index.oyiso_home1_cover}" alt="">
</th:block>
<div class="nav-news ">
<div class="text">
<p
th:text="${not #strings.isEmpty(theme.config.index.oyiso_home1_slogan_sub) ? theme.config.index.oyiso_home1_slogan_sub : site.subtitle}">
</p>
<h1
th:text="${not #strings.isEmpty(theme.config.index.oyiso_home1_slogan) ? theme.config.index.oyiso_home1_slogan : site.title}">
</h1>
</div>
</div>
</div>
<div class="waves-box" th:if="${theme.config.index.oyiso_home1_waves}">
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns: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 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" />
<use xlink:href="#gentle-wave" x="48" y="3" />
<use xlink:href="#gentle-wave" x="48" y="5" />
<use xlink:href="#gentle-wave" x="48" y="7" />
</g>
</svg>
</div>
</div>
</section>
templates\assets\js\theme.js 替换
const homeView = def_img => {
if (!def_img) return;
let imgbox = document.querySelector(".home1-bannar .imgbox");
if (imgbox) {
let preloader = document.querySelector(".home1-bannar .preloader"),
img = imgbox.querySelector("img"),
video = imgbox.querySelector("video");
const handleMediaLoad = () => {
preloader.classList.add("hidden");
imgbox.classList.add("loaded");
};
const handleMediaError = (attempts, mediaElement) => {
if (attempts > 0) {
setTimeout(() => {
mediaElement.src = mediaElement.src;
mediaElement.onload = handleMediaLoad;
mediaElement.onerror = () => handleMediaError(attempts - 1, mediaElement);
}, 1000);
} else {
mediaElement.src = def_img;
preloader.classList.add("hidden");
imgbox.classList.add("loaded");
}
};
if (img) {
if (img.complete) {
setTimeout(handleMediaLoad, 10);
} else {
img.onload = handleMediaLoad;
img.onerror = () => handleMediaError(2, img);
}
}
if (video) {
video.onloadeddata = handleMediaLoad;
video.onerror = () => handleMediaError(2, video);
}
}
},
.png!wp5)
