javascript - 在网站中嵌入美味的 JSON 提要

Question

我想将我的delicious.com 链接嵌入到我的 CMS 驱动的网站中。我试图理解https://delicious.com/rss上的说明，但我不明白获取链接真正需要什么，例如在我的网站上按标签排序。

直到 2014 年 4 月，它才使用这样的代码：

<script type="text/javascript" src="http://feeds.delicious.com/v2/js/fachschule_gartenbau/Teichbau_allgemein?title=&amp;count=100&amp;sort=date&amp;extended"></script>

现在他们说他们将语法更改为http://feeds.delicious.com/v2/json/ ...

我试图用“json”替换代码中的“js”，但这没有用。有人有想法吗？

实际（和旧）代码例如：

<script type="text/javascript" src="http://feeds.delicious.com/v2/js/fachschule_gartenbau/gemüse+gemüsebau?title=&amp;count=100&amp;sort=alpha"></script>

脑袋里什么都没有。

此代码不起作用。可以在http://www.fachschule-gartenbau.de/gemuese.htm上查看

score 1 · Accepted Answer

聚会有点晚了，只是注意到我的标签云也被打破了。您现在必须自己下载 JSON，然后从中构建您的标签列表（或标签云）。或者，您当然也可以在 PHP 等服务器端构建一些东西，但我假设您想坚持使用基于 JavaScript 的客户端解决方案。

步骤是：

下载 JSON。
解析 JSON。
从中构建一些东西。

要下载 JSON，我通常会使用XMLHttpRequest().，但由于跨站点脚本保护，这在此处不起作用。所以我只是求助于在 HTML 标记中使用函数回调调用 JSON API （在这个例子中<script>我使用了用户名delicious ）：

<script type="text/javascript" src="http://feeds.delicious.com/v2/json/tags/delicious?callback=printDeliciousTags"></script>

这个脚本标签将处理第 1 步和第 2 步，然后将printDeliciousTags使用 JSON 的内容作为参数调用该函数，以便我们可以从中构建一些东西。

这是一个非常基本的实现，它按字母顺序对标签进行排序并将它们打印为无序列表：

var username = "delicious";
var ignoreFiletypes = true;
var minCount = 1;
var tagURLPrefix = "http://delicious.com/" + username + "/";

function printDeliciousTags(tags)
{
    var out = "";
    var visibleTags;

    // find all tags matching our min count and exclude filetypes as needed
    visibleTags = [];
    maxCount = 0;
    for (tag in tags) {
        if (tags.hasOwnProperty(tag)) {
            if (tags[tag] > maxCount) {
                maxCount = tags[tag];
            }
            if (
                tags[tag] >= minCount && 
                (!ignoreFiletypes || tag.indexOf(":") == -1)
            ) {
                visibleTags[visibleTags.length] = tag;
            }
        }
    }

    // sort the tags alphabetically (case-insensitive)
    visibleTags.sort(function (a, b) {
        return a.toLowerCase().localeCompare(b.toLowerCase());
    });

    // print the tags
    out += '<ul>';
    for (var i = 0; i < visibleTags.length; i++) {
        var tag;
        tag = visibleTags[i];
        out += '<li><a href="' + tagURLPrefix + tag + '">';
        out += tag + ' (' + tags[tag] + ' bookmarks)';
        out += '</a></li>';
    }
    out += '</ul>';
    document.getElementById("deliciousPlaceholder").innerHTML = out;

基本无序列表的完整 HTML 示例：

<html>
    <head>
    <title>Delicious JavaScript Tag API Replacement (Basic List)</title>
    </head>
    <body>
        <div id="deliciousPlaceholder"></div>
        <script type="text/javascript">
            var username = "delicious";
            var ignoreFiletypes = true;
            var minCount = 1;
            var tagURLPrefix = "http://delicious.com/" + username + "/";

            function printDeliciousTags(tags)
            {
                var out = "";
                var visibleTags;

                // find all tags matching our min count and exclude filetypes as needed
                visibleTags = [];
                maxCount = 0;
                for (tag in tags) {
                    if (tags.hasOwnProperty(tag)) {
                        if (tags[tag] > maxCount) {
                            maxCount = tags[tag];
                        }
                        if (
                            tags[tag] >= minCount && 
                            (!ignoreFiletypes || tag.indexOf(":") == -1)
                        ) {
                            visibleTags[visibleTags.length] = tag;
                        }
                    }
                }

                // sort the tags alphabetically (case-insensitive)
                visibleTags.sort(function (a, b) {
                    return a.toLowerCase().localeCompare(b.toLowerCase());
                });

                // print the tags
                out += '<ul>';
                for (var i = 0; i < visibleTags.length; i++) {
                    var tag;
                    tag = visibleTags[i];
                    out += '<li><a href="' + tagURLPrefix + tag + '">';
                    out += tag + ' (' + tags[tag] + ' bookmarks)';
                    out += '</a></li>';
                }
                out += '</ul>';
                document.getElementById("deliciousPlaceholder").innerHTML = out;
            }
        </script>
        <script type="text/javascript" src="http://feeds.delicious.com/v2/json/tags/delicious?callback=printDeliciousTags"></script>
    </body>
</html>

标签云的完整 HTML 示例：

<html>
    <head>
    <title>Delicious JavaScript Tag API Replacement (Tag Cloud)</title>
    </head>
    <body>
        <div id="deliciousPlaceholder"></div>
        <script type="text/javascript">
            var username = "delicious";
            var minFont = 14;
            var maxFont = 36;
            var ignoreFiletypes = true;
            var minCount = 1;
            var tagURLPrefix = "http://delicious.com/" + username + "/";

            function printDeliciousCloud(tags)
            {
                var out = "";
                var maxCount;
                var factor;
                var offset;
                var visibleTags;

                // find all tags matching our min count and exclude filetypes as needed
                visibleTags = [];
                maxCount = 0;
                for (tag in tags) {
                    if (tags.hasOwnProperty(tag)) {
                        if (tags[tag] > maxCount) {
                            maxCount = tags[tag];
                        }
                        if (
                            tags[tag] >= minCount && 
                            (!ignoreFiletypes || tag.indexOf(":") == -1)
                        ) {
                            visibleTags[visibleTags.length] = tag;
                        }
                    }
                }

                // sort the tags alphabetically (case-insensitive)
                visibleTags.sort(function (a, b) {
                    return a.toLowerCase().localeCompare(b.toLowerCase());
                });

                // the tag cloud looks nicer if we use a logarithmic function, so fit
                // one to our configured font sizes and min count
                factor = (minFont - maxFont) / (Math.log(minCount) - Math.log(maxCount));
                offset = maxFont - (factor * Math.log(maxCount));

                // print the tag cloud
                for (var i = 0; i < visibleTags.length; i++) {
                    var size;
                    var style;
                    var tag;
                    tag = visibleTags[i];
                    size = offset + (factor *  Math.log(tags[tag]));
                    style = 'text-decoration:none; color:#73adff; font-size:' + size + 'px;';
                    out += '<a href="' + tagURLPrefix + tag + '" style="' + style + '" title="' + tags[tag] + ' bookmarks">';
                    out += tag;
                    out += '</a>&nbsp; ';
                }
                document.getElementById("deliciousPlaceholder").innerHTML = out;
            }


        </script>
        <script type="text/javascript" src="http://feeds.delicious.com/v2/json/tags/delicious?callback=printDeliciousCloud"></script>
    </body>
</html>

javascript - 在网站中嵌入美味的 JSON 提要

1 回答 1

Related

Reference