我的第一个网站

虽然实际上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 “我的第一个网站

Birthday wishes can be a lot more significant, when the recipient is created to truly feel happier and far more expectant about receiving older.

I don’t think I’ve read a post like this before. It’s well-thought out, which means that I learned something new today. I’m going to check out some of your other posts to see if they each have the same high-quality applied to them!

Good work, I enjoyed – Gulvafslibning | Kurt Gulvmand. It was good. View my blog sometime, it all about Casselberry, FL Real Estate.

The way you write, you are really a professional blogger.’~,’`

Most of the people make use of the list to make certain they have all of the appropriate elements, such as food and clothes. It also helps you to pack the appropriate camping equipment.

I was on Twitter looking for Neiko Tools Air Tools when I found a link to this blog, happy I stopped by – Cheers

When I originally commented I clicked the -Notify me when new surveys are added- checkbox now every time a comment is added I receive four emails with the same comment. Is there that is you may get rid of me from that service? Thanks!

When I originally commented I clicked the -Notify me when new surveys are added- checkbox and from now on when a comment is added I receive four emails with the exact same comment. Can there be however you can get rid of me from that service? Thanks!

After study just a few of the weblog posts in your website now, and I really like your way of blogging. I bookmarked it to my bookmark web site listing and might be checking back soon. Pls try my site as properly and let me know what you think.

Comments are closed.

217 views