我博客上的相关帖子(javascript)

时间:2016-01-08 01:12:01

标签: javascript jquery handlebars.js

所以我从ghost.org购买了一个模板和托管。不幸的是,它使用了把手,这是一种我不太熟悉的语言。我想通了,但是当我实现这个jquery文件,使用在把手中创建的标签将相关帖子添加到页面底部时,它无法正常工作。当我查看文件时,似乎很好。所以我想知道你们中是否有人能够找到基于原型编程的错误或错误。在github为dane cando致信该文件,但它不起作用。以下是相关帖子功能的javascript和把手文件中的ul类。

JavScript文件

(function($) {
  defaults = {
    feed: '/rss',
    titleClass: '.post-title',
    tagsClass: '.post-meta',
    limit: 5,
    debug: true,
    template: '<li><a href="{url}">{title}</a></li>',
    messages: {
      noRelated: 'No related posts were found.'
    }
  };

  function RelatedPosts(element, options) {
    this.element = element;
    this.options = $.extend({}, defaults, options);
    this.parseRss();
  };

  RelatedPosts.prototype.displayRelated = function(posts) {
    var self = this, count = 0;
    this._currentPostTags = this.getCurrentPostTags(this.options.tagsClass);
    var related = this.matchByTag(this._currentPostTags, posts), options = this.options;
    related.forEach(function(post) {
      var template = options.template.replace(/{[^{}]+}/g, function(key) {
        return post[key.replace(/[{}]+/g, '')] || '';
      });
      if (count < self.options.limit) {
        $(self.element).append($(template));
      }
      count++;
    });
    if (count == 0) {
      $(this.element).append($('<li>' + this.messages.noRelated + '</li>'));
    }
  };

  RelatedPosts.prototype.parseRss = function(pageNum, prevId, feeds) {
    var page = pageNum || 1, prevId = prevId || '', feeds = feeds || [], self = this;
    $.ajax({
        url: this.options.feed + '/' + page,
        type: 'GET'
      })
      .done(function(data, textStatus, xhr) {
        var curId = $(data).find('item > guid').text();
        if (curId != prevId) {
          feeds.push(data);
          self.parseRss(page + 1, curId, feeds);
        }
        else {
          var posts = self.getPosts(feeds);
          self.displayRelated(posts);
        }
      })
      .fail(function(e) {
        self.reportError(e);
      });
  };

  RelatedPosts.prototype.getCurrentPostTitle = function(titleClass) {
    if (titleClass[0] != '.') {
      titleClass = '.' + titleClass;
    }
    var postTitle = $(titleClass).text();
    if (postTitle.length < 1) {
      this.reportError("Couldn't find the post title with class: " + titleClass);
    }
    return postTitle;
  };

  RelatedPosts.prototype.getCurrentPostTags = function(tagsClass) {
    if (tagsClass[0] != '.') {
      tagsClass = '.' + tagsClass;
    }
    var tags = [];
    $(tagsClass + ' a').each(function() {
      tags.push($(this).text());
    });
    if (tags.length < 1) {
      this.reportError("Couldn't find any tags in this post");
    }
    return tags;
  };

  RelatedPosts.prototype.getPosts = function(feeds) {
    var posts = [], items = [];
    feeds.forEach(function(feed) {
      items = $.merge(items, $(feed).find('item'));
    });
    for (var i = 0; i < items.length; i++) {
     var item = $(items[i]);
      if (item.find('title').text() !== this.getCurrentPostTitle(this.options.titleClass)) {
        posts.push({
          title: item.find('title').text(),
          url: item.find('link').text(),
          content: item.find('description').text(),
          tags: $.map(item.find('category'), function(elem) {
            return $(elem).text();
          })
        });
      }
    }
    if (posts.length < 1) {
      this.reportError("Couldn't find any posts in feed: " + feed);
    }
    return posts;
  };

  RelatedPosts.prototype.reportError = function(error) {
    if (this.options.debug) {
      $(this.element).append($('<li>' + error + '</li>'));
    }
  };

  RelatedPosts.prototype.matchByTag = function(postTags, posts) {
    var matches = [];
    posts.forEach(function(post) {
      var beenAdded = false;
      post.tags.forEach(function(tag) {
        postTags.forEach(function(postTag) {
          if (postTag.toLowerCase() === tag.toLowerCase() && !beenAdded) {
            matches.push(post);
            beenAdded = true;
          }
        });
      });
    });
    if (matches.length < 1) {
      this.reportError("There are no closely related posts");
    }
    return matches;
  };

  $.fn.ghostRelated = function(options) {
    return this.each(function() {
      new RelatedPosts(this, options);
    });
  };

})(jQuery);

$('.related-posts').ghostRelated();

HTML列表

<ul class="related-posts">

</ul>

0 个答案:

没有答案