翻译自原文:Tutorial: How to Write an IE8 Web Slice for WordPress Blogs
Web Slices或许是IE8最酷的功能之一了。一些朋友可能会发觉实际上这和Firefox的Live Bookmarks比较相似,不过,IE8 Web Slices可以做的更多而不仅仅只是订阅RSS源。
容我解释一下。打个比方,你对eBay上的某个物品感兴趣并且想尽快得到这个物品的更新通知,比如谁谁谁出了个新价或者卖家修改了产品的描述又或者是运费。要做点这点,可以在你的浏览器里不断刷新这件物品的页面,而更简单的方法则是增加eBay slice功能。
然后现在无论这次拍卖发生了任何的变化,它会即时地反应在你IE8浏览器的收藏夹工具条上。点击这个书签(或者web slice)来获取哪些地方发生了变化。
其实IE8的web slice就是一个内嵌在你浏览器内的迷你页面,也不管你现在是在上哪个网站。而且不像Firefox的Live Bookmarks那样只是一个下拉式菜单显示网站的头条消息。在IE8的中的wen slices你拥有的是对样式的完全控制权使它能多种多样丰富起来。
如何建立IE 8 Web Slice
网站主有这个责任为他/她的网站开发web slices功能。你首先需要决定哪些内容会被呈现在web slice上,更新的频率是多少以及这个web slice的样式如何。
这里(MSDN 库)提供了一些文档来教你如何上手开发web slices,包括了一个样式指南来确保你的web slice在浏览器内看起来不错并且有较强的可读性。
你可能会发觉这个文档本质上太技术化了点,但是千万不要灰心,下面是一些非常简单的例子告诉你如何去为任何使用WordPress的博客(自己独立架设的)定制一个web slice。
1: <html><head> 2: <title>Page Title</title> 3: </head><body> 4: <div class="hslice" id="techologynews"> 5: <h2 class="entry-title">IE 8 web slice</h2> 6: <div class="entry-content"> 7: <p><a href='#'>Link 1</a></p> 8: <p><a href='#'>Link 2</a></p> 9: <p><a href='#'>Link 3</a></p> 10: </div></div> 11: </body></html>
一个IE8 Web slice只是一个简单的HTML页面,结构如上。你只需指定web slice的标题(这是显示在浏览器收藏夹工具条上的),然后在“ entery-content ” 类(第7-9行)中替换成你自己的内容即可。
你也可以自己定义CSS样式,比如这个实例 – 在IE8内打开这个链接来看浏览器是如何自动侦测到页面上的这个web slice(绿色的slice图标会闪)。
如果你还没装IE8或者在你电脑上获取web slice有任何困难,这里有一个高清视频demo(译者注:原文没有这个视频的任何链接,可能作者失误了)。
Web Slices in Internet Explorer 8 – Demo
如果你有一个WordPress(自己独立架设的)博客,下面教你如何创建一个IE8用户可以加到他们菜单栏上的web slice。
在你的WordPress安装目录下创建一个新的文件(比如 webslice.php),然后复制粘贴如何代码到这个php文件下。
<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='".$row->guid . "'>" . $row->post_title ."</a></li> n"; } ?> </ol></div></div> </body></html>
代码非常简单。实质是创建一个到你WordPress数据库的连接并且创建了一个将会显示到wen slice上的最近发布博客文章的列表,如果有人在IE8内订阅你的站点的话。
如何在IE8里安装 Web Slices
至此你的web slice功能已经就绪,现在可以把这个slice发布到你的网站上让使用IE8的访问者可以把这个slice加入到他们的收藏夹工具条上。
接下去,我们会创建一个简单的HTML按钮使得点击它会自动把这个web slice加入到IE8中。
<input type="button" value="Add [site name] Web Slice" onclick='window.external.AddToFavoritesBar("http://web-slice-url", "Your Website Name", "slice");' />
如上的Web Slices教程是特别为WordPress博客写的。如果你是在其他平台上建立自己的博客的,参考这篇文章:turn the RSS feed into a Web Slice。
One Reply to “教程:为你的WordPress博客建立IE 8 Web Slices”