2010June . 2nd

利用 Yahoo Pipes 和 jQuery 做一个 RSS 挂件

如果我们希望把一个网站的更新实时发布到令一个网站上,最好的方法是通过 RSS 进行转载。如果只是需要简单的对更新的条目做个提示的话,使用 JavaScript 是最可行的方法。但是通过 JavaScript 解析一个 XML 文档十分麻烦。幸好 Yahoo Pipes 为我们提供了非常好的 RSS to JSON 功能,我们可以先把 RSS 转换成 JSON 再用 JavaScript 进行解析,这样比直接解析 XML 简单得多!

把 RSS 转换成 JSON

雅虎 Pipes

首先登录 http://pipes.yahoo.com ,新建一个 Pipe ( Creat a Pipe ) 。然后在左边的工具里选择 Sources > Fetch Feed ,在输入框里输入一个 RSS 地址。再用线把 Fetch Feed 和 Pipe Output 两个框框连起来(如右图),保存这个 Pipe,然后点击顶部的 Run Pipe… 。点击 Publish 发布这个 Pipe ,然后记下 Get as JSON 的 URL。简单几步就已经把一个 RSS 转换成 JSON 了,而且这个 JSON 会根据 RSS 的更新自动更新。

2010May . 25th

为 WordPress 3.0 的自定义菜单链接添加栏目图标

WordPress 3.0 自定义菜单栏目图标

WordPress 3.0 为了增强 CMS 功能,加入了自定义菜单的功能,除了定义菜单项目外,还可以菜单定义各个项目的 CSS Class。我们可以利用这个功能来为菜单项目添加一个个性图标。

在 WordPress 3.0 的 Appearance(外观)-> Menus(菜单)面板里我们可以看到自定义菜单的设置,首先点击“Creat Menu”,再在左栏勾选需要的菜单项目后点击“Add to Menu”可以把勾选的项目添加到刚才建立的自定义菜单里。这是展开菜单项可以看到相关项目的参数。

2010May . 20th

WordPress 在 more 截断处插入广告

在文章内插入的广告具有相当高的点击率。在 WordPress 里,我发现很多人利用 JavaScript 把广告插入到 more 截断标签处,作为内文广告。昨晚我也在内文里放了 Google Adsense,但我是用 WordPress 自带的 add_filter 函数实现的。

打开主题的 function.php ,插入下面的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/**
 * The filter to insert the ads
 */
function bl_insert_ad_code_filter( $content ) {
	global $id;
 
	// 只在文章页面显示
	if ( !is_single() ) {
		return $content;
	}
 
	// 首先插入广告代码
	$html = '<div class="single_ads">你的广告代码</div>';
 
		// more 标签在 WordPress 2.3 前是一个 a 标签,2.3 后是一个 span 标签
		// 保证兼容性
		return preg_replace("#\《(a|span) id\=\"more-$id\"\》\《/\\1\》#", $html."$0", $content, 1);
		//因为 wp-syntax 插件的问题,请把上一句代码中的书名号替换成“< ”和“>”,“\”换成“\”
 
	return $content;
}
 
add_filter('the_content', 'bl_insert_ad_code_filter', 50);

利用这个 filter 我们还可以在文章任意的地方插入广告,或者添加其他的应用,大家可以尽情发挥创意。

2010May . 15th

CSS 多个子框架居中

有时我们需要令一个宽度固定的容器里的子框架居中(例如一个 Div ,或者其他 block 级元素),如果子框架只有一个的话,我们只需要为子框架加上 CSS 属性 margin: auto 就可以了。

但如果我们要让多个子框架居中,并且等分父框架剩余的空间的话,我们对所有子框架使用 CSS box-align: center 来实现这种效果。

可是目前还有相当一部分主流浏览器不支持 box-align 属性,那么我们应该如何编写 CSS,使这种效果能兼容大部分的浏览器呢?

通常的方法

为了使多个 block 级元素排列在同一行里,我们习惯使用 float 属性使子框架浮动,然后利用 margin 属性让每一个子框架之间都留出一些空白的间距。可是这样做会触发经典的 IE6 双倍 margin BUG,这样反而要投入额外的时间去调试 IE6 的 Hack。

虽然我们还可以通过 display: inline 来避开 IE6 的 BUG,但我们仍然需要调整这些子框架间的间距,防止最后一个自框架被挤到下一行。

2010May . 9th

CSS3 灵活的盒子模型(Flexible Box Module) – 2

继上一篇《CSS3 灵活的盒子模型(Flexible Box Module) – 1》后继续深入,说说 CSS3 里盒子模型的尺寸。本文的 HTML 框架继续沿用《CSS3 灵活的盒子模型(Flexible Box Module) – 1》。

在 CSS2 里,要把一个容器分成三栏的话比较简便的方法是把三个字容器的 width 都设为 33.3%,这种方法无法把父容器的宽度完全填充,在父容器的宽度足够大的时候留下的空白会是页面变得很不美观。令一种方法是通过计算把子容器的 width 都设为一个固定值,这种方法比较繁琐,而且在一些情况下无法使子容器的宽度完全相等(例如父容器的宽度为 100px)。当我们迈入 CSS3 时代后,这种问题将迎刃而解。

box-flex 属性

box-flex 应用在需要分栏的子容器上,它的值必须是一个自然数或小数。当父容器里有多个带有 box-flex 属性的子容器时,浏览器将会把这些子容器的 box-flex 的值相加,然后根据它们各自的值占总值的比例,再在父容器剩余的空间里分配它们的尺寸(说的啰嗦,其实一看 DEMO 就懂)。也就是说,我们需要注意 box-flex 属性必须在父框架具有具体的 width 或者 height 的时候才能正常渲染

2010May . 5th

叶问2

叶问2

今天下午和同学一起去中华电影城看了《叶问2》。我很少看电影,更少去电影院,难得有我喜欢的片子的续集,我就去看了。《叶问》系列吸引我主要有这几点:作为一部武打片,《叶问》比较强调武者的武德,看这样的片子无论在视觉上还是精神上都是一种享受;《叶问》的摄影风格比较朴实,夸张的比较少,剧情也还不错,像《风云2》那样光有画面没有剧情的片子叫做烂片,我个人是把《风云2》当作游戏CG看的;熊黛林很漂亮,但她和叶问之间的感情很微妙,我一直想从影片里找到她到底喜欢叶问什么优点。

2010May . 4th

CSS3 灵活的盒子模型(Flexible Box Module) – 1

CSS3 标准里引入了一些新的盒子模型参数,在 CSS2 的基础上,我们将能更灵活地调整页面上各个容器的大小和位置。详细的说明可以看这个文档

通过学习和测试,我发现这种新的盒子模型布局对建立自适应布局的页面带来很大的好处。在这篇文章中,我的所有例子都基于以下 HTML代码:

1
2
3
4
5
<body>
	<div id="box1">1</div>
	<div id="box2">2</div>
	<div id="box3">3</div>
</body>

容器的排列

在通常的情况下,页面上所有容器的顺序都按照载入的顺序排列。而使用 CSS3 提供的功能后,我们可以在不改变 HTML 结构的前提下随意改变容器显示的位置,这样不但给排版带来极大的方便,我们也可以利用这些功能进行流量整形。

2010April . 29th

WordPress 高级设置技巧

WordPress 在编写和修改文章是默认会每隔 60 秒自动保存一次,并且生成一个修订存档,这个设置未必适合每一个人,但后台并没有提供相关的设置。我们可以修改 wp-config.php 里的参数来进行设置。

修改自动保存间隔时间

打开 WordPress 根目录里的 wp-config.php(2.9版本在 wp-settings.php 里),找到以下的代码:

1
define( 'AUTOSAVE_INTERVAL', 60 );

这个常量是 WordPress 自动保存的间隔时间,把 60 修改成你想要的秒数即可。

2010April . 28th

CSS:跨浏览器复合背景

最近发现了一个让 IE6~8 也能呈现 CSS3 Multiple Backgrounds(复合背景)的方法,当时我小小的震惊了一下。看来 IE6 曾经的辉煌不单是微软的捆绑和网银的支持造成的,在当年,它强大的功能也令其它浏览器难以追赶。废话不说了,先说说 CSS3 里的标准做法。

在 CSS3 标准里,Background 属性被赋予更加强大的功能,在 CSS2.1 的基础上,我们可以对一个对象同时使用多个背景图片。例如如下的样式:

1
2
3
#multiple-bg {
	background-image: url(top.png), url(middle.png), url(bottom.png);
}

添加符合背景图片的时候先从最顶层开始添加,按从高到低的顺序写样式。大家可以看这个 Demo。可以尝试用 IE 打开看看效果。

2010April . 25th

浅谈博客 SEO(搜索引擎优化) 技巧

提高网站流量最好的方法是针对搜索引擎进行优化(SEO)。SEO 是一门需要长期研究的学问,随意而为的话网站不可能获得尽可能高的排名,但肆意堆砌关键词又会受到搜索引擎的惩罚。本篇文章仅针对博客浅谈一下搜索引擎优化技巧,SEO 高手可以忽略。

如何定义关键词(Keywords)和页面描述(Description)

页面关键词和描述的作用是为搜索引擎提供相关度的依据,对搜索排名影响非常大。搜索引擎的基本工作原理可以看下图。
搜索引擎基本工作原理

Subscriber selector

Close