背景故事

早些时间在千寻桑的bgm站(现已变成blog),看到一个比较新奇的样式,还好有截图。

千寻的ACG电台

后来决定还是自己写一个,因为在《HTML5 audio 實驗》一文中看到一张截图,感觉大爱。

mk9

于是就靠着这张图来写CSS了。

切图

这个部分没啥说的,大家都懂的。

其实一直都有争论到现在这种html5+CSS3的时代,切图究竟还有没有存在价值,不过大D觉得,管他什么,自己顺手,尤其是仿造模板什么的,切图还是很顺手的。

PS切图

 

实施阶段

CSS阶段遇到的问题就是对定位的不熟悉,不过很轻松就解决了。

查查手册就OK了,不过最蠢的是,浏览器标签页太多(多么需要一台高分辨率大屏幕啊),于是照着text-shadow的参数说明来写box-shadow的参数。

代码毫无美感可言,php和js改的乱七八糟的。虽然可以运行,能运行就行。

同时现在把Bgm站上的音乐挪到了VPS上,试验一段时间。于是需要解决盗链问题。

解决盗链

这就需要写.htaccess了,搜索了一番,使用了网络上一抓一大把的链接重写。

但是问题出现了,测试时候,如果先访问盗链者的页面,nolink.png被缓存到本地,然后访问自己的站点,所有的图片都是nolink.png的。只有清楚缓存刷新才可以解决。

搞了半天没有什么结果,搜索了一圈,也没有搜索到什么好的解决方案,于是去看Apache Mod_rewrite模块的手册。

引起我注意的是“HTTP_COOKIE”这么个关键字。

既然RewriteCond 指令可以将重定向的条件设置为验证是否存在Cookie就行了。

那么.htaccess这么写:

这样在访问域名下所有的资源的时候,都要验证浏览器是否有1321321这个cookie。

应用这个的时候,需要给你的页面添加设置cookie的语句。

设置cookie

一开始想利用js来解决,后来发现js的设置cookie跨域做起来很麻烦,即使是同主域下的不同子域也是很麻烦。

查询PHP函数库,找到一个函数。

语法

参数 描述
name 必需。规定 cookie 的名称。
value 必需。规定 cookie 的值。
expire 可选。规定 cookie 的有效期。
path 可选。规定 cookie 的服务器路径。
domain 可选。规定 cookie 的域名。
secure 可选。规定是否通过安全的 HTTPS 连接来传输 cookie。

由于需要一个跟随浏览器的cookie,也就是session cookie(基于会话的cookie),这类cookie存储在内存里,因为是未设置过期时间的cookie,所以这个cookie的默认生命周期为浏览器会话期间,只要关闭浏览器窗口,cookie就消失了。

示例代码,配合上面的.htaccess使用

将这段PHP代码加入到模板的公共文件中,比如header.php等,就可以实现根据cookie来防盗链了。

调试的时候费了不少心思,还好IE提供了开发人员工具,可以查看cookie的状态。

又想到最好有个错误提示页面,于是又写了一个。

错误提示页面

这个页面要实现几个功能:

  • 记录访问IP、访问时间、IP归属地
  • 将上述三个写入log文件
  • 前台显示

这三个实现起来都不难。

首先是获取浏览者IP,这个可以用PHP来直接实现。

这样变量ip的值就是浏览者的IP。

访问时间的实现,也是超高校级的简单。

查询归属地,这个实现起来有点小难度的,一开始想用纯真库来搞,但是出于效率和对VPS的负载的均衡考虑,直接调用查询网站的接口是一个比较不错的办法。

这里我们用新浪的。

新浪的查询地址是:http://int.dpool.sina.com.cn/iplookup/iplookup.php?ip=

操作文件

这些都搞定之后,就是要操作文件了,写入文件用fwrite函数就行了。这里就不在多说了。

贴出代码来吧,注释解释一下。

浏览器兼容提醒

真的想吐槽这些浏览器,支持mp3的,不支持ogg,支持ogg的,不支持mp3.

这都是无关紧要的方面了,闹心的是IE8的对css3、html5等支持太差了。

干脆写个界面来提示一下吧。

首先写一段只能IE8及以前版本能执行的代码:

这是实现后的效果。
IE8及以下不兼容提示

插入到index文件当中去就行了。<head></head>之间就OK。

至于代码里面的一些链接,伸手党们自己去替换就行了。

IE8作为老旧浏览器,就没什么必要搞一堆花里胡哨的样式了。几行字解决最nice了。

同时还搭建了一个大D综合研究院BGM电台2台,flash的,用来兼容以前的老浏览器。

截图

BGM1台

BGM2台

参考资料

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

后记

后期要改进的东西也不少。慢慢修改就是了。

对提供帮助的朋友和上面参考资料的作者表示感谢。

与本文相关的文章
版权声明
转载保留版权: 大D综合研究院 | 《BGM电台改造记》
本文链接地址:https://www.dadclab.com/archives/3735.jiecao
转载须知:如果您需要转载本文,请将版权信息,版权授权方式,以及本文的链接地址注明,谢谢合作。
本文被贴上了: , , , , , , , 标签