阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 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 个匹配条目。

      目录
      目录