Browse Source

优化,修改,增加音乐

master
wen 2 years ago
parent
commit
dd16343204
  1. 49
      themes/beauty/views/layout/main.php
  2. 82
      themes/beauty/views/site/index.php
  3. 18
      www/css/beauty.css
  4. 2
      www/img/beauty/contactUs.svg
  5. 2
      www/img/beauty/music.svg
  6. 27
      www/js/beauty.js
  7. 4
      www/js/jquery-3.1.1.min.js

49
themes/beauty/views/layout/main.php

@ -2,31 +2,34 @@
//常用方法 //常用方法
require_once __DIR__ . '/../../../../plugins/Html.php'; require_once __DIR__ . '/../../../../plugins/Html.php';
?><!DocType html> ?>
<!DocType html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title><?php echo $pageTitle;?></title> <title><?php echo $pageTitle; ?></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<link rel="icon" type="image/x-icon" href="/favicon.ico?v1.0"> <link rel="icon" type="image/x-icon" href="/favicon.ico?v1.0">
<link href="/css/main.css?v.1.1" rel="stylesheet"> <link href="/css/main.css?v.1.1" rel="stylesheet">
<!--for theme beauty--> <!--for theme beauty-->
<link href="/css/github-markdown-light.css" rel="stylesheet" id="markdowncss"> <link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/bootstrap.min.css" rel="stylesheet"> <link href="/css/fubox.min.css" rel="stylesheet">
<link href="/css/fubox.min.css" rel="stylesheet"> <link href="/css/beauty.css?v<?= Html::getStaticFileVersion('beauty.css', 'css') ?>" rel="stylesheet">
<link href="/css/beauty.css?v<?=Html::getStaticFileVersion('beauty.css', 'css')?>" rel="stylesheet"> <link href="/css/github-markdown-light.css" rel="stylesheet" id="markdowncss">
</head> </head>
<body> <body>
<div id="image_site" class="main_style"> <div id="image_site" class="main_style">
<?php <?php
//### Render view file //### Render view file
if (!empty($viewFile) && file_exists($viewFile)) { if (!empty($viewFile) && file_exists($viewFile)) {
include_once $viewFile; include_once $viewFile;
} }
?> ?>
<!-- 尾部网站信息 --> <!-- 尾部网站信息 -->
<footer class="web_info vercenter"> <footer class="web_info vercenter">
@ -67,18 +70,26 @@ eof;
<li class="scroll_top scroll_topJS"> <li class="scroll_top scroll_topJS">
<img class="icon svg" src="/img/beauty/huojian.svg" alt="回到顶部" title="点击回到顶部" /> <img class="icon svg" src="/img/beauty/huojian.svg" alt="回到顶部" title="点击回到顶部" />
</li> </li>
<li class="music_switch musicJS">
<img class="icon svg verMiddle" src="/img/beauty/music.svg" alt="音乐" title="开启关闭音乐" />
</li>
<li class="connectmeJS"> <li class="connectmeJS">
<img class="icon svg verMiddle" src="/img/beauty/scrolltop.svg" alt="联系我们" title="联系我们" /> <img class="icon3 svg verMiddle" src="/img/beauty/contactUs.svg" alt="联系我们" title="联系我们" />
</li> </li>
</ul> </ul>
</div> </div>
<!-- 音乐 -->
<audio class="music_main musicMJS" id="music_main" src="/girls/Unchained_Melody.mp3?ver=1667213175" preload autoplay controls loop>
你的浏览器不支持<code>audio</code>标签
</audio>
</div> </div>
<!--for theme googleimage--> <!--for theme googleimage-->
<script src="/js/jquery-3.6.0.min.js"></script> <script src="/js/jquery-3.1.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script> <script src="/js/bootstrap.min.js"></script>
<script src="/js/lazyload.js"></script> <script src="/js/lazyload.js"></script>
<script src="/js/fubox.min.js"></script> <script src="/js/fubox.min.js"></script>
<script src="/js/beauty.js?v<?=Html::getStaticFileVersion('beauty.js', 'js')?>"></script> <script src="/js/beauty.js?v<?= Html::getStaticFileVersion('beauty.js', 'js') ?>"></script>
</body> </body>
</html> </html>

82
themes/beauty/views/site/index.php

@ -5,8 +5,8 @@
<div class="navbar-header"> <div class="navbar-header">
<div class="navbar-toggle"> <div class="navbar-toggle">
<img class="svg icon1 svgimg lampJS verMiddle" src="/img/beauty/buld.svg" alt="点击关灯/开灯" title="点击关灯/开灯"> <img class="svg icon1 svgimg lampJS verMiddle" src="/img/beauty/buld.svg" alt="点击关灯/开灯" title="点击关灯/开灯">
<button type="button" class="collapsed mr_button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" <img class="icon1 svg connectmeJS svgimg iconr2 verMiddle" src="/img/beauty/contactUs.svg" alt="联系我们" title="联系我们" />
aria-expanded="false"> <button type="button" class="collapsed mr_button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
<img class="svg icon1 svgimg verMiddle" src="/img/beauty/navshow.svg" alt="展开列表" title="展开列表"> <img class="svg icon1 svgimg verMiddle" src="/img/beauty/navshow.svg" alt="展开列表" title="展开列表">
</button> </button>
@ -20,18 +20,18 @@
<!-- Collect the nav links, forms, and other content for toggling --> <!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<?php <?php
$selectedId = $viewData['cateId']; $selectedId = $viewData['cateId'];
$breadcrumbs = !empty($viewData['breadcrumbs']) ? $viewData['breadcrumbs'] : []; $breadcrumbs = !empty($viewData['breadcrumbs']) ? $viewData['breadcrumbs'] : [];
if (!empty($viewData['menus'])) { //只显示第一级目录 if (!empty($viewData['menus'])) { //只显示第一级目录
foreach($viewData['menus'] as $index => $item) { foreach ($viewData['menus'] as $index => $item) {
$selected = $item['id'] == $selectedId || (!empty($breadcrumbs) && $item['id'] == $breadcrumbs[0]['id']) ? 'active' : ''; $selected = $item['id'] == $selectedId || (!empty($breadcrumbs) && $item['id'] == $breadcrumbs[0]['id']) ? 'active' : '';
echo <<<eof echo <<<eof
<li class="{$selected}"><a href="/?id={$item['id']}">{$item['directory']}</a></li> <li class="{$selected}"><a href="/?id={$item['id']}">{$item['directory']}</a></li>
eof; eof;
} }
} }
?> ?>
</ul> </ul>
<?php /* <?php /*
<form class="navbar-form navbar-left"> <form class="navbar-form navbar-left">
@ -43,7 +43,7 @@ eof;
*/ ?> */ ?>
<div class="nb_right nav navbar-nav navbar-right"> <div class="nb_right nav navbar-nav navbar-right">
<img class="svg icon1 svgimg lampJS verMiddle" src="/img/beauty/buld.svg" alt="点击关灯/开灯" title="点击关灯/开灯"> <img class="svg icon1 svgimg lampJS verMiddle" src="/img/beauty/buld.svg" alt="点击关灯/开灯" title="点击关灯/开灯">
<img class="icon1 svg connectmeJS svgimg svgimg2 iconr2 verMiddle" src="/img/beauty/scrolltop.svg" alt="联系我们" title="联系我们"> <img class="icon1 svg connectmeJS svgimg iconr2 verMiddle" src="/img/beauty/contactUs.svg" alt="联系我们" title="联系我们" />
</div> </div>
</div><!-- /.navbar-collapse --> </div><!-- /.navbar-collapse -->
@ -57,12 +57,12 @@ if (!empty($breadcrumbs)) {
<small>当前位置:</small> <small>当前位置:</small>
eof; eof;
foreach($breadcrumbs as $bread) { foreach ($breadcrumbs as $bread) {
if ($bread['id'] != $selectedId) { if ($bread['id'] != $selectedId) {
echo <<<eof echo <<<eof
<a href="{$bread['url']}">{$bread['name']}</a> / <a href="{$bread['url']}">{$bread['name']}</a> /
eof; eof;
}else { } else {
echo <<<eof echo <<<eof
<strong>{$bread['name']}</strong> <strong>{$bread['name']}</strong>
eof; eof;
@ -82,23 +82,23 @@ eof;
$imgExts = !empty(FSC::$app['config']['supportedImageExts']) ? FSC::$app['config']['supportedImageExts'] : array('jpg', 'jpeg', 'png', 'webp', 'gif'); $imgExts = !empty(FSC::$app['config']['supportedImageExts']) ? FSC::$app['config']['supportedImageExts'] : array('jpg', 'jpeg', 'png', 'webp', 'gif');
$category = !empty($viewData['scanResults'][$selectedId]) ? $viewData['scanResults'][$selectedId] : []; $category = !empty($viewData['scanResults'][$selectedId]) ? $viewData['scanResults'][$selectedId] : [];
//当前目录的描述介绍 // //当前目录的描述介绍
if (!empty($category['description'])) { // if (!empty($category['description'])) {
echo <<<eof // echo <<<eof
<p class="modal-body">{$category['description']}</p> // <p class="modal-body">{$category['description']}</p>
eof; // eof;
} // }
//当前目录的readme详细介绍 // //当前目录的readme详细介绍
if (!empty($viewData['htmlCateReadme'])) { // if (!empty($viewData['htmlCateReadme'])) {
echo <<<eof // echo <<<eof
<div class="modal-body markdown-body">{$viewData['htmlCateReadme']}</div> // <div class="modal-body markdown-body">{$viewData['htmlCateReadme']}</div>
eof; // eof;
} // }
if (!empty($category['directories'])) { //两级目录支持 if (!empty($category['directories'])) { //两级目录支持
$index = 0; $index = 0;
foreach($category['directories'] as $dir) { foreach ($category['directories'] as $dir) {
echo <<<eof echo <<<eof
<div class="im_item bor_radius col-xs-6 col-sm-4 col-md-3 col-lg-2"> <div class="im_item bor_radius col-xs-6 col-sm-4 col-md-3 col-lg-2">
<a href="{$dir['path']}" class="bor_radius"> <a href="{$dir['path']}" class="bor_radius">
@ -107,17 +107,17 @@ eof;
if (!empty($dir['snapshot'])) { if (!empty($dir['snapshot'])) {
if ($index > 0) { if ($index > 0) {
echo <<<eof echo <<<eof
<img data-original="{$dir['snapshot']}" class="bor_radius im_img lazy" alt="{$dir['directory']}"> <img src="/img/beauty/lazy.svg" data-original="{$dir['snapshot']}" class="bor_radius im_img lazy" alt="{$dir['directory']}">
eof; eof;
}else { } else {
echo <<<eof echo <<<eof
<img src="{$dir['snapshot']}" class="bor_radius im_img" alt="{$dir['directory']}"> <img src="{$dir['snapshot']}" class="bor_radius im_img" alt="{$dir['directory']}">
eof; eof;
} }
}else if (!empty($dir['files'])) { } else if (!empty($dir['files'])) {
$first_img = array_shift($dir['files']); $first_img = array_shift($dir['files']);
if (!in_array($first_img['extension'], $imgExts)) { if (!in_array($first_img['extension'], $imgExts)) {
foreach($dir['files'] as $file) { foreach ($dir['files'] as $file) {
if (in_array($file['extension'], $imgExts)) { if (in_array($file['extension'], $imgExts)) {
$first_img = $file; $first_img = $file;
break; break;
@ -128,14 +128,14 @@ eof;
if (in_array($first_img['extension'], $imgExts)) { if (in_array($first_img['extension'], $imgExts)) {
if ($index > 0) { if ($index > 0) {
echo <<<eof echo <<<eof
<img data-original="{$first_img['path']}" class="bor_radius im_img lazy" alt="{$first_img['filename']}"> <img src="/img/beauty/lazy.svg" data-original="{$first_img['path']}" class="bor_radius im_img lazy" alt="{$first_img['filename']}">
eof; eof;
}else { } else {
echo <<<eof echo <<<eof
<img src="{$first_img['path']}" class="bor_radius im_img" alt="{$first_img['filename']}"> <img src="/img/beauty/lazy.svg" data-original="{$first_img['path']}" class="bor_radius im_img lazy" alt="{$first_img['filename']}">
eof; eof;
} }
}else { } else {
echo <<<eof echo <<<eof
<img src="/img/default.png" class="bor_radius im_img" alt="default image"> <img src="/img/default.png" class="bor_radius im_img" alt="default image">
eof; eof;
@ -150,14 +150,16 @@ eof;
</a> </a>
</div> </div>
eof; eof;
$index ++; $index++;
} }
} }
if (!empty($category['files'])) { //一级目录支持 if (!empty($category['files'])) { //一级目录支持
$index = 0; $index = 0;
foreach($category['files'] as $file) { foreach ($category['files'] as $file) {
if (!in_array($file['extension'], $imgExts)) {continue;} if (!in_array($file['extension'], $imgExts)) {
continue;
}
$title = !empty($file['title']) ? $file['title'] : $file['filename']; $title = !empty($file['title']) ? $file['title'] : $file['filename'];
@ -165,21 +167,21 @@ eof;
echo <<<eof echo <<<eof
<div class="im_item bor_radius col-xs-6 col-sm-4 col-md-3 col-lg-2"> <div class="im_item bor_radius col-xs-6 col-sm-4 col-md-3 col-lg-2">
<a href="javascript:;" class="bor_radius" data-fancybox="gallery" data-src="{$file['path']}" data-caption="图片{$title}"> <a href="javascript:;" class="bor_radius" data-fancybox="gallery" data-src="{$file['path']}" data-caption="图片{$title}">
<img src="img/beauty/lazy.svg" data-original="{$file['path']}" class="bor_radius im_img lazy" alt="{$file['filename']}"> <img src="/img/beauty/lazy.svg" data-original="{$file['path']}" class="bor_radius im_img lazy" alt="{$file['filename']}">
</a> </a>
</div> </div>
eof; eof;
}else { } else {
echo <<<eof echo <<<eof
<div class="im_item bor_radius col-xs-6 col-sm-4 col-md-3 col-lg-2"> <div class="im_item bor_radius col-xs-6 col-sm-4 col-md-3 col-lg-2">
<a href="javascript:;" class="bor_radius" data-fancybox="gallery" data-src="{$file['path']}" data-caption="图片{$title}"> <a href="javascript:;" class="bor_radius" data-fancybox="gallery" data-src="{$file['path']}" data-caption="图片{$title}">
<img src="{$file['path']}" class="bor_radius im_img" alt="{$file['filename']}"> <img src="/img/beauty/lazy.svg" class="bor_radius im_img lazy" alt="{$file['filename']}">
</a> </a>
</div> </div>
eof; eof;
} }
$index ++; $index++;
} }
} }
?> ?>

18
www/css/beauty.css

@ -67,11 +67,15 @@ a:link{text-decoration:none;}
.web_info a{text-decoration: underline;color:#808080;} .web_info a{text-decoration: underline;color:#808080;}
.web_info a:hover{color:#000;} .web_info a:hover{color:#000;}
.btrt_side{position:fixed;bottom:46px;right:16px;transition:all 0.5s ease;} .btrt_side{position:fixed;bottom:48px;right:16px;transition:all 0.5s ease;}
.btrt_side_ul li{margin-top:4px;color:#878686;cursor:pointer;width:38px;height: 38px;line-height:38px;border-radius:50%;text-align:center;background-color:#f5f5f5;} .btrt_side_ul li{margin-top:4px;color:#878686;cursor:pointer;width:38px;height: 38px;line-height:38px;border-radius:50%;text-align:center;background-color:#f5f5f5;}
.btrt_side_ul li:hover{background:rgba(209, 209, 209, 1);color:#3e3d3d;} .btrt_side_ul li:hover{background:rgba(209, 209, 209, 1);color:#3e3d3d;}
.scroll_top{display:none;} .scroll_top{display:none;}
.btrt_side_ul li .svg{width:18px;cursor:pointer;} .btrt_side_ul .svg{width:18px;cursor:pointer;}
.btrt_side_ul .icon3{width:26px;}
/* 音乐相关 */
.music_put{animation:musicTurn 3s linear infinite;}
.blank_cover{transition: all 0.5s ease;position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0, 0, 0, .7);opacity:0;z-index: 1099} .blank_cover{transition: all 0.5s ease;position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0, 0, 0, .7);opacity:0;z-index: 1099}
.right_sidebox{padding:15px 10px 15px 18px;opacity:0;transform:translateX(101%);background-color:#FFF;position:fixed;right:0;top:0;bottom:0;color:#333;width:396px;overflow-y:auto;max-width:100%;z-index:1100;} .right_sidebox{padding:15px 10px 15px 18px;opacity:0;transform:translateX(101%);background-color:#FFF;position:fixed;right:0;top:0;bottom:0;color:#333;width:396px;overflow-y:auto;max-width:100%;z-index:1100;}
@ -85,13 +89,13 @@ a:link{text-decoration:none;}
.page_meta{padding:10px 0 0 0;} .page_meta{padding:10px 0 0 0;}
.page_meta .breadcrumb{background:none;display: inline-block;padding:8px 0 8px 0;margin:0;} .page_meta .breadcrumb{background:none;display: inline-block;padding:8px 0 8px 0;margin:0;}
.breadcrumbs{padding-left:1.5em;padding-bottom:10px}
/* 主题切换 */ /* 主题切换 */
.lampshow .web_info{border-color:#363636;} .lampshow .web_info{border-color:#363636;}
.lampshow .btrt_side_ul li{background-color:#181818;} .lampshow .btrt_side_ul li{background-color:#181818;}
.lampshow .right_sidebox{background-color:#222;color:#FFF;} .lampshow .right_sidebox{background-color:#222;color:#FFF;}
.lampshow .right_sidebox>h5{border-color: #363636;} .lampshow .right_sidebox>h5{border-color: #363636;}
.lampshow .text_dark{color:#808080;}
@media screen and (max-width: 1199px) { @media screen and (max-width: 1199px) {
.im_item { .im_item {
@ -111,7 +115,15 @@ a:link{text-decoration:none;}
} }
} }
@keyframes musicTurn {
0% {
-webkit-transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(360deg)
}
}
@keyframes bounceInRight { @keyframes bounceInRight {
0%, 0%,
60%, 60%,

2
www/img/beauty/contactUs.svg

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg class="icon verMiddle" style="color:#6c6c6c;width:2em;height:2em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3661"><path d="M364.5 488.8m-33.8 0a33.8 33.8 0 1 0 67.6 0 33.8 33.8 0 1 0-67.6 0Z" fill="#27A27D" p-id="3662"></path><path d="M512 488.8m-33.8 0a33.8 33.8 0 1 0 67.6 0 33.8 33.8 0 1 0-67.6 0Z" fill="#27A27D" p-id="3663"></path><path d="M659.5 488.8m-33.8 0a33.8 33.8 0 1 0 67.6 0 33.8 33.8 0 1 0-67.6 0Z" fill="#27A27D" p-id="3664"></path><path d="M897.8 488.8C897.8 276.1 724.7 103 512 103S126.2 276.1 126.2 488.8c0 83.4 26.2 162.7 75.7 229.5 7.4 10 21.5 12.1 31.5 4.7s12.1-21.5 4.7-31.5c-43.7-59-66.8-129.1-66.8-202.7C171.2 300.9 324.1 148 512 148s340.8 152.9 340.8 340.8c0 182-143.5 330.7-323.2 339.9-9.9-25-34.2-42.7-62.6-42.7-37.2 0-67.5 30.3-67.5 67.5S429.8 921 467 921c30.2 0 55.5-20 64.1-47.4 203.8-10 366.7-178.5 366.7-384.8zM467 876c-12.4 0-22.5-10.1-22.5-22.5S454.6 831 467 831s22.5 10.1 22.5 22.5S479.4 876 467 876z" p-id="3665"></path></svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

2
www/img/beauty/music.svg

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg class="icon1" style="color:#6c6c6c;width: 2em;height: 2em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2212"><path d="M875.52 433.152q-7.168-1.024-12.8-10.24t-8.704-33.792q-5.12-39.936-26.112-58.88t-65.024-27.136q-46.08-9.216-81.408-37.376t-58.88-52.736q-22.528-21.504-34.816-15.36t-12.288 22.528l0 44.032 0 96.256q0 57.344-0.512 123.904t-0.512 125.952l0 104.448 0 58.368q1.024 24.576-7.68 54.784t-32.768 56.832-64 45.568-99.328 22.016q-60.416 3.072-109.056-21.504t-75.264-61.952-26.112-81.92 38.4-83.456 81.92-54.272 84.992-16.896 73.216 5.632 47.616 13.312l0-289.792q0-120.832 1.024-272.384 0-29.696 15.36-48.64t40.96-22.016q21.504-3.072 35.328 8.704t28.16 32.768 35.328 47.616 56.832 52.224q30.72 23.552 53.76 33.792t43.008 18.944 39.424 20.992 43.008 39.936q23.552 26.624 28.672 55.296t0.512 52.224-14.848 38.4-17.408 13.824z" p-id="2213"></path></svg>

After

Width:  |  Height:  |  Size: 995 B

27
www/js/beauty.js

@ -63,12 +63,10 @@ if ($('#image_site').get(0)) {
var lanpnum = 0; var lanpnum = 0;
$('#image_site .lampJS').click(function () { $('#image_site .lampJS').click(function () {
if (lanpnum == 0) { if (lanpnum == 0) {
$('#markdowncss').attr('href', '/css/github-markdown-dark.css');
$(document.body).addClass('lampshow'); $(document.body).addClass('lampshow');
$('#image_site .navbarJS').removeClass('navbar-default').addClass('navbar-inverse'); // 导航栏用bootstrap主题切换 $('#image_site .navbarJS').removeClass('navbar-default').addClass('navbar-inverse'); // 导航栏用bootstrap主题切换
lanpnum = 1; lanpnum = 1;
} else if (lanpnum == 1){ } else if (lanpnum == 1) {
$('#markdowncss').attr('href', '/css/github-markdown-light.css');
$(document.body).removeClass('lampshow'); $(document.body).removeClass('lampshow');
$('#image_site .navbarJS').addClass('navbar-default').removeClass('navbar-inverse'); $('#image_site .navbarJS').addClass('navbar-default').removeClass('navbar-inverse');
lanpnum = 0; lanpnum = 0;
@ -76,4 +74,27 @@ if ($('#image_site').get(0)) {
return; return;
}); });
// 音乐播放
var musicState = 0;
$('#music_main').get(0).volume = 0.5; // 控制音量
$('.musicJS').click(function () {
if (musicState == 0) {
$('#music_main').get(0).play();
$('.musicJS').addClass('music_put');
musicState = 1;
} else {
$('#music_main').get(0).pause();
$('.musicJS').removeClass('music_put');
musicState = 0;
}
return;
})
$(document).one('touchstart mousedown', function () {
$('#music_main').get(0).play();
$('.musicJS').addClass('music_put');
musicState = 1;
});
} }

4
www/js/jquery-3.1.1.min.js vendored

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save