如何使用XSLT转换构建标签云

最新推荐文章于 2024-05-07 14:55:18 发布

cuken7684698822

最新推荐文章于 2024-05-07 14:55:18 发布

阅读量98

点赞数

文章标签： css html xml java js ViewUI

原文链接：https://www.script-tutorials.com/how-to-build-tags-cloud-using-xslt-transformation/

版权

Tags cloud with XSLT. As all we know – tags cloud is some array of links at page where bigger units mean more important things. If your project have any interesting information (blogs, or other text content), it will useful to put cloud of tags at your homepage. Of course, one of way will just make all this using pure PHP to draw necessary links in different size, but lets try today to use xslt than just PHP. One of good side is that we can configure all necessary params (as example min font size and max font size, possible other details like different font classes if you want to use different colors etc) out of PHP logic.

使用XSLT标记云。众所周知，标签云是页面上某些链接的数组，其中较大的单位表示更重要的事情。如果您的项目有任何有趣的信息(博客或其他文本内容)，则将标签云放置在主页上将很有用。当然，一种方法只是使用纯PHP来绘制所有不同大小的必要链接，但是今天让我们尝试使用xslt而不只是PHP。好的一面是，我们可以从PHP逻辑中配置所有必要的参数(例如，最小字体大小和最大字体大小，可能的其他详细信息，例如，如果要使用不同的颜色，则使用不同的字体类等)。

Here are samples and downloadable package:

以下是示例和可下载的软件包：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, as example we have XML-based array of our cloud elements:

好的，例如，我们有基于XML的云元素数组：

<?xml version="1.0" encoding="utf-8" ?>
<cloud>
    <tag id="1">
        <name>web</name>
        <amount>2</amount>
    </tag>
    <tag id="2">
        <name>development</name>
        <amount>10</amount>
    </tag>
    <tag id="3">
        <name>php</name>
        <amount>6</amount>
    </tag>
    <tag id="4">
        <name>jQuery</name>
        <amount>2</amount>
    </tag>
    <tag id="5">
        <name>xhtml</name>
        <amount>10</amount>
    </tag>
    <tag id="6">
        <name>xslt</name>
        <amount>1</amount>
    </tag>
    <tag id="7">
        <name>css</name>
        <amount>7</amount>
    </tag>
    <tag id="8">
        <name>programming</name>
        <amount>8</amount>
    </tag>
</cloud>

<?xml version="1.0" encoding="utf-8" ?>
<cloud>
    <tag id="1">
        <name>web</name>
        <amount>2</amount>
    </tag>
    <tag id="2">
        <name>development</name>
        <amount>10</amount>
    </tag>
    <tag id="3">
        <name>php</name>
        <amount>6</amount>
    </tag>
    <tag id="4">
        <name>jQuery</name>
        <amount>2</amount>
    </tag>
    <tag id="5">
        <name>xhtml</name>
        <amount>10</amount>
    </tag>
    <tag id="6">
        <name>xslt</name>
        <amount>1</amount>
    </tag>
    <tag id="7">
        <name>css</name>
        <amount>7</amount>
    </tag>
    <tag id="8">
        <name>programming</name>
        <amount>8</amount>
    </tag>
</cloud>

As we can see – I put name of tag in NAME tag, and amount of repeating (weight) into AMOUNT tag. Here are ‘development’ and ‘xhtml’ is most popular words.

如我们所见–我将标签名称放入NAME标签，并将重复次数(权重)放入AMOUNT标签。这里是'development'和'xhtml'是最受欢迎的词。

And now we should to create our XSL part to perform transformation all this into user friendly view. Lets start coding all necessary files to our sample:

现在，我们应该创建XSL部分，以将所有这些转换为用户友好的视图。让我们开始将所有必要的文件编码为示例：

步骤1. PHP (Step 1. PHP)

Here are our php file which we using to transform our xml feed with tags:

这是我们的php文件，我们使用它来转换带有标签的xml feed：

index.php (index.php)

As we can see – I just load our XML file here and perform transformation. Of course this can be not just static XML file, but also and any PHP-based source of XML in your custom cases. If so – you will need just to make small changes in my code. But currently – static case will enough (our file will ‘cloud.xml’).

如我们所见–我只是在这里加载XML文件并执行转换。当然，在您的自定义案例中，这不仅可以是静态XML文件，还可以是任何基于PHP的XML源。如果是这样–您只需要在我的代码中进行一些小的更改。但是目前-静态大小写就足够了(我们的文件将为'cloud.xml')。

<?php
// Obtain cloud data from file
$sXmlSrc = file_get_contents('cloud.xml');
// Load the XML source
$xml = new DOMDocument;
$xml->loadXML($sXmlSrc);
// Load XSLT
$xsl = new DOMDocument;
$xsl->load('xslt/tagcloud.xslt');
$proc = new XSLTProcessor; // configure xslt processor
$proc->importStyleSheet($xsl); // attach the xsl rules
echo $proc->transformToXML($xml); // draw result tags cloud
?>

<?php
// Obtain cloud data from file
$sXmlSrc = file_get_contents('cloud.xml');
// Load the XML source
$xml = new DOMDocument;
$xml->loadXML($sXmlSrc);
// Load XSLT
$xsl = new DOMDocument;
$xsl->load('xslt/tagcloud.xslt');
$proc = new XSLTProcessor; // configure xslt processor
$proc->importStyleSheet($xsl); // attach the xsl rules
echo $proc->transformToXML($xml); // draw result tags cloud
?>

步骤2. CSS (Step 2. CSS)

Not so necessary step, but here are just few styles for our sample:

并非必需步骤，但以下是我们示例的几种样式：

css / styles.css (css/styles.css)

h1{text-align:center}
body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.main{background:#FFF;width:500px;font-size:80%;border:1px #000 solid;margin:3.5em auto 2em;padding:1em 2em 2em;overflow:hidden}
.main a{float:left;margin-right:5px;line-height:30px}

h1{text-align:center}
body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.main{background:#FFF;width:500px;font-size:80%;border:1px #000 solid;margin:3.5em auto 2em;padding:1em 2em 2em;overflow:hidden}
.main a{float:left;margin-right:5px;line-height:30px}

步骤3. XSLT (Step 3. XSLT)

And, most interesting part of my post – used XSLT rules:

而且，我的帖子中最有趣的部分是使用XSLT规则：

xslt / tagcloud.xslt (xslt/tagcloud.xslt)

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/">
        <html>
            <head>
                <link media="screen" href="css/styles.css" type="text/css" rel="stylesheet"/>
            </head>
            <body>
                <div class="main">
                    <h1>Tags cloud via XSLT</h1>
                    <xsl:apply-templates />
                </div>
            </body>
        </html>
    </xsl:template>
    <xsl:template match="cloud">
        <xsl:variable name="maxAmount" select="tag[not(amount &lt; ../tag/amount)]/amount" />
        <xsl:variable name="minValue" select="tag[not(amount &gt; ../tag/amount)]/amount" />
        <xsl:variable name="perc100" select="$maxAmount - $minValue"/>
        <xsl:variable name="perc1">
            <xsl:choose>
                <xsl:when test="$perc100 = 0">100</xsl:when>
                <xsl:otherwise><xsl:value-of select="100 div $perc100"/></xsl:otherwise>
            </xsl:choose>
        </xsl:variable>
        <xsl:variable name="maxFont">28</xsl:variable>
        <xsl:variable name="minFont">12</xsl:variable>
        <xsl:variable name="fontDiff" select="$maxFont - $minFont"/>
        <div>
        <xsl:for-each select="tag">
                <xsl:variable name="fontSize" select="$minFont + ceiling($fontDiff div 100 * ((amount - $minValue) * $perc1))"/>
                <a href="your_website_url/tag/{name}" style="font-size: {$fontSize}px">
                    <xsl:value-of select="name" />
                </a>
        </xsl:for-each>
        </div>
    </xsl:template>
</xsl:stylesheet>

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/">
        <html>
            <head>
                <link media="screen" href="css/styles.css" type="text/css" rel="stylesheet"/>
            </head>
            <body>
                <div class="main">
                    <h1>Tags cloud via XSLT</h1>
                    <xsl:apply-templates />
                </div>
            </body>
        </html>
    </xsl:template>
    <xsl:template match="cloud">
        <xsl:variable name="maxAmount" select="tag[not(amount &lt; ../tag/amount)]/amount" />
        <xsl:variable name="minValue" select="tag[not(amount &gt; ../tag/amount)]/amount" />
        <xsl:variable name="perc100" select="$maxAmount - $minValue"/>
        <xsl:variable name="perc1">
            <xsl:choose>
                <xsl:when test="$perc100 = 0">100</xsl:when>
                <xsl:otherwise><xsl:value-of select="100 div $perc100"/></xsl:otherwise>
            </xsl:choose>
        </xsl:variable>
        <xsl:variable name="maxFont">28</xsl:variable>
        <xsl:variable name="minFont">12</xsl:variable>
        <xsl:variable name="fontDiff" select="$maxFont - $minFont"/>
        <div>
        <xsl:for-each select="tag">
                <xsl:variable name="fontSize" select="$minFont + ceiling($fontDiff div 100 * ((amount - $minValue) * $perc1))"/>
                <a href="your_website_url/tag/{name}" style="font-size: {$fontSize}px">
                    <xsl:value-of select="name" />
                </a>
        </xsl:for-each>
        </div>
    </xsl:template>
</xsl:stylesheet>

I set max font size and min font size as maxFont and minFont variables. All other calculations need just for calculation of result font size (depends on ‘amount’ value of our tags). All results we will able to see by links above:

我将最大字体大小和最小字体大小设置为maxFont和minFont变量。所有其他计算仅需要计算结果字体大小(取决于标签的“金额”值)。我们将通过上面的链接看到所有结果：

转换结果

结论 (Conclusion)

I hope that today’s article will very useful for your projects. Good luck!

我希望今天的文章对您的项目非常有用。祝好运！

翻译自: https://www.script-tutorials.com/how-to-build-tags-cloud-using-xslt-transformation/

cuken7684698822

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何使用XSLT转换构建标签云

Tags cloud with XSLT. As all we know – tags cloud is some array of links at page where bigger units mean more important things. If your project have any interesting information (blogs, or other text c...
复制链接

扫一扫