BGM电台改造记
背景故事
早些时间在千寻桑的bgm站(现已变成blog),看到一个比较新奇的样式,还好有截图。
后来决定还是自己写一个,因为在《HTML5 audio 實驗》一文中看到一张截图,感觉大爱。
于是就靠着这张图来写CSS了。
切图
这个部分没啥说的,大家都懂的。
其实一直都有争论到现在这种html5+CSS3的时代,切图究竟还有没有存在价值,不过大D觉得,管他什么,自己顺手,尤其是仿造模板什么的,切图还是很顺手的。
实施阶段
CSS阶段遇到的问题就是对定位的不熟悉,不过很轻松就解决了。
查查手册就OK了,不过最蠢的是,浏览器标签页太多(多么需要一台高分辨率大屏幕啊),于是照着text-shadow的参数说明来写box-shadow的参数。
代码毫无美感可言,php和js改的乱七八糟的。虽然可以运行,能运行就行。
同时现在把Bgm站上的音乐挪到了VPS上,试验一段时间。于是需要解决盗链问题。
解决盗链
这就需要写.htaccess了,搜索了一番,使用了网络上一抓一大把的链接重写。
1 2 3 4 5 6 |
RewriteEngine On RewriteCond %{HTTP_REFERER} !^http://dadclab.com/.*$ [NC] RewriteCond %{HTTP_REFERER} !^http://dadclabi.com$ [NC] RewriteCond %{HTTP_REFERER} !^http://www.dadclab.com/.*$ [NC] RewriteCond %{HTTP_REFERER} !^http://www.dadclab.com$ [NC] RewriteRule .*\.(gif|jpg|swf)$ http://www.dadclab.com/nolink.png [R,NC] |
但是问题出现了,测试时候,如果先访问盗链者的页面,nolink.png被缓存到本地,然后访问自己的站点,所有的图片都是nolink.png的。只有清楚缓存刷新才可以解决。
搞了半天没有什么结果,搜索了一圈,也没有搜索到什么好的解决方案,于是去看Apache Mod_rewrite模块的手册。
引起我注意的是“HTTP_COOKIE”这么个关键字。
既然RewriteCond 指令可以将重定向的条件设置为验证是否存在Cookie就行了。
那么.htaccess这么写:
1 2 3 |
RewriteEngine On RewriteCond %{HTTP_COOKIE} !^.*(?:Site=1321321).*$ RewriteRule ^.*$ http://www.dadclab.com/error.php |
这样在访问域名下所有的资源的时候,都要验证浏览器是否有1321321这个cookie。
应用这个的时候,需要给你的页面添加设置cookie的语句。
设置cookie
一开始想利用js来解决,后来发现js的设置cookie跨域做起来很麻烦,即使是同主域下的不同子域也是很麻烦。
查询PHP函数库,找到一个函数。
语法
1 |
setcookie(name,value,expire,path,domain,secure) |
参数 | 描述 |
---|---|
name | 必需。规定 cookie 的名称。 |
value | 必需。规定 cookie 的值。 |
expire | 可选。规定 cookie 的有效期。 |
path | 可选。规定 cookie 的服务器路径。 |
domain | 可选。规定 cookie 的域名。 |
secure | 可选。规定是否通过安全的 HTTPS 连接来传输 cookie。 |
由于需要一个跟随浏览器的cookie,也就是session cookie(基于会话的cookie),这类cookie存储在内存里,因为是未设置过期时间的cookie,所以这个cookie的默认生命周期为浏览器会话期间,只要关闭浏览器窗口,cookie就消失了。
示例代码,配合上面的.htaccess使用
1 2 3 |
<?php setcookie("Site", "1321321", 0,"/",".dadclab.com"); ?> |
将这段PHP代码加入到模板的公共文件中,比如header.php等,就可以实现根据cookie来防盗链了。
调试的时候费了不少心思,还好IE提供了开发人员工具,可以查看cookie的状态。
又想到最好有个错误提示页面,于是又写了一个。
错误提示页面
这个页面要实现几个功能:
- 记录访问IP、访问时间、IP归属地
- 将上述三个写入log文件
- 前台显示
这三个实现起来都不难。
首先是获取浏览者IP,这个可以用PHP来直接实现。
1 2 3 |
<?php $ip = $_SERVER["REMOTE_ADDR"]; ?> |
这样变量ip的值就是浏览者的IP。
访问时间的实现,也是超高校级的简单。
1 2 3 |
<?php $time = date("Y-m-d G:i:s"); ?> |
查询归属地,这个实现起来有点小难度的,一开始想用纯真库来搞,但是出于效率和对VPS的负载的均衡考虑,直接调用查询网站的接口是一个比较不错的办法。
这里我们用新浪的。
新浪的查询地址是:http://int.dpool.sina.com.cn/iplookup/iplookup.php?ip=
1 2 3 4 5 6 7 8 9 10 |
<?php function getiploc($ipip){ $IP_tmp = array(); $IP_str = @file_get_contents('http://int.dpool.sina.com.cn/iplookup/iplookup.php?ip='.$ipip); //读取新浪返回的字符串 $IP_tmp = explode(" ",$IP_str); //这是Tab。。。空格去死。字符串分割存入数组。 $IP_country = $IP_tmp[3]; $IP_province = $IP_tmp[4]; $IP_city = $IP_tmp[5]; $IP_IDC = $IP_tmp[7]; //以上4行是将数组内国家,省份,城市,运营商提取出来 ?> |
操作文件
这些都搞定之后,就是要操作文件了,写入文件用fwrite函数就行了。这里就不在多说了。
贴出代码来吧,注释解释一下。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<?php function getiploc($ipip){ $IP_tmp = array(); $IP_str = @file_get_contents('http://int.dpool.sina.com.cn/iplookup/iplookup.php?ip='.$ipip); $IP_tmp = explode(" ",$IP_str); //这是Tab。。。空格去死。 $IP_country = $IP_tmp[3]; $IP_province = $IP_tmp[4]; $IP_city = $IP_tmp[5]; $IP_IDC = $IP_tmp[7]; date_default_timezone_set('Asia/Shanghai'); //设置时区,以免出现时间错误 $iipp = $_SERVER["REMOTE_ADDR"]; $time = date("Y-m-d G:i:s"); $char = $iipp."\t".$time."\t".$IP_country."\t".$IP_province."\t".$IP_city."\t".$IP_IDC; //将需要写入文件的数据整合成一个字符串 $fp=fopen("error.log",'a+'); //打开文件,以追加方式 fwrite($fp,$char."\n"); //写入文件 fclose($fp); //关闭文件 } ?> <?php $ip = $_SERVER["REMOTE_ADDR"]; getiploc($ip); //调用 ?> /*下面就是前台显示内容了*/ <!doctype html> <html> <head> <meta charset="utf-8"> <title>你要拿我的馒头卡?</title> </head> <style> html{margin:0;height:100%;background:#FFF url(/error.jpg) no-repeat 50%;} </style> <body> </body> </html> |
浏览器兼容提醒
真的想吐槽这些浏览器,支持mp3的,不支持ogg,支持ogg的,不支持mp3.
这都是无关紧要的方面了,闹心的是IE8的对css3、html5等支持太差了。
干脆写个界面来提示一下吧。
首先写一段只能IE8及以前版本能执行的代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!--[if lte IE 8]> <title>大D技研室——不兼容提醒</title> <link rel="stylesheet" href="css/stylesheets/ie8.css"> <body> <h1>大D技研室——不兼容提醒</h1> <div id="ie8"> <p>骚年,目前你所用的胖次已经不再兼容你的菊花,为了你的胖次安全,推荐你换用Chrome,Safari,Firefox或Opera以更好的保护你的菊花。</p> <p>不过,大D提供了你目前所用浏览器可以兼容的大D技研室BGM电台2台。</p> <p>狂点 <a href="http://bgm2.dadclab.com">这里</a></p> </div> <div id="footer"> Copyright © 2013 <a href="http://www.dadclab.com"> 大D技研室</a> </div> </body> <![endif]--> |
插入到index文件当中去就行了。<head></head>之间就OK。
至于代码里面的一些链接,伸手党们自己去替换就行了。
IE8作为老旧浏览器,就没什么必要搞一堆花里胡哨的样式了。几行字解决最nice了。
同时还搭建了一个大D技研室BGM电台2台,flash的,用来兼容以前的老浏览器。
截图
参考资料
http://zespia.tw/blog/2012/02/04/lab-html5-audio/
http://www.chinahtml.com/1007/128010707619425.html
http://php.net/manual/zh/function.setcookie.php
http://www.w3school.com.cn/php/func_http_setcookie.asp
http://lamp.linux.gov.cn/Apache/ApacheMenu/mod/mod_rewrite.html
后记
后期要改进的东西也不少。慢慢修改就是了。
对提供帮助的朋友和上面参考资料的作者表示感谢。
已有 17 条评论
发表评论
电子邮件地址不会被公开。 必填项已标注。
哇咔咔,播放器的背景图还是随机的~好厉害的感觉
@dave 咔咔哇,一如既往的折腾。
哇 好看~
就是歌曲更新速度要更上才行233
@千寻 哇啦啦,更新什么的,争取每月1、15号更新一下
背景图片不错啊,以后没事干了可以来听你的这个电台……
@lower 可以啊。欢迎常来。
不错哦,赞一个,好漂亮的的电台
@woween 还好还好。。
_(:з」∠)_
@魔法基佬MKⅡ 魔法基佬粗线啦。。话说你的站什么时候回来?
@大D 等我收集足够的脑浆Orz...
@魔法基佬MKⅡ souka,我还以为你要收集足够的XX呢。。哇咔咔。。
@大D 果然还是很想吐槽这两层灯箱啊...
@魔法基佬MKⅡ 两层灯箱。。。卧槽。。这都是facebox-download惹的祸。。去改一下插件。哇咔咔。
@魔法基佬MKⅡ 哇咔咔,改了一下插件就OK鸟。哇卡卡卡。
我来捡胖次。。
@佳佳酱才是小黑呢 哇咔咔,胖次不是你想捡,想捡就能捡~