HTML DEMO中例图自动生成器

我们在制作HTML DEMO 的过程中,往往需要制作页面中需要的尺寸的例图,很多时候我们是通过 photoshop 来做,但是这样多烦啊,这种很机械的工作还是交给机器来做吧。

我写了一个简单的例图生成器,访问 http://img-api.allenm.me 有简单说明。在应该放例图的位置,只需要在 img 的 src 属性中写类似 ”http://img-api.allenm.me/200-300.png”  这样就可以了。其中200代表宽度,300代表高度,上面的代码显示如下:

例图

实现方法很简单,用 php的 GD 库,配合服务器的 url rewrite 功能。把所有的以 .png 结尾的文件到 rewrite 到 index.php中,然后用正则来获取高度和宽度。现在代码还有一些地方需要修改,暂时不放出来,有兴趣的可以和我交流一下。现在兼容 Apache和 nginx,其他的 http 服务器我没玩过,不会配置,不过原理应该都一样。

如果有前端从业人员需要,建议自己搭建内部的这个服务,因为我的这个服务稳定性保证不了。

uchome二次开发中的feed发送问题

对于SNS来说,feed是个必不可少的东西,有了feed才可以让SNS有黏性,让应用有黏性,同时也是一个在站内推广应用的好方法。(只想知道怎么使用的,请跳到本文的最后面吧)

于是今天要为我给普特英语听力开发的应用添加feed发送功能了,但是uchome没有官方的开发文档,所以只好自己看代码了。先分析了踩日志后,发送feed的这个过程,在 /home/source/cp_blog.php 这个文件里,关于踩日志的feed相关代码在111行。

$feed_title = cplang('feed_trace');
$feed_data = array(
'username' => "<a href=\"space.php?uid=$blog[uid]\">".$_SN[$blog['uid']]."</a>",
'blog' => "<a href=\"space.php?uid=$blog[uid]&do=blog&id=$blog[blogid]\">$blog[subject]</a>"
);
feed_add('trace', $feed_title, $feed_data);
$feed_title = cplang('feed_trace'); $feed_data = array( 'username' => "<a href=\"space.php?uid=$blog[uid]\">".$_SN[$blog['uid']]."</a>", 'blog' => "<a href=\"space.php?uid=$blog[uid]&do=blog&id=$blog[blogid]\">$blog[subject]</a>" ); feed_add('trace', $feed_title, $feed_data);

可以看到有个cplang和feed_add的这两个函数,于是找这两个函数在什么地方定义的就可以了。懒得猜,也懒得通读代码了,用工具来暴力查找吧,我用的是notepad++这个东西指定文件夹,暴力搜索关键字。

找到了function feed_add 在 home/source/function_cp.php 中定义,第384行,有兴趣的自己去看,这里就不贴出来了,比较长。其中feed-add函数的第一个参数是feed图标的名字,例如上面的那个 trace ,就指定到 home/image/icon/中的trace.gif图片。第二个参数是feed的模板,第三个参数是feed的数据,后面的参数都有缺省值,简单的feed可以不使用了。以cplang为关键字找到了在 home/language/lang_cp.php 文件里定义了一个名字为$_SGLOBAL[‘cplang’]的数组,一看内容就是各种feed的模板,好了,function cplang也不找了,就修改这里吧,照着上面已经存在的feed模板,加上了我自己需要的模板格式。然后测试了一下,OK,成功了。

feed模板的用法很简单,看个和上面代码相关的模板你就明白了,里面有这样一行定义:’feed_trace’ => ‘{actor} 踩了一脚 {username} 的日志 {blog}’,看明白了吧,feed中用大括号来括起来动态的部分,然后你在使用add_feed的时候,第三个参数 feed_data是个关联数组,其中key就是这个模板里的名字。

好吧,知道怎么使用了,但是要怎么部署才好呢?如果按照uchome的这种结构部署的话,要修改好几个文件,而且像 lang_cp.php还要在服务器上直接修改才行,因为我这里本地的文件和服务器上的文件是不一样,因为还有其他开发者修改过这个文件,所以不能简单的修改后覆盖。想了想,这个文件无非就是提供一个feed的格式而已,我直接写在我自己app中的代码文件中是一样的。uchome这样使用的理由是,可以支持好几种语言,针对不同语言使用不同的模板,但是我这个就没必要了,都是给中国人用的,所以就不使用 cplang函数来,直接定义$feed_title ,然后传给 add_feed函数就可以了。这样就只用覆盖一个文件就可以完成添加feed功能了。

总之,要在uchome二次开发中使用feed功能,建议是:在 home/source/cp_blog.php中看111行附近的代码,这是个使用示例,然后看 home/source/function_cp.php 384行附近的代码,这个是 feed_add的定义,然后看 home/language/lang_cp.php 这个文件关于feed模板的定义就可以了。另外准备一个图片放在 home/image/icon下面。做了这些就可以很轻松的添加简单的feed功能了,想要更高级的feed功能,就去研究 feed_add 这个函数的定义吧。

解决wordpress发不了邮件的方法

很多wordpress博客都有可以用email订阅评论的功能,游客在这里发表的评论,如果主人回复了,或者其他人回复了,都会发送一个email到原来的游客,这样可以很好的加强这种“对话”,要不然很可能回复的内容,别人看不见。

但是我这个虚拟主机虽然支持smtp,但是我一直发送不成功,因为PHP的mail()函数其实是不支持设置smtp参数的,是靠系统设置的,我想我这个发不出去的原因,是因为我的域名的Mx记录没有指向这里吧。具体的我也不是很清楚。

但是wordpress有插件可以解决这个问题,可以用其他支持smtp的邮箱,甚至GMAIL来发送邮件。

我现在用的是 config smtp 这个插件,设置很简单,我本来打算想用163的邮箱来发送,但是失败了,不知道是我的163不支持smtp,还是我设置错误了。只好改用GMAIL,设置就很简单了,设置完测试了一下,可行。

现在你在我的博客comment,就可以选择是否有邮件通知了。

UCHOME二次开发,在特定页面的头文件中添加js的方法

昨天找出了添加css文件的方法,今天写js的时候,又阅读了一遍主页面模板,发行在<head>里面没有找到可以添加自定义js的方法,硬要添加的话,就每个页面都要添加,但是我只需要在我开发的这个模块的页面中加载。当然可以把js写在<body>中,但是那样总是不大爽。

没办法,只好从昨天添加css的地方下手,那个是直接echo出的$_SGLOBAL[‘space_css’]这个变量,那我们只要把这个变量写成像这个样子的就可以了:

$_SGLOBAL[‘space_css’]=”@import url(template/default/style_bdc.css);”; //定义CSS文件
$_SGLOBAL[‘space_css’].='</style><script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js”></script><style type=”text/css”>’;

这应该一看就明白了吧。

我jQuery用的熟一点,所以就打算加载jQuery来写前端代码。这个地方使用的google 的 ajax库CDN加速。

UCHOME二次开发,添加特定页面CSS的方法

这段时间在给普特英语听力这个网站开发一个SNS插件,用的是UCHOME,实际上就是UCHOME二次开发,当然和开发校内,facebook的插件是不一样的,那些一般别人提供API,然后用那些API开发就行了。做uchome,代码在自己这里,当然还是希望直接集成到系统中了,就像左边那些日志,相册那样的东西。

开始看了前人已经为普特开发好的插件,发现所有的样式都是内联样式,看的我很恶心,我就不信UCHOME没有提供加载自定义CSS的方法,研究了一下他的模板,第一次接触,一时看的有点困难,但是看模板解析函数,知道会把模板解析成PHP,缓存起来,于是我就直接去看那个缓存文件,PHP,当然很容易就看懂了。发现在加载CSS的时候,有下面这句:

if(!empty($_SGLOBAL[‘space_css’])){

echo $_SGLOBAL[‘space_css’];

}

代码是这个意思,但是应该不是这样写的,我现在懒得去看那个代码了。也就是说,判断$_SGLOBAL[‘space_css’]是否存在,然后echo出就行了。这行代码是包含在 <style type=”text/css”>和</style>之间的,所以我们就只用在需要加载我们自定义CSS的页面的时候,PHP文件中定义这个变量就行。因为是直接echo 出的这个变量,所以定义变量的时候,要这样写:

$_SGLOBAL[‘space_css’]=’@import url(“yourcss.css”)’;

如果需要加载好几个CSS文件,只用拼接这个字符串就行了。我想这就是为什么模板中只是简单的echo出这个变量来,这样你可以随便按照你的要求写。


windows7下面搭建 Xampp+Eclipse PDT+XDebug的PHP开发环境

打算使用PDT来做PHP的开发环境了,以前一直使用ultraEdit来写PHP代码,然后用echo,print_r(),这些来调试,很麻烦,很多时候需要不停的注释,加输出代码。现在决定要来使用一个可以debug的东西了,来方便开发。

下面是个简单的教程,也是我昨晚加今早刚摸索出来的,希望能给新手一个提示。

1,如果你机器没有JRE,来JAVA的官方网站下载JRE,安装,因为Eclipse需要JRE才能运行。

2,下载Eclipse PDT,直接下载下面的那个2.1版本的All in one windows安装包。解压到你想安装的位置,直接运行eclipse就可以启动了。

3,下载XAMPP这个集成的PHP+MySql运行环境,如果是EXE安装包,就双击安装,如果是ZIP包,就解压运行。运行XAMPP,就不说了。(我的安装目录是c:\xampp,以下涉及到目录的就以这个为基础,如果你的和我不同,请自行变通)

4,下载XDebug,我下载的是5.3 VC6(32bit)版本,你可以根据你的实际情况下载。

5,拷贝刚刚下载的XDebug到c:\xmapp\php\ext\这个目录下面。

6,用文本编辑器打开php.ini 我使用的xampp 1.7.2的这个文件是在c:\xampp\php\php.ini。以前的xampp的php.ini有的不在这里,而是在c:\xampp\apache\bin\php.ini,你可以查看phpinfo来确定你的php.ini的位置。

7,在php.ini文件里面找到zend_extension = 这一行,然后改为zend_extension = “\xampp\php\ext\php_xdebug-2.0.5-5.3-vc6.dll” 后面引号的内容取决于你下载的XDebug的文件名字。

8,在php.ini文件里面添加

[XDebug]
;; Only Zend OR (!) XDebug
zend_extension_ts="C:\xampp\php\ext\php_xdebug-2.0.5-5.3-vc6.dll"
xdebug.remote_enable=true
xdebug.remote_host=127.0.0.1
xdebug.remote_port=9000
xdebug.remote_handler=dbgp
xdebug.profiler_enable=1
xdebug.profiler_output_dir="C:\xampp\tmp"

9,配置PDT,进入window->preferences

设置PHP的excutablesqq1

我这个是已经添加好的了,刚配置的时候需要点击add,添加,可以像这样填写:

2

接着配置debug像这样:

3

10,配置完毕,可以写代码,并且使用XDebug来debug了,你可以试试,如果不可以的话,欢迎提出问题。

附上两个参考文档:A Complete LAMP Development Environment – Xampp, Eclipse PDT and XDebug

eclipse官方文档,点击下载PDF

Let's make the web faster

在几周前将网页加速工具开源后,Google又发布了一个网站,意在探寻更多的方法,并推动全互联网的加速进程。这次Google分享了研究数据、网站加速优化指南、有关性能的录制视屏、大量性能优化工具的介绍,以及一个讨论组,期望所有人都能在此分享如何使网页更快的创意。

为了指导其他人如何加速他们的网站,Google提供了如下一些指南:

刚才看了PHP性能技巧部分,有所收获,我发现我最大的问题是中间提到的,Don’t copy variables for no reason。

我就经常复制变量,为了写的方便。

urlencode和rawurlencode的区别以及url编码一些需要注意的地方。

PHP手册关于urlencode是这样写的:

Return Values

Returns a string in which all non-alphanumeric characters except -_. have been replaced with a percent (%) sign followed by two hex digits and spaces encoded as plus (+) signs. It is encoded the same way that the posted data from a WWW form is encoded, that is the same way as in application/x-www-form-urlencoded media type. This differs from the » RFC 1738 encoding (see rawurlencode()) in that for historical reasons, spaces are encoded as plus (+) signs.

简单的说来就是urlencode这个函数会把空格编码成‘+’.而rawurlencode会把空格编码为%20;

另外刚才遇到了一个事情耽误了我不少时间。对于不同的字符编码格式,encode后也会不同的,我是想解析一个url,然后就用来urldecode这个函数,解析出来‘%E6%88%90%E9%83%BD’这一窜字符为‘成都’,但是我用urlencode编码‘成都’却得到的是‘%B3%C9%B6%BC’。想来一会才觉得应该是编码的问题,我编码得到的一个汉字占领2个字节,而我原来解析的是一个字3个字节,这刚好是UTF-8编码和ASC编码的区别,原来是因为UltraEdit要另存为一次,才能把汉字转换成UTF-8编码,或者使用ANSI/ASC->UTF-8的功能。

现在另存为一次,选择UTF-8无BOM的编码后,可以成功的urlencode(‘成都’)为%E6%88%90%E9%83%BD了。

用SimpleXML解析RSS Feed

今天需要用PHP来做解析RSS Feed的工作,用SimpleXML来完成的,因为RSS本来就是一种XML,只是规定了一些东西而已。

我要解析的东西比较简单,只是为了获得dict.cn上的每日口语一句的内容就可以了。

大概的代码就像这个样子

$feedUrl ='http://bbs.dict.cn/rss.php?fid=44&auth=0';
$rawFeed = file_get_contents($feedUrl);
$xml = new SimpleXmlElement($rawFeed);

$channel[‘title’] = $xml->channel->title;
$channel[‘link’] = $xml->channel->link;

$item=$xml->channel->item;

$message= (string) trim($item->description);

如果你需要获得title和url等信息,你可以使用一个数组来获得,同时一般的RSS 的<item>都有很多,这个也是,只是我只是需要第一个。你需要全部就可以用foreach去遍历就可以了。

另外需要注意的是,一些复杂的RSS还要涉及到命名空间,推荐一篇文章,写的比较清楚:

Using SimpleXML To Parse RSS Feeds