新增侧边栏小相框的视频模式

youranreus · May 13, 2021 · 9da7410 · 9da7410
1 parent 99ad3e8
commit 9da7410
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 0 deletions.
diff --git a/CSS/G.css b/CSS/G.css
@@ -1206,6 +1206,7 @@ figure:hover figcaption{
   -webkit-background-size: cover;
   -o-background-size: cover;
   background-position: center center;
+  position: relative;
 }
 #sliderbar-photo:hover div{
   opacity: 1;
@@ -1225,6 +1226,9 @@ figure:hover figcaption{
   transform: translateY(-50%);
   text-align: center;
 }
+#sliderbar-video{
+  position: absolute;
+}
 #recentComment{
   padding: 10px;
   margin-bottom: 100px;

diff --git a/footer.php b/footer.php
@@ -100,5 +100,18 @@
 	show_site_runtime("<?php getBuildTime($this->options->builtTime);?>");
 	<?php echo $this->options->CustomJSf;?>
   document.getElementById("sliderbar-photo").style.height = document.getElementById('categoryList').clientHeight;
+	if(document.getElementById("sliderbar-video")!=undefined)
+	{
+		if(document.getElementById("sliderbar-photo").clientHeight >= document.getElementById("sliderbar-photo").clientWidth)
+		{
+			document.getElementById("sliderbar-video").style.height = document.getElementById('sliderbar-photo').clientHeight;
+		}
+		else
+		{
+			document.getElementById("sliderbar-video").style.height = document.getElementById('sliderbar-photo').clientWidth;
+		}
+	}
+
+
 </script>
 </body>
diff --git a/functions.php b/functions.php
@@ -58,9 +58,18 @@ function themeConfig($form) {
     ) , '0', _t('启用侧边栏小相框（只能放一张图片）') , _t('默认为关闭'));
     $form->addInput($enableSliderBarPhoto);
 
+    $enableSliderBarVideo = new Typecho_Widget_Helper_Form_Element_Radio('enableSliderBarVideo', array(
+        '1' => _t('是') ,
+        '0' => _t('否')
+    ) , '0', _t('启用侧边栏小相框的视频模式') , _t('默认为关闭'));
+    $form->addInput($enableSliderBarVideo);
+
     $profilePhoto = new Typecho_Widget_Helper_Form_Element_Text('profilePhoto', NULL, NULL, _t('侧边栏小相框图片') , _t('https://'));
     $form->addInput($profilePhoto);
 
+    $profileVideo = new Typecho_Widget_Helper_Form_Element_Text('profileVideo', NULL, NULL, _t('侧边栏小相框视频（需开启视频模式）') , _t('https://'));
+    $form->addInput($profileVideo);
+
     $profilePhotoDes = new Typecho_Widget_Helper_Form_Element_Text('profilePhotoDes', NULL, NULL, _t('侧边栏小相框图片介绍') , _t('阿巴阿巴'));
     $form->addInput($profilePhotoDes);
 

diff --git a/sliderbar.php b/sliderbar.php
@@ -33,10 +33,14 @@
     </div>
 
     <div class="sliderbar-content" id="sliderbar-photo" style="background-image:url(<?php echo $this->options->profilePhoto; ?>)">
+      <?php if ($this->options->enableSliderBarVideo): ?>
+        <video id="sliderbar-video" loop muted autoplay src="<?php echo $this->options->profileVideo; ?>" poster="<?php echo $this->options->profilePhoto; ?>"></video>
+      <?php endif; ?>
       <div>
         <p><?php echo $this->options->profilePhotoDes; ?></p>
       </div>
     </div>
+
   </div>
 
   <div class="sliderbar-content" id="recentComment">