Browse Source

优化,修改,增加音乐

master
wen 2 years ago
parent
commit
dd16343204
  1. 61
      themes/beauty/views/layout/main.php
  2. 90
      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

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

@ -2,31 +2,34 @@ @@ -2,31 +2,34 @@
//常用方法
require_once __DIR__ . '/../../../../plugins/Html.php';
?><!DocType html>
?>
<!DocType html>
<html>
<head>
<meta charset="utf-8">
<title><?php echo $pageTitle;?></title>
<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">
<link rel="icon" type="image/x-icon" href="/favicon.ico?v1.0">
<link href="/css/main.css?v.1.1" rel="stylesheet">
<!--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/fubox.min.css" rel="stylesheet">
<link href="/css/beauty.css?v<?=Html::getStaticFileVersion('beauty.css', 'css')?>" rel="stylesheet">
<meta charset="utf-8">
<title><?php echo $pageTitle; ?></title>
<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">
<link rel="icon" type="image/x-icon" href="/favicon.ico?v1.0">
<link href="/css/main.css?v.1.1" rel="stylesheet">
<!--for theme beauty-->
<link href="/css/bootstrap.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/github-markdown-light.css" rel="stylesheet" id="markdowncss">
</head>
<body>
<div id="image_site" class="main_style">
<div id="image_site" class="main_style">
<?php
//### Render view file
if (!empty($viewFile) && file_exists($viewFile)) {
include_once $viewFile;
}
?>
//### Render view file
if (!empty($viewFile) && file_exists($viewFile)) {
include_once $viewFile;
}
?>
<!-- 尾部网站信息 -->
<footer class="web_info vercenter">
@ -34,10 +37,10 @@ if (!empty($viewFile) && file_exists($viewFile)) { @@ -34,10 +37,10 @@ if (!empty($viewFile) && file_exists($viewFile)) {
Copyright <span>&copy;2022</span>
by <a href="https://filesite.io/" target="_blank">FileSite.io</a>
<br>
<?php if (!empty(FSC::$app['config']['theme'])) { ?>
当前皮肤 <strong><?php echo FSC::$app['config']['theme']; ?></strong>
- 执行耗时: {page_time_cost} ms
<?php } ?>
<?php if (!empty(FSC::$app['config']['theme'])) { ?>
当前皮肤 <strong><?php echo FSC::$app['config']['theme']; ?></strong>
- 执行耗时: {page_time_cost} ms
<?php } ?>
</p>
<?php if (!empty(FSC::$app['config']['googleimage']['contact'])) {
$contactInfo = FSC::$app['config']['googleimage']['contact'];
@ -67,18 +70,26 @@ eof; @@ -67,18 +70,26 @@ eof;
<li class="scroll_top scroll_topJS">
<img class="icon svg" src="/img/beauty/huojian.svg" alt="回到顶部" title="点击回到顶部" />
</li>
<li class="music_switch musicJS">
<img class="icon svg verMiddle" src="/img/beauty/music.svg" alt="音乐" title="开启关闭音乐" />
</li>
<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>
</ul>
</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>
<!--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/lazyload.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>
</html>

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

@ -5,8 +5,8 @@ @@ -5,8 +5,8 @@
<div class="navbar-header">
<div class="navbar-toggle">
<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"
aria-expanded="false">
<img class="icon1 svg connectmeJS svgimg iconr2 verMiddle" src="/img/beauty/contactUs.svg" alt="联系我们" title="联系我们" />
<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>
<img class="svg icon1 svgimg verMiddle" src="/img/beauty/navshow.svg" alt="展开列表" title="展开列表">
</button>
@ -20,18 +20,18 @@ @@ -20,18 +20,18 @@
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<?php
$selectedId = $viewData['cateId'];
$breadcrumbs = !empty($viewData['breadcrumbs']) ? $viewData['breadcrumbs'] : [];
if (!empty($viewData['menus'])) { //只显示第一级目录
foreach($viewData['menus'] as $index => $item) {
$selected = $item['id'] == $selectedId || (!empty($breadcrumbs) && $item['id'] == $breadcrumbs[0]['id']) ? 'active' : '';
echo <<<eof
<?php
$selectedId = $viewData['cateId'];
$breadcrumbs = !empty($viewData['breadcrumbs']) ? $viewData['breadcrumbs'] : [];
if (!empty($viewData['menus'])) { //只显示第一级目录
foreach ($viewData['menus'] as $index => $item) {
$selected = $item['id'] == $selectedId || (!empty($breadcrumbs) && $item['id'] == $breadcrumbs[0]['id']) ? 'active' : '';
echo <<<eof
<li class="{$selected}"><a href="/?id={$item['id']}">{$item['directory']}</a></li>
eof;
}
}
?>
}
}
?>
</ul>
<?php /*
<form class="navbar-form navbar-left">
@ -43,7 +43,7 @@ eof; @@ -43,7 +43,7 @@ eof;
*/ ?>
<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="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><!-- /.navbar-collapse -->
@ -57,12 +57,12 @@ if (!empty($breadcrumbs)) { @@ -57,12 +57,12 @@ if (!empty($breadcrumbs)) {
<small>当前位置:</small>
eof;
foreach($breadcrumbs as $bread) {
foreach ($breadcrumbs as $bread) {
if ($bread['id'] != $selectedId) {
echo <<<eof
<a href="{$bread['url']}">{$bread['name']}</a> /
eof;
}else {
} else {
echo <<<eof
<strong>{$bread['name']}</strong>
eof;
@ -82,23 +82,23 @@ eof; @@ -82,23 +82,23 @@ eof;
$imgExts = !empty(FSC::$app['config']['supportedImageExts']) ? FSC::$app['config']['supportedImageExts'] : array('jpg', 'jpeg', 'png', 'webp', 'gif');
$category = !empty($viewData['scanResults'][$selectedId]) ? $viewData['scanResults'][$selectedId] : [];
//当前目录的描述介绍
if (!empty($category['description'])) {
echo <<<eof
<p class="modal-body">{$category['description']}</p>
eof;
}
// //当前目录的描述介绍
// if (!empty($category['description'])) {
// echo <<<eof
// <p class="modal-body">{$category['description']}</p>
// eof;
// }
//当前目录的readme详细介绍
if (!empty($viewData['htmlCateReadme'])) {
echo <<<eof
<div class="modal-body markdown-body">{$viewData['htmlCateReadme']}</div>
eof;
}
// //当前目录的readme详细介绍
// if (!empty($viewData['htmlCateReadme'])) {
// echo <<<eof
// <div class="modal-body markdown-body">{$viewData['htmlCateReadme']}</div>
// eof;
// }
if (!empty($category['directories'])) { //两级目录支持
$index = 0;
foreach($category['directories'] as $dir) {
foreach ($category['directories'] as $dir) {
echo <<<eof
<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">
@ -107,17 +107,17 @@ eof; @@ -107,17 +107,17 @@ eof;
if (!empty($dir['snapshot'])) {
if ($index > 0) {
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;
}else {
} else {
echo <<<eof
<img src="{$dir['snapshot']}" class="bor_radius im_img" alt="{$dir['directory']}">
eof;
}
}else if (!empty($dir['files'])) {
} else if (!empty($dir['files'])) {
$first_img = array_shift($dir['files']);
if (!in_array($first_img['extension'], $imgExts)) {
foreach($dir['files'] as $file) {
foreach ($dir['files'] as $file) {
if (in_array($file['extension'], $imgExts)) {
$first_img = $file;
break;
@ -128,14 +128,14 @@ eof; @@ -128,14 +128,14 @@ eof;
if (in_array($first_img['extension'], $imgExts)) {
if ($index > 0) {
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;
}else {
} else {
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;
}
}else {
} else {
echo <<<eof
<img src="/img/default.png" class="bor_radius im_img" alt="default image">
eof;
@ -150,14 +150,16 @@ eof; @@ -150,14 +150,16 @@ eof;
</a>
</div>
eof;
$index ++;
$index++;
}
}
if (!empty($category['files'])) { //一级目录支持
$index = 0;
foreach($category['files'] as $file) {
if (!in_array($file['extension'], $imgExts)) {continue;}
foreach ($category['files'] as $file) {
if (!in_array($file['extension'], $imgExts)) {
continue;
}
$title = !empty($file['title']) ? $file['title'] : $file['filename'];
@ -165,24 +167,24 @@ eof; @@ -165,24 +167,24 @@ eof;
echo <<<eof
<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}">
<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>
</div>
eof;
}else {
} else {
echo <<<eof
<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}">
<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>
</div>
eof;
}
$index ++;
$index++;
}
}
?>
?>
</div>
</div>

18
www/css/beauty.css

@ -67,11 +67,15 @@ a:link{text-decoration:none;} @@ -67,11 +67,15 @@ a:link{text-decoration:none;}
.web_info a{text-decoration: underline;color:#808080;}
.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:hover{background:rgba(209, 209, 209, 1);color:#3e3d3d;}
.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}
.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;} @@ -85,13 +89,13 @@ a:link{text-decoration:none;}
.page_meta{padding:10px 0 0 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 .btrt_side_ul li{background-color:#181818;}
.lampshow .right_sidebox{background-color:#222;color:#FFF;}
.lampshow .right_sidebox>h5{border-color: #363636;}
.lampshow .text_dark{color:#808080;}
@media screen and (max-width: 1199px) {
.im_item {
@ -111,7 +115,15 @@ a:link{text-decoration:none;} @@ -111,7 +115,15 @@ a:link{text-decoration:none;}
}
}
@keyframes musicTurn {
0% {
-webkit-transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(360deg)
}
}
@keyframes bounceInRight {
0%,
60%,

2
www/img/beauty/contactUs.svg

@ -0,0 +1,2 @@ @@ -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 @@ @@ -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)) { @@ -63,12 +63,10 @@ if ($('#image_site').get(0)) {
var lanpnum = 0;
$('#image_site .lampJS').click(function () {
if (lanpnum == 0) {
$('#markdowncss').attr('href', '/css/github-markdown-dark.css');
$(document.body).addClass('lampshow');
$('#image_site .navbarJS').removeClass('navbar-default').addClass('navbar-inverse'); // 导航栏用bootstrap主题切换
lanpnum = 1;
} else if (lanpnum == 1){
$('#markdowncss').attr('href', '/css/github-markdown-light.css');
} else if (lanpnum == 1) {
$(document.body).removeClass('lampshow');
$('#image_site .navbarJS').addClass('navbar-default').removeClass('navbar-inverse');
lanpnum = 0;
@ -76,4 +74,27 @@ if ($('#image_site').get(0)) { @@ -76,4 +74,27 @@ if ($('#image_site').get(0)) {
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