2009-03-21

为你的网站创建一个IE8 Web Slice

  IE8的Web Slice不同于原来的那种栏目标签只显示一个标题在favourite bar那样,它能够简要的显示网站所有者定义的一个web slice的内容,Digital Inspiration的作者自己演示了这个效果,我就直接帖它的截图:
  按照微软自己的定义,web slice可以让用户方便在浏览器的收藏夹栏上查阅自己感兴趣的简短的消息,比如淘宝上的竞拍价格,天气预报,股票价格等等。可以说它相当于一个嵌入在浏览器中的小网页。
  那么,接下来我们就来研究一下如何快速的为你的网站创建一个web slice。我这里用digital inspiration的实例,虽然它是for wordpress的,但是其实本质了解了就一样了:

MSDN Library已经有很不错的guide文章和个性化定制的文章了

要创建一个web slice其实是非常简单的:

 <html><head>
<title>Page Title</title>
</head><body>
<div class="hslice" id="techologynews">
<h2 class="entry-title">IE 8 web slice</h2>
<div class="entry-content">
<p><a href="'#'">Link 1</a></p>
<p><a href="'#'">Link 2</a></p>
<p><a href="'#'">Link 3</a></p>
</div></div>
</body></html>

IE8 web slice只是一个简单的使用上面这个结构的html页面而已,你只需要指定它的标题和改变entry-content里面的每条项目内容即可。你也可以在这里定义你自己的css.
一下是一个wordpress的例子:

创建一个页面,比如webslice.php,把它放在wordpresss的安装路径下,内容:
<html><head>
<title>Page Title</title>
</head><body>
<div class="hslice" id="1">
<h2 class="entry-title">Your Site Name</h2>
<div class="entry-content"><ol>
<?php
require_once('wp-load.php');
$results = $wpdb->get_results("SELECT post_title, guid
FROM $wpdb->posts where post_status = 'publish'
ORDER BY ID DESC LIMIT 5");
foreach($results as $row) {
echo "<li><a href="'">guid . "'>"
. $row->post_title ."</a></li> \n";
}
?>
</ol></div></div>
</body></html>

这段代码连接到wordpress的数据库并且创造一个最新的post的列表,这个列表的内容将会被web slice读取。

没有评论: