我的第一个网站

虽然实际上WordPress才是我的第一个小站,但对其学习还不够深入,目前只满足于会用,因为据说它有很深的学问,接下来进入正题:OSU!

osu!是一款音乐节奏游戏,我沉迷此游戏~

这是一个我这个业余的学生借用了很多开源的项目制成的。【如有冒犯,请联系我及时删除】

不多说费话,上源码:

<!DOCTYPE html>
<!-- saved from url=(0021)http://www.pariya.cc/ -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--按钮风格-->

<link href="./OSU!_files/style.css" rel="stylesheet" type="text/css">

<style>

#dark{
background-color:#333;
border:1px solid #000;
padding:10px;
margin-top:20px;}

#light{
background-color:#FFF;
border:1px solid #dedede;
padding:10px;
margin-top:20px;}

li{
list-style:none;
padding-top:10px;
padding-bottom:10px;}

.button, .button:visited {
background: #222 url(overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer
}

.button:hover { background-color: #111; color: #fff; }
.button:active { top: 1px; }
.small.button, .small.button:visited { font-size: 11px}
.button, .button:visited,
.medium.button, .medium.button:visited { font-size: 13px;
font-weight: bold;
line-height: 1;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}

.large.button, .large.button:visited { font-size: 14px;
padding: 8px 14px 9px; }

.super.button, .super.button:visited { font-size: 34px;
padding: 8px 14px 9px; }

.pink.button, .magenta.button:visited { background-color: #e22092; }
.pink.button:hover { background-color: #c81e82; }
.green.button, .green.button:visited { background-color: #91bd09; }
.green.button:hover { background-color: #749a02; }
.red.button, .red.button:visited { background-color: #e62727; }
.red.button:hover { background-color: #cf2525; }
.orange.button, .orange.button:visited { background-color: #ff5c00; }
.orange.button:hover { background-color: #d45500; }
.blue.button, .blue.button:visited { background-color: #2981e4; }
.blue.button:hover { background-color: #2575cf; }
.yellow.button, .yellow.button:visited { background-color: #ffb515; }
.yellow.button:hover { background-color: #fc9200; }
</style>

<!--按钮功能:转换video_src-->
<script lanage="javascript">
var now_id="1";
function changesrc(element,video_name){
<!--功能:实现修改上一个按钮的风格(由super转换为large,即大变小来表明取消选择),替换player的src和重载player-->
document.getElementById(now_id).className=document.getElementById(now_id).className.replace(/super/,"large");
document.getElementById("videoName").src="/res/"+new String (video_name)+".mp4";

document.getElementById("playVideo").load();
}

<!--功能:对以下所有颜色:先调用上面的函数然后super当前按钮并更新now_id(上次被选择的按钮ID)-->
function changesrc_pink(element,video_name){
changesrc(element,video_name);
element.className="super button pink";
now_id=element.id;
}
function changesrc_green(element,video_name){
changesrc(element,video_name);
element.className="super button green";
now_id=element.id;

}
function changesrc_orange(element,video_name){
changesrc(element,video_name);
element.className="super button orange";
now_id=element.id;
}
function changesrc_blue(element,video_name){
changesrc(element,video_name);
element.className="super button blue";
now_id=element.id;
}
function changesrc_red(element,video_name){
changesrc(element,video_name);
element.className="super button red";
now_id=element.id;
}
function changesrc_yellow(element,video_name){
changesrc(element,video_name);
element.className="super button yellow";
now_id=element.id;
}
</script>

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<title>OSU!</title>
<link rel="stylesheet" type="text/css" href="./OSU!_files/reset.css">
<link rel="stylesheet" href="./OSU!_files/bootstrap.css">
<link rel="stylesheet" type="text/css" href="./OSU!_files/willesPlay.css">
<script src="./OSU!_files/jquery-1.11.3.min.js.下载" type="text/javascript" charset="utf-8"></script>
<script src="./OSU!_files/willesPlay.js.下载" type="text/javascript" charset="utf-8"></script>
</head>
<body>

<div class="container">
<div class="row">
<div class="col-md-12">
<div id="willesPlay">
<div class="playHeader">
<div class="videoName">OSU</div>
</div>
<div class="playContent">
<div class="turnoff" style="right: -39.7129px;">
</div>

<video width="100%" height="100%" id="playVideo">
<source src="/res/osu-2017-11-28-01.mp4" type="video/mp4" id="videoName">
当前浏览器不支持 video直接播放,点击这里下载视频: <a href="http://www.pariya.cc/">下载视频</a>
</video>

<div class="playTip glyphicon glyphicon-play"></div>
</div>
<div class="playControll">
<div class="playPause playIcon"></div>
<div class="timebar">
<span class="currentTime">0:00:00</span>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
</div>
<span class="duration">0:01:33</span>
</div>
<div class="otherControl">
<span class="volume glyphicon glyphicon-volume-down"></span>
<span class="fullScreen glyphicon glyphicon-fullscreen"></span>
<div class="volumeBar" style="display: none;">
<div class="volumewrap">
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 8px;height: 100%;"></div>
</div>
</div>
</div>
</div>
</div>
</div>

</div>
</div>
</div>

<div style="text-align:center">
<li>
<a id="0" class="large button yellow" href="http://www.pariya.cc/online" )="">ONLINE</a>
</li><li>
</li><li>
<a id="1" class="super button pink" onclick="changesrc_pink(this,&quot;osu-2017-11-28-01&quot;)">osu-01</a>
<a id="2" class="large button green" onclick="changesrc_green(this,&quot;osu-2017-11-28-02&quot;)">osu-02</a>
<a id="3" class="large button orange" onclick="changesrc_orange(this,&quot;osu-2017-11-28-03&quot;)">osu-03</a></li>
<li>
<a id="4" class="large button blue" onclick="changesrc_blue(this,&quot;osu-2017-11-29-01&quot;)">osu-04</a>
<a id="5" class="large button red" onclick="changesrc_red(this,&quot;osu-05&quot;)">osu-05</a>
<a id="6" class="large button yellow" onclick="changesrc_yellow(this,&quot;osu-06&quot;)">osu-06</a></li>
<li>
<a id="7" class="large button green" onclick="changesrc_green(this,&quot;osu-07&quot;)">osu-07</a>
<a id="8" class="large button pink" onclick="changesrc_pink(this,&quot;osu-08&quot;)">osu-08</a>
<a id="9" class="large button orange" "="" onclick="changesrc_orange(this,&quot;osu-09&quot;)">osu-09</a></li>
<li>
<a id="10" class="large button pink" onclick="changesrc_pink(this,&quot;osu-10&quot;)">osu-10</a>
<a id="11" class="large button green" onclick="changesrc_green(this,&quot;osu-11&quot;)">osu-11</a>
<a id="12" class="large button orange" onclick="changesrc_orange(this,&quot;osu-12&quot;)">osu-12</a></li>
<li>
<a id="13" class="large button blue" onclick="changesrc_blue(this,&quot;osu-13&quot;)">osu-13</a>
<a id="14" class="large button red" onclick="changesrc_red(this,&quot;osu-14&quot;)">osu-14</a>
<a id="15" class="large button yellow" onclick="changesrc_yellow(this,&quot;osu-15&quot;)">osu-15</a></li>
<li>
<a id="16" class="large button green" onclick="changesrc_green(this,&quot;osu-16&quot;)">osu-16</a>
<a id="17" class="large button pink" onclick="changesrc_pink(this,&quot;osu-17&quot;)">osu-17</a>
<a id="18" class="large button orange" "="" onclick="changesrc_orange(this,&quot;osu-18&quot;)">osu-18</a></li>
<li>
<a id="19" class="large button pink" onclick="changesrc_pink(this,&quot;osu-19&quot;)">osu-19</a>
<a id="20" class="large button green" onclick="changesrc_green(this,&quot;osu-20&quot;)">osu-20</a>
<a id="21" class="large button orange" onclick="changesrc_orange(this,&quot;osu-21&quot;)">osu-21</a></li>
<li>
<a id="22" class="large button blue" onclick="changesrc_blue(this,&quot;osu-22&quot;)">osu-22</a>
<a id="23" class="large button red" onclick="changesrc_red(this,&quot;osu-23&quot;)">osu-23</a>
<a id="24" class="large button yellow" onclick="changesrc_yellow(this,&quot;osu-24&quot;)">osu-24</a></li>
<li>
<a id="25" class="large button green" onclick="changesrc_green(this,&quot;osu-25&quot;)">osu-25</a>
<a id="26" class="large button pink" onclick="changesrc_pink(this,&quot;osu-26&quot;)">osu-26</a>
<a id="27" class="large button orange" "="" onclick="changesrc_orange(this,&quot;osu-27&quot;)">osu-27</a></li>
<li>
<a id="28" class="large button pink" onclick="changesrc_pink(this,&quot;osu-28&quot;)">osu-28</a>
<a id="29" class="large button green" onclick="changesrc_green(this,&quot;osu-29&quot;)">osu-29</a>
<a id="30" class="large button orange" onclick="changesrc_orange(this,&quot;osu-30&quot;)">osu-30</a></li>
<li>
<a id="31" class="large button blue" onclick="changesrc_blue(this,&quot;osu-31&quot;)">osu-31</a>
<a id="32" class="large button red" onclick="changesrc_red(this,&quot;osu-32&quot;)">osu-32</a>
<a id="33" class="large button yellow" onclick="changesrc_yellow(this,&quot;osu-33&quot;)">osu-33</a></li>
<li>
<a id="34" class="large button green" onclick="changesrc_green(this,&quot;osu-34&quot;)">osu-34</a>
<a id="35" class="large button pink" onclick="changesrc_pink(this,&quot;osu-35&quot;)">osu-35</a>
<a id="36" class="large button orange" "="" onclick="changesrc_orange(this,&quot;osu-36&quot;)">osu-36</a></li>
<li>
<a id="37" class="large button pink" onclick="changesrc_pink(this,&quot;osu-37&quot;)">osu-37</a>
<a id="38" class="large button green" onclick="changesrc_green(this,&quot;osu-38&quot;)">osu-38</a>
<a id="39" class="large button orange" onclick="changesrc_orange(this,&quot;osu-39&quot;)">osu-39</a></li>
<li>
<a id="40" class="large button blue" onclick="changesrc_blue(this,&quot;osu-40&quot;)">osu-40</a>
<a id="41" class="large button red" onclick="changesrc_red(this,&quot;osu-41&quot;)">osu-41</a>
<a id="42" class="large button yellow" onclick="changesrc_yellow(this,&quot;osu-42&quot;)">osu-42</a></li>
<li>
<a id="43" class="large button green" onclick="changesrc_green(this,&quot;osu-43&quot;)">osu-43</a>
<a id="44" class="large button pink" onclick="changesrc_pink(this,&quot;osu-44&quot;)">osu-44</a>
<a id="45" class="large button orange" "="" onclick="changesrc_orange(this,&quot;osu-45&quot;)">osu-45</a></li>
<li>
<a id="46" class="large button pink" onclick="changesrc_pink(this,&quot;osu-46&quot;)">osu-46</a>
<a id="47" class="large button green" onclick="changesrc_green(this,&quot;osu-47&quot;)">osu-47</a>
<a id="48" class="large button orange" onclick="changesrc_orange(this,&quot;osu-48&quot;)">osu-48</a></li>

<li>
<a id="49" class="large button blue" onclick="changesrc_blue(this,&quot;osu-49&quot;)">osu-49</a>
<a id="50" class="large button red" onclick="changesrc_red(this,&quot;osu-50&quot;)">osu-50</a>
<a id="51" class="large button yellow" onclick="changesrc_yellow(this,&quot;osu-51&quot;)">osu-51</a></li>

<li>
<a id="52" class="large button green" onclick="changesrc_green(this,&quot;osu-52&quot;)">osu-52</a>
<a id="53" class="large button pink" onclick="changesrc_pink(this,&quot;osu-53&quot;)">osu-53</a>
<a id="54" class="large button orange" onclick="changesrc_orange(this,&quot;osu-54&quot;)">osu-54</a></li>
<br>
<!--<a id="7" class="large button red" onclick=changesrc_red(this,"riri")>短片-莉莉的爱</a></li>-->
<br>
<br>
<br>
<a style="text-align:center" href="https://osu.ppy.sh/users/11119025">Pariya</a>
<br>
<br>
</div>
<div></div>

</body></html>

 

我仿看到了其中的一些错误…但是html就是如此随性~不会导致整体的崩溃。

这样看起来没有任何技术含量…

 

每次更新自己的视频还要改好多…

不过我还算找到了一个简单的上传方法,因为服务器的问题,连接并不是十分稳定。。。

但是借用第三方就不一样了

 

我使用的是Google Drive的第三方工具:skicka

在linux上安装这个首先需要安装Go(过程直接引用已有的资料)

安装go工具

在 http://golang.org/dl/下载最新的linux版本,并把它提取到/usr/local目录,在此目录下进行解压缩

  1. tar -xvf xxx.tar.gz  

然后将/usr/local/go/bin添加到PATH环境变量中,执行

  1. export PATH=$PATH:/usr/local/go/bin 

实际上go会默认假定它被安装到/usr/local/go目录下,但也可以将go安装到其他位置,此时必须设置GOROOT环境变量来指出它所安装的位置。

例如将go安装到你的home目录下,你应当将以下命令添加到$HOME/.profile文件中

  1. export GOROOT=$HOME/go  
  2. export PATH=$PATH:$GOROOT/bin  

执行go version,看到go的安装版本即安装成功

安装Skicka

这个没有提供现成的二进制文件,所以只能自己编译

然后

然后我们就安装完成了

三.配置操作

那么接着就是配置咯【我记得这里配置过程略有更新,请根据实际提示和Google Drive官方说明】

这儿和前面gdrive的流程基本一样,毕竟都是用的API,所以我就不截网页的图了

然后我们就可以开始操作了

因为说了和系统原生操作很类似,所以命令基本如下

是不是很容易上手?

当然,skicka还有一个特色功能,就是支持加密

首先,我们需要设置一个SKICKA_PASSPHRASE的环境变量,我们可以将其写在profile内就像上面配置Go一样,也可以每次运行时使用,这主要看你

也可以

当然我们除了SKICKA_PASSPHRASE外还需要生成key

然后按照说明将生成的内容粘贴到~/..config 中的[encryption]部分

然后我们可以使用

来实现加密上传

下载过程只要你配置了SKICKA_PASSPHRASE和[encryption]部分就是透明处理解密的,是不是很棒

 

完成之后:

怎样使用呢?这里我用shell脚本来进行简单的使用

#!/bin/sh
file=$1
skicka download /osu/${file}.mp4 /home/wwwroot/www.pariya.cc/res

使用起来贼方便,本地上传osu到Google Drive,完全之后便可在xshell上下载,我记得skicka有自动同步的功能,感兴趣的同学可以尝试一下。

参考:

Linux上go的安装配置以及简单使用

数据备份系列——Google Drive 钦定(划掉)第三方CLI工具 skicka

 

 

535 thoughts on “我的第一个网站

Rattling clean internet site , thanks for this post.

Wow! This could be one particular of the most helpful blogs We’ve ever arrive across on this subject. Basically Magnificent. I’m also an expert in this topic so I can understand your hard work.

women loves deep colors so i think that the best womans clothing should have bright and beautiful colors-

Great humans speeches and toasts, possibly toasts. are hands down transferred at some time through party and expected to turn into very funny, amusing not to mention educational in the mean time. best man wedding speeches

I wish to convey my passion for your generosity in support of men who really need guidance on this subject matter. Your personal dedication to passing the solution along had become exceptionally good and have really empowered employees like me to achieve their objectives. The useful tutorial indicates so much to me and even further to my peers. Best wishes; from all of us.

Comfortabl y, the article is really the freshest on this notable topic. I concur with your conclusions and also definitely will eagerly look forward to your incoming updates. Simply saying thanks will certainly not just be acceptable, for the extraordinary lucidity in your writing. I definitely will promptly grab your rss feed to stay privy of any kind of updates. De lightful work and also much success in your business dealings!

In case you are intrigued in environmental situations, to as wonder the criminals to be aware that to manufacture just one bag with this particular style hydration brings reasoning better liters akin to oil and gas to come up with. daily deal livingsocial discount baltimore washington

Hello, I was looking on the internet and I ran into your website. Keep up the excellent work.

Awesome read. I just passed this onto a colleague who was doing some research on that. He actually bought me lunch as I found it for him! So let me rephrase: Thanx for lunch!

My spouse and i got quite joyous when Chris could finish off his investigations through the ideas he had out of the web page. It is now and again perplexing to simply possibly be giving for free secrets that many some people might have been selling. And we also realize we have the writer to thank for that. These explanations you have made, the simple web site navigation, the relationships you can give support to foster – it’s got mostly exceptional, and it’s really letting our son and the family do think the situation is interesting, which is wonderfully pressing. Many thanks for the whole thing!

Comments are closed.

218 views