imgbox.php 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. <?php
  2. include(get_stylesheet_directory().'/layouts/all_opt.php');
  3. $text_logo = iro_opt('text_logo');
  4. $print_social_zone = function() use ($all_opt,$social_display_icon):void{
  5. // 左箭头
  6. if (iro_opt('cover_random_graphs_switch', 'true')):?>
  7. <li id="bg-pre"><img src="<?=$social_display_icon?>pre.png" loading="lazy" alt="<?=__('Previous','sakurairo')?>"/></li>
  8. <?php
  9. endif;
  10. // 微信
  11. if (iro_opt('wechat')):?>
  12. <li class="wechat"><a href="#" title="WeChat"><img loading="lazy" src="<?=$social_display_icon?>wechat.png" /></a>
  13. <div class="wechatInner">
  14. <img class="wechat-img" style="height: max-content;width: max-content;" loading="lazy" src="<?=iro_opt('wechat', '')?>" alt="WeChat">
  15. </div>
  16. </li>
  17. <?php
  18. endif;
  19. // 大体(all_opt.php)
  20. foreach ($all_opt as $key => $value):
  21. if (!empty($value['link'])):
  22. // 显然 这里的逻辑可以看看all_opt的结构(
  23. $img_url = $value['img'] ?? ($social_display_icon . ($value['icon'] ?? $key) . '.png');
  24. $title = $value['title'] ?? $key;
  25. ?>
  26. <li><a href="<?=$value['link'];?>" target="_blank" class="social-<?=$value['class'] ?? $key?>" title="<?=$title?>"><img alt="<?=$title?>" loading="lazy" src="<?=$img_url?>" /></a></li>
  27. <?php
  28. endif;
  29. endforeach;
  30. // 邮箱
  31. if (iro_opt('email_name') && iro_opt('email_domain')):?>
  32. <li><a onclick="mail_me()" class="social-wangyiyun" title="E-mail"><img loading="lazy"
  33. alt="E-mail"
  34. src="<?=iro_opt('vision_resource_basepath')?><?=iro_opt('social_display_icon')?>/mail.png" /></a></li>
  35. <?php
  36. endif;
  37. // 右箭头
  38. if (iro_opt('cover_random_graphs_switch', 'true')):?>
  39. <li id="bg-next"><img loading="lazy" src="<?=$social_display_icon?>next.png" alt="<?=__('Next','sakurairo')?>"/></li>
  40. <?php endif;
  41. }
  42. ?>
  43. <?php
  44. /*未定义的伪类 */
  45. /* <style>
  46. .header-info::before {
  47. display: none !important;
  48. opacity: 0 !important;
  49. }
  50. </style> */
  51. ?>
  52. <div id="banner_wave_1"></div>
  53. <div id="banner_wave_2"></div>
  54. <figure id="centerbg" class="centerbg">
  55. <?php if (iro_opt('infor_bar')) { ?>
  56. <div class="focusinfo">
  57. <?php if (isset($text_logo['text']) && iro_opt('text_logo_options', 'true')) : ?>
  58. <h1 class="center-text glitch is-glitching Ubuntu-font" data-text="<?=$text_logo['text']; ?>">
  59. <?php echo $text_logo['text']; ?></h1>
  60. <?php else : ?>
  61. <div class="header-tou"><a href="<?php bloginfo('url'); ?>"><img loading="lazy" src="<?=iro_opt('personal_avatar', '') ?: iro_opt('vision_resource_basepath','https://s.nmxc.ltd/sakurairo_vision/@2.6/').'series/avatar.webp'?>"></a>
  62. </div>
  63. <?php endif; ?>
  64. <div class="header-container">
  65. <div class="header-info">
  66. <!-- 首页一言打字效果 -->
  67. <?php if (iro_opt('signature_typing', 'true')) : ?>
  68. <?php if (iro_opt('signature_typing_marks', 'true')) : ?><i class="fa-solid fa-quote-left"></i><?php endif; ?>
  69. <span class="element"><?=iro_opt('signature_typing_placeholder','疯狂造句中......')?></span>
  70. <?php if (iro_opt('signature_typing_marks', 'true')) : ?><i class="fa-solid fa-quote-right"></i><?php endif; ?>
  71. <span class="element"></span>
  72. <script type="application/json" id="typed-js-initial">
  73. <?= iro_opt('signature_typing_json', ''); ?>
  74. </script>
  75. <!-- var typed = new Typed('.element', {
  76. strings: ["给时光以生命,给岁月以文明", ], //输入内容, 支持html标签
  77. typeSpeed: 140, //打字速度
  78. backSpeed: 50, //回退速度
  79. loop: false, //是否循环
  80. loopCount: Infinity,
  81. showCursor: true //是否开启光标
  82. }); -->
  83. <?php endif; ?>
  84. <p><?php echo iro_opt('signature_text', 'Hi, Mashiro?'); ?></p>
  85. <?php if (iro_opt('infor_bar_style') === 'v2') : ?>
  86. <div class="top-social_v2">
  87. <?php $print_social_zone(); ?>
  88. </div>
  89. <?php endif; ?>
  90. </div>
  91. <!-- 首页说说 -->
  92. <?php if (iro_opt('homepage_shuoshuo', 'true')) : ?>
  93. <?php
  94. $args = array(
  95. 'post_type' => 'shuoshuo',
  96. 'post_status' => 'publish',
  97. 'posts_per_page' => 1
  98. );
  99. $shuoshuo_query = new WP_Query($args);
  100. ?>
  101. <?php while ($shuoshuo_query->have_posts()) : $shuoshuo_query->the_post(); ?>
  102. <div class="header-shuo">
  103. <p><?php echo strip_tags(get_the_content()); ?></p>
  104. <p class="header_shuoshuo_time"><i class="fa-regular fa-clock"></i> <?php the_time('Y/n/j G:i'); ?></p>
  105. </div>
  106. <?php endwhile; ?>
  107. <?php wp_reset_postdata(); ?>
  108. <?php endif; ?>
  109. </div>
  110. <?php if (iro_opt('infor_bar_style') === 'v1') : ?>
  111. <div class="top-social">
  112. <?php $print_social_zone(); ?>
  113. </div>
  114. <?php endif; ?>
  115. </div>
  116. <?php } ?>
  117. </figure>
  118. <?php if (iro_opt('homepage_shuoshuo', 'true')) : ?>
  119. <script type="text/javascript">
  120. (function() {
  121. const container = document.querySelector(".header-container");
  122. const dom1 = document.querySelector(".header-info");
  123. const dom2 = document.querySelector(".header-shuo");
  124. dom2.remove();
  125. const duration = 1500; // 持续时间,例如:1000毫秒
  126. let index = 0;
  127. function fadeInOut(dom1, dom2, duration) {
  128. let start = null;
  129. const step = (timestamp) => {
  130. if (!start) start = timestamp;
  131. const progress = timestamp - start;
  132. const opacity = Math.abs(Math.sin(progress / duration * (Math.PI / 2)));
  133. // dom1.style.opacity = 1 - opacity;
  134. dom2.style.opacity = opacity;
  135. if (dom1.style.opacity <=0.1){
  136. dom1.remove();
  137. }else{
  138. dom1.style.opacity = 1 - opacity;
  139. }
  140. if (progress < duration) {
  141. requestAnimationFrame(step);
  142. }
  143. };
  144. requestAnimationFrame(step);
  145. }
  146. setInterval(() => {
  147. if (index === 0) {
  148. container.append(dom2);
  149. fadeInOut(dom1, dom2, duration);
  150. index++;
  151. } else if (index === 1) {
  152. container.append(dom1);
  153. fadeInOut(dom2, dom1, duration);
  154. index--;
  155. }
  156. }, 10000);
  157. })();
  158. </script>
  159. <?php endif; ?>
  160. <?php
  161. echo bgvideo(); //BGVideo
  162. ?>
  163. <!-- 首页下拉箭头 -->
  164. <?php if (iro_opt('drop_down_arrow', 'true')) : ?>
  165. <div class="headertop-down" onclick="headertop_down()"><span><i class="fa-solid fa-circle-dot fa-2xl"
  166. aria-hidden="true" style="color:<?php echo iro_opt('drop_down_arrow_color'); ?>"></i></span></div>
  167. <?php endif; ?>