简单生活

Simple life , it's as easy as 1,2,3...

简单认识一下XSLT

2008-10-5 0:2:26

RSS订阅是我们常用到的工具，查看RSS的源码会发现RSS其实是一种XML文档，利用IE直接打开没有转换修饰过的RSS会看打树形结构的XML文档。这种树形结构对于阅读来说，未必就是最合适的，这时候我们就可以利用XSLT把XML转化成为更适合阅读的HTML。Feedsky等烧录过的RSS可以更换不同的模板，便是利用XSLT实现的。

XSLT是扩展样式表转换语言（Extensible Stylesheet Language Transformations）的简称，这是一种对XML文档进行转化的语言，XSLT中的T代表英语中的“转换”（transformation）。它是XSL（Extensible stylesheet language）规范的一部分，XSL规范的另外一部分是XSL-FO（FO代表格式化对象Formatting Objects）。

XSLT是把XML文档转化为另一文档的转换语言，即将源文档的所有数据或者部分数据，利用XPath进行选择，生成另外的XML文档或者其他可直接显示或打印的文件格式（例如 HTML文件、RTF文件或者TeX文件）。如果说CSS是用来修饰HTML的，那么XSLT便是用来修饰XML的。

XSLT语言是声明性的语言，即XSLT程序本身只是包含了一些转换规则的文档。而这些规则可以被递归地应用到转换过程中。XSLT处理程序会首先确定使用XSLT中的哪些规则，然后根据优先级作出相应的转换操作。XSLT本身也是一份XML文档，所以它也必须遵守严格的XML规范。

下面是我到RSS中使用的XSLT文件源码（修改自feedsky模板）

折叠-XML/HTML代码复制内容到剪贴板
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">  
  3.     <xsl:output method="html" indent="yes" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"/>  
  4.     <xsl:variable name="title" select="/rss/channel/title"/>  
  5.     <xsl:variable name="feedUrl" select="/rss/channel/atom:link[@ref='self']/@href" xmlns:atom="http://www.w3.org/2005/Atom"/>  
  6.     <xsl:variable name="selfFeedUrl" select="/rss/channel/fs:self_link/@href" xmlns:fs="http://www.feedsky.com/namespace/feed"/>  
  7.     <xsl:variable name="srclink" select="/rss/channel/link"/>  
  8.     <xsl:template match="/">  
  9.         <html>  
  10.             <head>  
  11.                 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  12.                 <title>  
  13.                     <xsl:value-of select="$title"/> - powered by Wolfstyle</title>  
  14.                 <link rel="stylesheet" href="/xslt/ft5.css" type="text/css"/>  
  15.                 <link rel="alternate" type="application/rss+xml" title="RSS" href="http://feed.feedsky.com/wolfit"/>  
  16.                 <xsl:element name="script">  
  17.                     <xsl:attribute name="type">text/javascript</xsl:attribute>  
  18.                     <xsl:attribute name="src">/xslt/xsl.js</xsl:attribute>  
  19.                 </xsl:element>  
  20.                 <xsl:element name="script">  
  21.                     <xsl:attribute name="type">text/javascript</xsl:attribute>  
  22.                     <xsl:attribute name="src">/xslt/tip.js</xsl:attribute>  
  23.                 </xsl:element>  
  24.                 <xsl:element name="script">  
  25.                     <xsl:attribute name="type">text/javascript</xsl:attribute>  
  26.                     <xsl:attribute name="src">/xslt/common.js</xsl:attribute>  
  27.                 </xsl:element>  
  28.                 <xsl:element name="base">  
  29.                     <xsl:attribute name="href"><xsl:value-of select="$srclink"/></xsl:attribute>  
  30.                 </xsl:element>  
  31.             </head>  
  32.             <xsl:apply-templates select="rss/channel"/>  
  33.         </html>  
  34.     </xsl:template>  
  35.     <xsl:template match="channel">  
  36. <body onload="go_decoding();">  
  37.   
  38. <DIV id="TipLayer" style="visibility:hidden;position:absolute;z-index:1000;top:-100;text-align:left;font-size:12px;"/>  
  39.       
  40. <div id="header">  
  41.         <h1><a href="{link}" style="text-decoration:none;"><xsl:value-of select="$title"/></a></h1>  
  42.     <p id="desc"><xsl:value-of select="description" disable-output-escaping="yes"/></p>  
  43. </div>    
  44.       
  45. <div id="navigator">  
  46. <ul>  
  47. <li><strong>Feed订阅:</strong>这是一个可以使用RSS阅读器进行订阅的页面，您可以将这个地址添加到您习惯使用的RSS阅读器中。</li>  
  48. <li><strong>在线订阅：</strong>下面列出了常用的几款在线RSS阅读器的快捷订阅图标，您可以直接点击进行订阅。</li>  
  49. <li>  
  50.   
  51.     <a href="http://www.xianguo.com/subscribe.php?url=http://feed.feedsky.com/wolfit">  
  52.     <img src="http://img.feedsky.com/images/icon_subshot02_xianguo.jpg" border="0" alt="订阅到鲜果"/></a>  
  53.   
  54.     <a href="http://www.zhuaxia.com/add_channel.php?url=http://feed.feedsky.com/wolfit">  
  55.     <img src="http://img.feedsky.com/images/icon_subshot02_zhuaxia.gif" border="0" alt="订阅到抓虾"/></a>  
  56.   
  57.     <a href="http://www.pageflakes.com/subscribe.aspx?url=http://feed.feedsky.com/wolfit">  
  58.     <img src="http://img.feedsky.com/images/icon_subshot02_pageflakes.gif" border="0" alt="订阅到飞鸽"/></a>  
  59.   
  60.   
  61.     <a href="http://www.netvibes.com/subscribe.php?url=http://feed.feedsky.com/wolfit">  
  62.     <img src="http://img.feedsky.com/images/icon_subshot02_netvibes.gif" border="0" alt="netvibes"/></a>  
  63.   
  64.     <a href="http://fusion.google.com/add?feedurl=http://feed.feedsky.com/wolfit">  
  65.     <img src="http://img.feedsky.com/images/icon_subshot02_google.gif" border="0" alt="google reader"/></a>  
  66.   
  67.     <a href="http://add.my.yahoo.com/rss?url=http://feed.feedsky.com/wolfit">  
  68.     <img src="http://img.feedsky.com/images/icon_subshot02_yahoo.gif" border="0" alt="my yahoo"/></a>  
  69.   
  70.   
  71.     <a href="http://www.rojo.com/add-subscription?resource=http://feed.feedsky.com/wolfit">  
  72.     <img src="http://img.feedsky.com/images/icon_subshot02_rojo.gif" border="0" alt="Rojo"/></a>  
  73.   
  74.     <a href="http://www.newsgator.com/ngs/subscriber/subfext.aspx?url=http://feed.feedsky.com/wolfit">  
  75.     <img src="http://img.feedsky.com/images/icon_subshot02_newsgator.gif" border="0" alt="Newsgator"/></a>  
  76.   
  77.     <a href="http://www.bloglines.com/sub/http://feed.feedsky.com/wolfit">  
  78.     <img src="http://img.feedsky.com/images/icon_subshot02_bloglines.gif" border="0" alt="bloglines"/></a>  
  79.   
  80.   
  81.     <a href="http://reader.yodao.com/#url=http://feed.feedsky.com/wolfit">  
  82.     <img src="http://img.feedsky.com/images/icon_subshot02_youdao.gif" border="0" alt="订阅到有道"/></a>  
  83.       
  84.     <a href="http://inezha.com/add?url=http://feed.feedsky.com/wolfit">  
  85.     <img src="http://www.wilf.cn/image/wz/icon_subshot02_inezha.jpg" border="0" alt="Subscribe by Anothr"/></a>  
  86.       
  87.     <a href="http://www.feedsky.com/msub_wr.html?burl=wolfit">  
  88.     <img src="http://www.wilf.cn/image/wz/icon_subshot02_email.gif" border="0" alt="Subscribe by Anothr"/></a>  
  89.       
  90. </li>  
  91.   
  92. <li><strong> 手机阅读：</strong><label id="feedurl" value="{$selfFeedUrl}" value_2="http://feed.feedsky.com/wolfit" style="font-weight:bold;" onMouseOver="stm(Text[0],Style[0])" onMouseOut="htm()"/> <script type="text/javascript" language="JavaScript">  
  93.   
  94.     function wrapURL(){  
  95.     var sp=document.getElementById("feedurl");  
  96.     var wrapUrl=sp.getAttribute("value");  
  97.     if(wrapUrl==""){  
  98.         wrapUrl=sp.getAttribute("value_2");;  
  99.     }  
  100.     if(wrapUrl.toLowerCase().substring(0,7)=="http://")  
  101.     {wrapUrlwrapUrl = wrapUrl.substring(7);}  
  102.     var arr=new Array();  
  103.     arr=wrapUrl.split('/');  
  104.     var p="";  
  105.     if(arr.length==1)  
  106.     {p=arr[0];  
  107.     }else if(arr.length==2)  
  108.     {p=arr[1];  
  109.     }else{  
  110.     p=wrapUrl.substring(wrapUrl.indexOf("/")+1);}  
  111.     var textNode=document.createTextNode("http://wap.feedsky.com/"+p);  
  112.     sp.appendChild(textNode);  
  113.     return true;}  
  114.   
  115.     wrapURL();</script>  
  116.       
  117.     <a href="http://feed.feedsky.com/wolfit" title="简单生活" target="_blank"><img src="http://www.feedsky.com/feed/wolfit/sc/orange.gif" style="border:0;float:right;display:inline;" align="middle" alt="" /></a>  
  118. </li>  
  119.       
  120. <!-- <li><span id="wap">      
  121. <script language="javascript">  
  122.     /*M_CR = 0;  
  123.     M_SOURCE = "feedsky";  
  124.     write_form();  
  125.     fillPhone();  
  126.     fillSelect(0);  
  127.     document.m_form.m_mobile.options.selectedIndex = 0;  
  128. */  
  129. </script>  
  130. </span>  
  131. </li> -->  
  132.   
  133.  </ul>  
  134.   
  135. </div>  
  136.       
  137.       
  138.       
  139. <div id="main">  
  140. <div id="content">  
  141. <ul id="item">  
  142. <xsl:apply-templates select="item"/>  
  143. </ul>  
  144. <div class="clear"><!-- --></div>  
  145. </div>  
  146. </div>  
  147.       
  148. <script language="javascript" type="text/javascript">autoSetImgSize("item","98%");</script>               
  149.           
  150. <div id="copyright">  
  151.     <p>@ 2007-2008 <a href="http://www.wilf.cn">Wilf.cn</a><br/>图文版权归本人所有,模版版权归Feedsky所有</p>  
  152.         <a href="http://www.wilf.cn"><img src="http://www.wilf.cn/image/logo.gif" border="0"/></a>  
  153. </div>  
  154.   
  155. </body>  
  156.     </xsl:template>  
  157.     <xsl:template match="item">  
  158.                   
  159.         <li class="regularitem">  
  160. <h3><a href="{link}"><xsl:value-of select="title"/></a></h3>  
  161. <span class="date"> <xsl:value-of select="pubDate"/></span>  
  162.               
  163.     <p name="decodeable" class="itemcontent"><xsl:call-template name="outputContent"/></p>  
  164.   
  165.  <xsl:if test="count(child::enclosure)=1">  
  166.                 <dd>  
  167.                     <a href="{enclosure/@url}">  
  168.                         <img src="http://img.feedsky.com/images/listen.gif" style="vertical-align: middle; padding-left: 4px;"/>  
  169.                     </a>  
  170.                 </dd>  
  171.             </xsl:if>  
  172.   
  173. </li>  
  174.           
  175.     </xsl:template>  
  176.     <xsl:template match="image">  
  177.         <xsl:element name="img" namespace="http://www.w3.org/1999/xhtml">  
  178.             <xsl:attribute name="src"><xsl:value-of select="url"/></xsl:attribute>  
  179.             <xsl:attribute name="alt">  
  180.                 Link to <xsl:value-of select="title"/></xsl:attribute>  
  181.             <xsl:attribute name="id">feedimage</xsl:attribute>  
  182.         </xsl:element>  
  183.         <xsl:text> </xsl:text>  
  184.     </xsl:template>  
  185.     <xsl:template match="feedsky:browserFriendly" xmlns:feedsky="http://namespace.org/feedsky/ext/1.0">  
  186.         <p id="ownerblurb" xmlns="http://www.w3.org/1999/xhtml">  
  187.             <em>A message from the feed publisher:</em>  
  188.             <xsl:text> </xsl:text>  
  189.             <xsl:apply-templates/>  
  190.         </p>  
  191.     </xsl:template>  
  192.     <xsl:template name="outputContent">  
  193.         <xsl:choose>  
  194.             <xsl:when test="xhtml:body" xmlns:xhtml="http://www.w3.org/1999/xhtml">  
  195.                 <xsl:copy-of select="xhtml:body/*"/>  
  196.             </xsl:when>  
  197.             <xsl:when test="xhtml:div" xmlns:xhtml="http://www.w3.org/1999/xhtml">  
  198.                 <xsl:copy-of select="xhtml:div"/>  
  199.             </xsl:when>  
  200.             <xsl:when test="content:encoded" xmlns:content="http://purl.org/rss/1.0/modules/content/">  
  201.                 <xsl:value-of select="content:encoded" disable-output-escaping="yes"/>  
  202.             </xsl:when>  
  203.             <xsl:when test="description">  
  204.                 <xsl:value-of select="description" disable-output-escaping="yes"/>  
  205.             </xsl:when>  
  206.         </xsl:choose>  
  207.     </xsl:template>  
  208. </xsl:stylesheet>  

可以看到，在这个XSLT文件中不仅包含里几个javascript文件和css样式表，更是写入了一些html代码，Z-Blog自带了一个XSLT，如同Z的一贯风格一样简洁。不太满意，于是修改了feedsky到XSLT，也就是上面的代码，效果还不错。

地址在这里：http://www.wilf.cn/rss.xml  （IE打开，Firefox就看不到效果了，好像IE下有提示脚本错误，先不管了...）

Tags:         
发布:狼的旋律 | 分类:设计开发 | 评论:4 | 引用:0 | 浏览:
« Levi's 品牌介绍[转]设计和布局之间的思考 »
    Gravatar头像
  • quote 1.周周
  • 2008-11-2 22:03:05 回复
  • 我来学习下,好文章
    Gravatar头像
  • quote 2.seavon
  • 2008-12-12 15:47:30 回复
  • 你这个代码的怎么弄的啊，我的是系统默认的，和其他不协调，有时间指导下哦
    Gravatar头像
  • quote 3.补肾
  • 2009-1-10 14:38:10 回复
  • 很好，就是不知道怎么用
    Gravatar头像
  • quote 4.James
  • 2010-2-27 14:00:18 回复
  • 请问你的这个代码应该怎么使用啊

发表评论:

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

关注我

本类热点

最新评论及回复

赞助商链接

Powered By Z-Blog 1.8 Walle Build 91204
Copyright © 2007-2011 Wilf.cn. Some Rights Reserved