2021年6月,浩瀚银河强势部署了’files.photo.gallary’和自己编写的mirrors页面镜像站。

当然,写一份HTML+CSS+JS的前端,其实并不难,难就难在时间的耗时。

这一次拿出手的最终的mirrors页面镜像站,共计花费了2天时间,大约20小时的上机时间。

那么,这一个镜像站,在这两天发生了什么事情呢?那又是怎么编写的呢?

想提前看code的可以直接点我

镜像站文件部署

首先,是部署了files.photo.gallary的图形镜像站

这个镜像站最大的特色,就是可以直接访问媒体文件和图形化查看文件了。当然,还有下面的特点:

  • 单个文件,直接上传到云端直接用。
  • 实时搜索,排序。
  • 实时切换查看布局。
  • 可以使用CDN快速加载
  • 代码高亮。
  • 比FTP更快、更舒适
  • …..

当然,想看剩下的部署和参考内容,直接点击就可以了

然后就是mirrors页面镜像站了

我目前还没给它取一个好听的名字,但是这不重要,重要的是下面的文章~

立项了这个计划,其实很久了对我而言

当然,这个镜像站最终的定位就是:提供资源下载、配合图形镜像站。

(不过以后会很好的哦~)

第一天,开始撸前端了

首先是仿写许多镜像站的网站,那样的布局(当然好多站都不写css的)

然后有了大概的方向了:简约,但不枯燥;色彩和展示的点要突出。

所以就有了h2上的内容了。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="Haohanyh Mirrors,浩瀚银河镜像站,浩瀚银河,Haohanyh,浩瀚銀河">
<title>Index of Haohanyh PHP+Nginx+Windows Mirrors</title><br>
</head>
<body>
<!--大爱f39c12,大爱Orange色~-->
<body background="//oranme-cdn.haohanyh.com/mirrors.haohanyh/index-bk.jpg" style="transform: rotate(0deg);">
<h1 id="woainihaohanyh">Index of Haohanyh PHP+Nginx+Windows Mirrors<img src="//www.oranme.com/images/logo.png" alt="感谢居若科技!!!Thanks!!!" height="51" align="right" ismap style="
padding-right: 15px;"><a href="https://hexo.haohanyh.com/tags/OranMe/"><!--img src="https://img.shields.io/badge/Haohanyh-OranMe-gray.svg?colorA=FFCCCC&amp;colorB=F39C12&amp;style=for-the-badge" style="height: 20px;" align="bottom"--></h1></a><hr>
<table border="1">
<tr valign="middle">
<th>Nginx镜像源(宝塔主要版本)</th>
<th>PHP镜像源(宝塔主要版本)</th>
<th>Windows工具+精简镜像源(提供下载学习)</th>
<th>Android开发工具+推荐软件</th>
</tr>
<tr>
<td><img src="//img.shields.io/badge/coverage-100%25-brightgreen" alt="完成100%" align="left"></td>
<td><img src="//img.shields.io/badge/coverage-100%25-brightgreen" alt="完成100%" align="left"></td>
<td><img src="//img.shields.io/badge/coverage-50%25-yellow" alt="完成50%" align="left"></td>
<td><img src="//img.shields.io/badge/coverage-0%25-red" alt="完成0%" align="left"></td>
</tr>
</table>
<font face="verdana" color="pink" size="4">愿你建站半生,归来还是Linux+Nginx+MySQL+PHPの"LNMP".</font><br>
<font face="verdana" color="pink" size="4"><a href="https://dash.oran.me">愿你玩机半生,归来还是居若科技OranMe.</a></font><br>
<font face="verdana" color="pink" size="4">愿你系统半生,归来还是Windows10+WSL2.</font><br><hr>
<a href="https://oranme-cdn.haohanyh.com/">退回到CDN测速主页面/</a><br>
</body>
</html>

写了表格、img.shield.io小徽章、右侧突出一点点展示全图片,可以不被滚动条遮挡。

如图所示

然后接下来就是内容了。第一天其实就是很简单的div id里面嵌套下载链接。不!要做镜像站了,就做展示自己的不一样的点。

于是,一份滚动条的文件简单展示口,写了出来。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="Haohanyh Mirrors,浩瀚银河镜像站,浩瀚银河,Haohanyh,浩瀚銀河">
<title>Index of Haohanyh PHP+Nginx+Windows Mirrors</title><br>
<style type="text/css">
#woainihaohanyh {
color:#f39c12; /*OranMe代表色~~*/
font-weight: lighter;
text-align: inherit;
}
#woainginx {
color:#009900; text-align: left; /*Nginx代表色~~*/
height: 32px;
}
#woaiphp {
color:#4f5b93; text-align: left; /*PHP代表色~~*/
height: 32px;
}
#nginx {
text-align: left;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
/*#nginx-test {
ls;
}*/
#php {
text-align: left;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
#windows {
text-align: left;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
#android {
text-align: left;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
#nginx-new-18 {
color: rgb(3, 199, 124); text-align: left; /*Nginx 宝塔插件Nginx防火墙*/
}
#Stopped-PHP {
color: rgb(199, 3, 35); text-align: left; /*PHP5停止维护*/
}
</style><!--Nginx和PHP字体设置、简单的一些字体样式-->
<style type="text/css">
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto;
}
li {
float: left;
}
li a, .dropbtn {
font: caption;
padding-block: 10px 10px;
padding-inline: 10px 10px;
font-size: inherit;
display: inline-block;
color: white;
text-decoration: none;
text-anchor: end;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #f39c12;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
height:300px;
overflow: scroll;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style><!--进度条下拉+自动-->
</head>
<body>
<h2 id="woainginx">Nginx <img src="//oranme-cdn.haohanyh.com/mirrors.haohanyh/Nginx/nginx.png" alt="Nginx Logo" height="20" align="bottom" ismap></h2>
<ul style="width: 378px;background-color: #009900;">
<li><a href="//nginx.org/">Nginx官网</a></li>
<li><a href="//oranme-cdn.haohanyh.com/mirrors.haohanyh/Nginx">文件镜像站</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">快速下载</a>
<div class="dropdown-content" id="scrollbar">
<a href="/mirrors.haohanyh/Nginx/nginx-1.12.2.tar.gz" title="nginx-1.12.2.tar.gz">nginx-1.12.2.tar.gz</a>
<a href="/mirrors.haohanyh/Nginx/nginx-1.12.2.zip" title="nginx-1.12.2.zip">nginx-1.12.2.zip</a>
<a href="/mirrors.haohanyh/Nginx/nginx-1.14.2.tar.gz" title="nginx-1.14.2.tar.gz">nginx-1.14.2.tar.gz</a>
<a href="/mirrors.haohanyh/Nginx/nginx-1.14.2.zip" title="nginx-1.14.2.zip">nginx-1.14.2.zip</a>
<a href="/mirrors.haohanyh/Nginx/nginx-1.15.10.tar.gz" title="nginx-1.15.10.tar.gz">nginx-1.15.10.tar.gz</a>
<a href="/mirrors.haohanyh/Nginx/nginx-1.15.10.zip" title="nginx-1.15.10.zip">nginx-1.15.10.zip</a>
<a href="/mirrors.haohanyh/Nginx/nginx-1.16.0.tar.gz" title="nginx-1.16.0.tar.gz">nginx-1.16.0.tar.gz</a>
<a href="/mirrors.haohanyh/Nginx/nginx-1.16.0.zip" title="nginx-1.16.0.zip">nginx-1.16.0.zip</a>
<a href="/mirrors.haohanyh/Nginx/nginx-1.17.0.tar.gz" title="nginx-1.17.0.tar.gz">nginx-1.17.0.tar.gz</a>
<a href="/mirrors.haohanyh/Nginx/nginx-1.17.0.zip" title="nginx-1.17.0.zip">nginx-1.17.0.zip</a>
<a href="/mirrors.haohanyh/Nginx/nginx-1.18.0.tar.gz" title="nginx-1.18.0.tar.gz" id="nginx-new-18" >nginx-1.18.0.tar.gz</a>
<a href="/mirrors.haohanyh/Nginx/nginx-1.18.0.zip" title="nginx-1.18.0.zip" id="nginx-new-18">nginx-1.18.0.zip</a>
<a href="/mirrors.haohanyh/Nginx/nginx-1.19.0.tar.gz" title="nginx-1.19.0.tar.gz" id="nginx-new-18">nginx-1.19.0.tar.gz</a>
<a href="/mirrors.haohanyh/Nginx/nginx-1.19.0.zip" title="nginx-1.19.0.zip" id="nginx-new-18">nginx-1.19.0.zip</a>
</div>
</li>
</ul>
<h2 id="woaiphp">PHP <img src="//oranme-cdn.haohanyh.com/mirrors.haohanyh/PHP/php-logo.svg" alt="PHP Logo" height="20" align="bottom" ismap></h2>
<ul style="width: 378px;background-color: #4f5b93;">
<li><a href="//www.php.net/"> PHP官网 </a></li>
<li><a href="//oranme-cdn.haohanyh.com/mirrors.haohanyh/PHP">文件镜像站</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">快速下载</a>
<div class="dropdown-content" id="scrollbar">
<a href="/mirrors.haohanyh/PHP/php-5.2.17.tar.gz" title="php-5.2.17.tar.gz" id="Stopped-PHP">php-5.2.17.tar.gz</a><br>
<a href="/mirrors.haohanyh/PHP/php-5.2.17.tar.bz2" title="php-5.2.17.tar.bz2" id="Stopped-PHP">php-5.2.17.tar.bz2</a><br>
<a href="/mirrors.haohanyh/PHP/php-5.3.29.tar.xz" title="php-5.3.29.tar.xz" id="Stopped-PHP">php-5.3.29.tar.xz</a><br>
<a href="/mirrors.haohanyh/PHP/php-5.3.29.tar.gz" title="php-5.3.29.tar.gz" id="Stopped-PHP">php-5.3.29.tar.gz</a><br>
<a href="/mirrors.haohanyh/PHP/php-5.3.29.tar.bz2" title="php-5.3.29.tar.bz2" id="Stopped-PHP">php-5.3.29.tar.bz2</a><br>
<a href="/mirrors.haohanyh/PHP/php-5.4.45.tar.gz" title="php-5.4.45.tar.gz" id="Stopped-PHP">php-5.4.45.tar.gz</a><br>
<a href="/mirrors.haohanyh/PHP/php-5.4.45.tar.bz2" title="php-5.4.45.tar.bz2" id="Stopped-PHP">php-5.4.45.tar.bz2</a><br>
<a href="/mirrors.haohanyh/PHP/php-5.5.38.tar.xz" title="php-5.5.38.tar.xz" id="Stopped-PHP">php-5.5.38.tar.xz</a><br>
<a href="/mirrors.haohanyh/PHP/php-5.5.38.tar.gz" title="php-5.5.38.tar.gz" id="Stopped-PHP">php-5.5.38.tar.gz</a><br>
<a href="/mirrors.haohanyh/PHP/php-5.5.38.tar.bz2" title="php-5.5.38.tar.bz2" id="Stopped-PHP">php-5.5.38.tar.bz2</a><br>
<a href="/mirrors.haohanyh/PHP/php-5.6.40.tar.xz" title="php-5.6.40.tar.xz" id="Stopped-PHP">php-5.6.40.tar.xz</a><br>
<a href="/mirrors.haohanyh/PHP/php-5.6.40.tar.gz" title="php-5.6.40.tar.gz" id="Stopped-PHP">php-5.6.40.tar.gz</a><br>
<a href="/mirrors.haohanyh/PHP/php-5.6.40.tar.bz2" title="php-5.6.40.tar.bz2" id="Stopped-PHP">php-5.6.40.tar.bz2</a><br>
<a href="/mirrors.haohanyh/PHP/php-7.0.33.tar.xz" title="php-7.0.33.tar.xz">php-7.0.33.tar.xz</a><br>
<a href="/mirrors.haohanyh/PHP/php-7.0.33.tar.gz" title="php-7.0.33.tar.gz">php-7.0.33.tar.gz</a><br>
<a href="/mirrors.haohanyh/PHP/php-7.0.33.tar.bz2" title="php-7.0.33.tar.bz2">php-7.0.33.tar.bz2</a><br>
<a href="/mirrors.haohanyh/PHP/php-7.1.33.tar.xz" title="php-7.1.33.tar.xz">php-7.1.33.tar.xz</a><br>
<a href="/mirrors.haohanyh/PHP/php-7.1.33.tar.gz" title="php-7.1.33.tar.gz">php-7.1.33.tar.gz</a><br>
<a href="/mirrors.haohanyh/PHP/php-7.1.33.tar.bz2" title="php-7.1.33.tar.bz2">php-7.1.33.tar.bz2</a><br>
<a href="/mirrors.haohanyh/PHP/php-7.2.33.tar.xz" title="php-7.2.33.tar.xz">php-7.2.33.tar.xz</a><br>
<a href="/mirrors.haohanyh/PHP/php-7.2.33.tar.gz" title="php-7.2.33.tar.gz">php-7.2.33.tar.gz</a><br>
<a href="/mirrors.haohanyh/PHP/php-7.2.33.tar.bz2" title="php-7.2.33.tar.bz2">php-7.2.33.tar.bz2</a><br>
<a href="/mirrors.haohanyh/PHP/php-7.4.20.tar.xz" title="php-7.4.20.tar.xz">php-7.4.20.tar.xz</a><br>
<a href="/mirrors.haohanyh/PHP/php-7.4.20.tar.gz" title="php-7.4.20.tar.gz">php-7.4.20.tar.gz</a><br>
<a href="/mirrors.haohanyh/PHP/php-7.4.20.tar.bz2" title="php-7.4.20.tar.bz2">php-7.4.20.tar.bz2</a><br>
<a href="/mirrors.haohanyh/PHP/php-8.0.7.tar.xz" title="php-8.0.7.tar.xz">php-8.0.7.tar.xz</a><br>
<a href="/mirrors.haohanyh/PHP/php-8.0.7.tar.gz" title="php-8.0.7.tar.gz">php-8.0.7.tar.gz</a><br>
<a href="/mirrors.haohanyh/PHP/php-8.0.7.tar.bz2" title="php-8.0.7.tar.bz2">php-8.0.7.tar.bz2</a><br>
</div>
</li>
</ul>
</body>
</html>

大量运用text/css这样我就可以不用建立css文件了,又能展示完美的效果和维护修改的难度降低。

以上就是Nginx+PHP的镜像站展示写法了。当然,最终展示如下:

如图所示

然后就是第二天了,适配移动端访问。(其实不能叫适配还没写好嘿嘿嘿)

目前移动端适配还是有bug的,在QQ内置浏览器上访问不佳需要手动横屏

(等以后有空了,慢慢解决它)

那么怎么写适配移动端的code呢?简单:

    <style type="text/css">
@media screen and (orientation: portrait) {
body {
position: absolute;
width: 100vh;
height: 100vw;
top: 0;
left: 100vw;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
transform-origin: 0% 0%;
}
}
@media screen and (orientation: landscape) {
body {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
}
</style><!--移动端适配计划-->

你以为就这么一点吗?不够,请在body上面添加下面东西:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

那么,潦草的移动端适配,就先这么解决了。

以后还会让这个镜像站有更好的效果,敬请期待未来吧。

如图所示

2021 - Future Mirrors.haohanyh©

End.