插件 jQuery.rss 中文 API 文档

🌙
手机阅读
本文目录结构

插件 jQuery.rss 中文 API 文档

此插件可用于读取 RSS 源并将其转换为自定义的 HTML 片段。

建立

<!DOCTYPE html>
<html>
  <head>
    <title>jquery.rss example</title>
    <script src="lib/jquery-1.6.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
    <script src="src/jquery.rss.js"></script>
    <script>
      jQuery(function($) {
        $("#rss-feeds").rss("http://feeds.feedburner.com/premiumpixels")
      })
    </script>
  </head>
  <body>
    <div id="rss-feeds"></div>
  </body>
</html>

以上代码的演示链接:http://embed.plnkr.co/WQRoCYLld162uplnz1rc/preview

注意:Moment.js 是可选的。如果包含它,jquery.rss 将使用它来格式化日期。如果您不想包含 Moment.js,您可以选择提供自己的日期格式化功能,或者根本不选择格式化日期。

选项

$("#rss-feeds").rss(
  "http://feeds.feedburner.com/premiumpixels",
  {
    // how many entries do you want?
    // default: 4
    // valid values: any integer
    limit: 10,

    // want to offset results being displayed?
    // default: false
    // valid values: any integer
    offsetStart: false, // offset start point
    offsetEnd: false, // offset end point

    // will request the API via https
    // default: false
    // valid values: false, true
    ssl: true,

    // which server should be requested for feed parsing
    // the server implementation is here: https://github.com/sdepold/feedr
    // default: feedrapp.info
    // valid values: any string
    host: 'my-own-feedr-instance.com',

    // outer template for the html transformation
    // default: "<ul>{entries}</ul>"
    // valid values: any string
    layoutTemplate: "<div class='feed-container'>{entries}</div>",

    // inner template for each entry
    // default: '<li><a href="{url}">[{author}@{date}] {title}</a><br/>{shortBodyPlain}</li>'
    // valid values: any string
    entryTemplate: '<p>{title}</p>',

    // additional token definition for in-template-usage
    // default: {}
    // valid values: any object/hash
    tokens: {
      foo: 'bar',
      bar: function(entry, tokens) { return entry.title }
    },

    // formats the date with moment.js (optional)
    // default: 'dddd MMM Do'
    // valid values: see http://momentjs.com/docs/#/displaying/
    dateFormat: 'MMMM Do, YYYY',

    // localizes the date with moment.js (optional)
    // default: 'en'
    dateLocale: 'de',

    // formats the date in whatever manner you choose. (optional)
    // this function should return your formatted date.
    // this is useful if you want to format dates without moment.js.
    // if you don't use moment.js and don't define a dateFormatFunction, the dates will
    // not be formatted; they will appear exactly as the RSS feed gives them to you.
    dateFormatFunction: function(date){},

    // the effect, which is used to let the entries appear
    // default: 'show'
    // valid values: 'show', 'slide', 'slideFast', 'slideSynced', 'slideFastSynced'
    effect: 'slideFastSynced',

    // a callback, which gets triggered when an error occurs
    // default: function() { throw new Error("jQuery RSS: url don't link to RSS-Feed") }
    error: function(){},

    // a callback, which gets triggered when everything was loaded successfully
    // this is an alternative to the next parameter (callback function)
    // default: function(){}
    success: function(){},

    // a callback, which gets triggered once data was received but before the rendering.
    // this can be useful when you need to remove a spinner or something similar
    onData: function(){}
  },

  // callback function
  // called after feeds are successfully loaded and after animations are done
  function callback() {}
)

请注意主机选项

从版本 3.0.0 开始,该插件不再使用 Google Feed API,而是一个名为 feedr 的替代品。该服务器当前正在 Heroku 上运行,可能会有一些停机,中断或意外问题。虽然我会尽量避免这些问题,但它可能会不时发生。我可能会将服务转移到其他一些提供或甚至改进基础设施。

如果您不想依赖提供的服务器而是运行自己的版本,则可以下载 feedr,安装依赖项并运行它。如上所述,您可以使用该 host 选项指定用于解析订阅源的主机。

模板

如选项中所示,您可以指定模板以将 json 对象转换为 HTML。为此,您可以定义外部模板(描述条目周围的 html)或条目模板(描述条目的 html)。

这些模板的基本格式是:

# layoutTemplate:
"<outer-html>{entries}</outer-html>"

# entryTemplate:
"<any-html>{token1}{token2}</any-html>"

所以,假设你使用 upper 伪 html 指定了 2 的限制。这将导致以下结果:

<outer-html>
  <any-html>{token1}{token2}</any-html>
  <any-html>{token1}{token2}</any-html>
</outer-html>

有一些预定义的令牌:

  • 网址:帖子的网址
  • 作者:该帖子的作者
  • 日期:发布日期
  • 标题:帖子的标题
  • body:帖子的完整内容
  • shortBody:帖子的缩短内容
  • bodyPlain:没有 html 的帖子的完整内容
  • shortBodyPlain:没有 html 的帖子的缩短内容
  • teaserImage:帖子正文中的第一张图片
  • teaserImageUrl:帖子正文中第一张图片的网址
  • index:当前条目的索引
  • totalEntries:条目的总数
  • Feed:包含 Feed 的高级信息(例如网站标题)

您还可以使用以下 tokens 选项定义自定义标记:

$('#foo').rss(url, {
  entryTemplate: "{dynamic}, {static}, {re-use}",
  tokens: {
    dynamic: function(entry, tokens){ return "dynamic-stuff: " + entry.title },
    "re-use": function(entry, tokens){ return encodeURIComponent(tokens.teaserImageUrl) },
    static: "static"
  }
})

请确保不要定义无限循环。以下示例真的很糟糕:

$('#foo').rss(url, {
  entryTemplate: "{loop}",
  tokens: {
    whoops: function(entry, tokens) { return tokens.loop() }
    loop: function(entry, tokens) { return tokens.whoops() }
  }
})

这是一个现实世界的例子:

$('#foo').rss(url, {
  layoutTemplate: "<table><tr><th>Title</th></tr>{entries}</table>",
  entryTemplate:  "<tr><td>{title}</td></tr>"
})

过滤

该插件还允许您过滤特定条目,以便只打印它们:

$("#foo").rss(url, {
  limit: 100,
  filterLimit: 10,
  filter: function(entry, tokens) {
    return tokens.title.indexOf('my filter') > -1
  }
})

这将通过 Feed API 请求 100 个条目,并呈现前 10 个匹配条目。

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

书籍推荐