How to Easily display Digg posts via XSLT using Digg Api
如何使用Digg Api通过XSLT轻松显示Digg帖子
As we know, Digg become very popular last time, so why not use it for our purposes? I decided to investigate Digg a little and learn how possible to draw Digg posts at my own website. And I make own unique method. Hope you will like it. Reading http://digg.com/api/docs/1.0/groups/ I find necessary ways to get posts XML results. Just check story.getPopular method. Yes, this is usual to use different reparse methods in PHP, but lets learn something new like XSLT (Extensible Stylesheet Language Transformations).
众所周知,Digg上次变得非常流行,那么为什么不将其用于我们的目的呢? 我决定对Digg进行一些调查,并了解如何在自己的网站上绘制Digg帖子。 我自己做独特的方法。 希望你会喜欢。 阅读http://digg.com/api/docs/1.0/groups/我找到了获取帖子XML结果的必要方法。 只需检查story.getPopular方法即可。 是的,通常在PHP中使用不同的reparse方法,但是可以学习XSLT(可扩展样式表语言转换)之类的新东西。
[sociallocker]
[社交储物柜]
打包下载
[/sociallocker]
[/ sociallocker]
步骤1. PHP (Step 1. PHP)
Ok, here are all used PHP files:
好的,这是所有使用过PHP文件:
index.php (index.php)
This file will generate list of Digg stories. As you can see – I already put several samples ($sMethod values) for different methods. So you can try any method. All code commented, so I hope it will easy to understand it.
该文件将生成Digg故事列表。 如您所见–我已经为不同的方法放置了几个示例($ sMethod值)。 因此,您可以尝试任何方法。 所有代码均已注释,因此希望它易于理解。
<?php
// $sMethod = 'http://services.digg.com/1.0/endpoint?method=story.getHot';
$sMethod = 'http://services.digg.com/1.0/endpoint?method=story.getTop';
// $sMethod = 'http://services.digg.com/1.0/endpoint?method=story.getPopular';
// $sMethod = 'http://services.digg.com/1.0/endpoint?method=story.getUpcoming';
$sXmlSrc = getDiggStoriesXml($sMethod);
// Load the XML source
$xml = new DOMDocument;
$xml->loadXML($sXmlSrc);
// Load XSLT
$xsl = new DOMDocument;
$xsl->load('xslt/digg.xslt');
// Configure the transformer
$proc = new XSLTProcessor;
$proc->importStyleSheet($xsl); // attach the xsl rules
echo '<link media="all" href="css/styles.css" type="text/css" rel="stylesheet">';
echo $proc->transformToXML($xml);
// this function get digg information using caching (not more 1 times per minute)
function getDiggStoriesXml($sUrl = 'http://services.digg.com/1.0/endpoint?method=story.getPopular') {
// used cache folder
$sCacheFolder = 'cache/';
// formatting cache name
$sFilename = date("YmdHi").'.xml';
if (! file_exists($sCacheFolder.$sFilename)) {
//grab the XML and save it to a temp XML file
$ch = curl_init($sUrl);
$fp = fopen($sCacheFolder.$sFilename, "w");
curl_setopt($ch, CURLOPT_FILE, $fp);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_HTTPHEADER, Array("User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.15) Gecko/20080623 Firefox/2.0.0.15") ); // makes our request look like it was made by Firefox
curl_exec($ch);
curl_close($ch);
fclose($fp);
}
return file_get_contents($sCacheFolder.$sFilename);
}
?>
<?php
// $sMethod = 'http://services.digg.com/1.0/endpoint?method=story.getHot';
$sMethod = 'http://services.digg.com/1.0/endpoint?method=story.getTop';
// $sMethod = 'http://services.digg.com/1.0/endpoint?method=story.getPopular';
// $sMethod = 'http://services.digg.com/1.0/endpoint?method=story.getUpcoming';
$sXmlSrc = getDiggStoriesXml($sMethod);
// Load the XML source
$xml = new DOMDocument;
$xml->loadXML($sXmlSrc);
// Load XSLT
$xsl = new DOMDocument;
$xsl->load('xslt/digg.xslt');
// Configure the transformer
$proc = new XSLTProcessor;
$proc->importStyleSheet($xsl); // attach the xsl rules
echo '<link media="all" href="css/styles.css" type="text/css" rel="stylesheet">';
echo $proc->transformToXML($xml);
// this function get digg information using caching (not more 1 times per minute)
function getDiggStoriesXml($sUrl = 'http://services.digg.com/1.0/endpoint?method=story.getPopular') {
// used cache folder
$sCacheFolder = 'cache/';
// formatting cache name
$sFilename = date("YmdHi").'.xml';
if (! file_exists($sCacheFolder.$sFilename)) {
//grab the XML and save it to a temp XML file
$ch = curl_init($sUrl);
$fp = fopen($sCacheFolder.$sFilename, "w");
curl_setopt($ch, CURLOPT_FILE, $fp);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_HTTPHEADER, Array("User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.15) Gecko/20080623 Firefox/2.0.0.15") ); // makes our request look like it was made by Firefox
curl_exec($ch);
curl_close($ch);
fclose($fp);
}
return file_get_contents($sCacheFolder.$sFilename);
}
?>
步骤2. CSS (Step 2. CSS)
Here are used CSS styles.
这是使用CSS样式。
css / styles.css (css/styles.css)
.news-summary, .news-full, .news-full-confirm {
background:none repeat scroll 0 0 #F3F3F3;
border:1px solid #CCCCCC;
clear:left;
margin:10px;
min-height:55px;
padding:10px;
position:relative;
}
.news-body {
padding-left: 60px;
}
.news-body a.body {
text-decoration: none;
padding: 4px;
margin: -4px 0 -4px -4px;
color: #555;
position: relative;
z-index: 2;
}
.news-summary .news-body em {
color: #999;
white-space: nowrap;
}
.news-body em a {
color: #777;
text-decoration: none;
border-bottom: 1px solid #ddd;
}
.news-body em a:hover {
color: #000;
}
.news-digg {
position: absolute;
top: 0.8em;
left: 0;
text-align: center;
font-size: 85%;
margin: 0 0 0 3px;
padding: 0;
list-style: none;
background: url(../img/shade-news.gif) no-repeat;
}
.digg-count a, .digg-count span {
display: block;
padding: 10px 0 4px 0;
text-decoration: none;
width: 50px;
min-height: 40px;
color: #93883F;
text-align: center;
}
.news-summary .digg-count strong {
font-size: 160%;
font-weight: normal;
letter-spacing: -1px;
line-height: 1;
display: block;
color: #736926;
}
.digg-count img {
position: absolute;
top: 0;
left: 0;
border: none;
}
.digg-count a:hover, .digg-count a:hover strong {
color: #998D43;
}
.news-body h3 {
margin: 2px 0 0 0;
font-size: 115%;
letter-spacing: -0.01em;
font-weight: bold;
line-height: 1.1;
}
.news-body p {
margin: 0.2em 0 0.1em 0;
line-height: 1.3;
}
.news-body em {
font-style: normal;
font-size: 85%;
color: #666;
}
span.news-img {
display: block;
width: 80px;
height: 80px;
background: #ddecee url(../img/v-default.gif);
border: 1px solid #a5c2e3;
position: absolute;
left: 60px;
top: 8px;
}
.img-summary span.news-img {
background: #ddecee url(../img/i-default.gif);
}
span.news-img em {
display: block;
width: 80px;
height: 80px;
text-indent: -2000em;
background: url(../img/v-frame-simple.png);
}
.img-summary span.news-img em {
background: url(../img/i-frame-simple.png);
}
.v .news-body {
margin-left:0;
min-height:70px;
padding-left:152px;
padding-right:0;
}
.comments {
background:transparent url(../img/i-cmts.gif) no-repeat scroll 0 4px;
word-spacing:-0.1em;
color:#578CCA;
padding:4px 6px 4px 18px;
font-size:85%;
}
.news-summary, .news-full, .news-full-confirm {
background:none repeat scroll 0 0 #F3F3F3;
border:1px solid #CCCCCC;
clear:left;
margin:10px;
min-height:55px;
padding:10px;
position:relative;
}
.news-body {
padding-left: 60px;
}
.news-body a.body {
text-decoration: none;
padding: 4px;
margin: -4px 0 -4px -4px;
color: #555;
position: relative;
z-index: 2;
}
.news-summary .news-body em {
color: #999;
white-space: nowrap;
}
.news-body em a {
color: #777;
text-decoration: none;
border-bottom: 1px solid #ddd;
}
.news-body em a:hover {
color: #000;
}
.news-digg {
position: absolute;
top: 0.8em;
left: 0;
text-align: center;
font-size: 85%;
margin: 0 0 0 3px;
padding: 0;
list-style: none;
background: url(../img/shade-news.gif) no-repeat;
}
.digg-count a, .digg-count span {
display: block;
padding: 10px 0 4px 0;
text-decoration: none;
width: 50px;
min-height: 40px;
color: #93883F;
text-align: center;
}
.news-summary .digg-count strong {
font-size: 160%;
font-weight: normal;
letter-spacing: -1px;
line-height: 1;
display: block;
color: #736926;
}
.digg-count img {
position: absolute;
top: 0;
left: 0;
border: none;
}
.digg-count a:hover, .digg-count a:hover strong {
color: #998D43;
}
.news-body h3 {
margin: 2px 0 0 0;
font-size: 115%;
letter-spacing: -0.01em;
font-weight: bold;
line-height: 1.1;
}
.news-body p {
margin: 0.2em 0 0.1em 0;
line-height: 1.3;
}
.news-body em {
font-style: normal;
font-size: 85%;
color: #666;
}
span.news-img {
display: block;
width: 80px;
height: 80px;
background: #ddecee url(../img/v-default.gif);
border: 1px solid #a5c2e3;
position: absolute;
left: 60px;
top: 8px;
}
.img-summary span.news-img {
background: #ddecee url(../img/i-default.gif);
}
span.news-img em {
display: block;
width: 80px;
height: 80px;
text-indent: -2000em;
background: url(../img/v-frame-simple.png);
}
.img-summary span.news-img em {
background: url(../img/i-frame-simple.png);
}
.v .news-body {
margin-left:0;
min-height:70px;
padding-left:152px;
padding-right:0;
}
.comments {
background:transparent url(../img/i-cmts.gif) no-repeat scroll 0 4px;
word-spacing:-0.1em;
color:#578CCA;
padding:4px 6px 4px 18px;
font-size:85%;
}
步骤3. XSLT (Step 3. XSLT)
I hope this is most interesting part of my story, used XSLT rules:
我希望这是我的故事中最有趣的部分,使用了XSLT规则:
xslt / digg.xslt (xslt/digg.xslt)
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<!-- <xsl:output method='html' version='1.0' encoding='UTF-8' indent='yes'/> -->
<xsl:template match="stories">
<html>
<body>
<xsl:for-each select="story">
<div>
<xsl:attribute name="class">
<xsl:choose>
<xsl:when test="thumbnail">news-summary v img-summary</xsl:when>
<xsl:otherwise>news-summary</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
<div class="news-body">
<h3>
<a target="_blank">
<xsl:attribute name="title"><xsl:value-of select="@link"/></xsl:attribute>
<xsl:attribute name="href">
<xsl:for-each select="shorturl">
<xsl:value-of select="@short_url"/>
</xsl:for-each>
</xsl:attribute>
<xsl:value-of select="title"/>
<xsl:for-each select="thumbnail">
<span style="background-attachment:scroll;background-color:transparent;background-position:0 0;background-repeat:repeat;" class="news-img">
<xsl:attribute name="style">background: transparent url(<xsl:choose>
<xsl:when test="string-length(@src) > 0">
<xsl:value-of select="@src" />
</xsl:when>
</xsl:choose>) repeat scroll 0% 0%;</xsl:attribute>
<em>view!</em></span>
</xsl:for-each>
</a>
</h3>
<div>
<p>
<a class="body" style="color:#555;">
<xsl:attribute name="href"><xsl:value-of select="@href"/></xsl:attribute>
<xsl:value-of select="description"/>
</a>
<em>(Submitted by <a>
<xsl:for-each select="user">
<xsl:attribute name="href">
http://digg.com/users/<xsl:choose>
<xsl:when test="string-length(@name) > 0">
<xsl:value-of select="@name" />
</xsl:when>
</xsl:choose>
</xsl:attribute>
<xsl:value-of select="@name" />
</xsl:for-each>
</a>)</em>
</p>
</div>
<div class="news-details">
<span class="tool comments">
<xsl:attribute name="title"><xsl:value-of select="title"/></xsl:attribute>
<xsl:value-of select="@comments"/> Comments</span>
</div>
</div>
<ul class="news-digg">
<li class="digg-count">
<a>
<xsl:attribute name="href"><xsl:value-of select="@href"/></xsl:attribute>
<xsl:attribute name="title"><xsl:value-of select="title"/></xsl:attribute>
<strong><xsl:value-of select="@diggs"/></strong> diggs</a>
</li>
</ul>
</div>
</xsl:for-each>
<xsl:comment>Copyright © AndrewP</xsl:comment>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<!-- <xsl:output method='html' version='1.0' encoding='UTF-8' indent='yes'/> -->
<xsl:template match="stories">
<html>
<body>
<xsl:for-each select="story">
<div>
<xsl:attribute name="class">
<xsl:choose>
<xsl:when test="thumbnail">news-summary v img-summary</xsl:when>
<xsl:otherwise>news-summary</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
<div class="news-body">
<h3>
<a target="_blank">
<xsl:attribute name="title"><xsl:value-of select="@link"/></xsl:attribute>
<xsl:attribute name="href">
<xsl:for-each select="shorturl">
<xsl:value-of select="@short_url"/>
</xsl:for-each>
</xsl:attribute>
<xsl:value-of select="title"/>
<xsl:for-each select="thumbnail">
<span style="background-attachment:scroll;background-color:transparent;background-position:0 0;background-repeat:repeat;" class="news-img">
<xsl:attribute name="style">background: transparent url(<xsl:choose>
<xsl:when test="string-length(@src) > 0">
<xsl:value-of select="@src" />
</xsl:when>
</xsl:choose>) repeat scroll 0% 0%;</xsl:attribute>
<em>view!</em></span>
</xsl:for-each>
</a>
</h3>
<div>
<p>
<a class="body" style="color:#555;">
<xsl:attribute name="href"><xsl:value-of select="@href"/></xsl:attribute>
<xsl:value-of select="description"/>
</a>
<em>(Submitted by <a>
<xsl:for-each select="user">
<xsl:attribute name="href">
http://digg.com/users/<xsl:choose>
<xsl:when test="string-length(@name) > 0">
<xsl:value-of select="@name" />
</xsl:when>
</xsl:choose>
</xsl:attribute>
<xsl:value-of select="@name" />
</xsl:for-each>
</a>)</em>
</p>
</div>
<div class="news-details">
<span class="tool comments">
<xsl:attribute name="title"><xsl:value-of select="title"/></xsl:attribute>
<xsl:value-of select="@comments"/> Comments</span>
</div>
</div>
<ul class="news-digg">
<li class="digg-count">
<a>
<xsl:attribute name="href"><xsl:value-of select="@href"/></xsl:attribute>
<xsl:attribute name="title"><xsl:value-of select="title"/></xsl:attribute>
<strong><xsl:value-of select="@diggs"/></strong> diggs</a>
</li>
</ul>
</div>
</xsl:for-each>
<xsl:comment>Copyright © AndrewP</xsl:comment>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
步骤4.图片 (Step 4. Images)
Also we need several images for our project:
另外,我们的项目需要一些图像:
步骤5.少有重要的事情 (Step 5. Few important things)
After reading http://digg.com/api/docs/concepts I found ‘Be Polite, Please!’, so I decode not request Digg api any time when user call it, and I made way using cache system. I started caching results. I created ‘cache’ folder with permission to write (you should create ‘cache’ folder too). After I put .htaccess file in it with next text: Options -Indexes
阅读http://digg.com/api/docs/concepts后,我发现“请礼貌,请!”,因此在用户调用它时,我不会随时解码Digg api,因此我使用了缓存系统。 我开始缓存结果。 我创建了具有写权限的“缓存”文件夹(您也应该创建“缓存”文件夹)。 在我将.htaccess文件放入下一个文本之后:Options -Indexes
And now check index.php: $sFilename = date(“YmdHi”).’.xml’; So I using current year-month-day-hour-minute digits to generate cache filename. Hope you understand my idea :)
现在检查index.php:$ sFilename = date(“ YmdHi”)。'。xml'; 因此,我使用当前的年,月,日,小时,分钟数字生成缓存文件名。 希望你理解我的想法:)
结论 (Conclusion)
Today I told you how to display digg posts at your own website via XSLT transformations. Hope all my code easy to understand and comfortable to use. You can use this material to create own scripts into your startups. Good luck!
今天,我告诉您如何通过XSLT转换在自己的网站上显示digg帖子。 希望我所有的代码都易于理解和使用。 您可以使用此材料在创业公司中创建自己的脚本。 祝好运!
翻译自: https://www.script-tutorials.com/how-to-easily-display-digg-posts-via-xslt-using-digg-api/