Question

我尝试使用Behance API密钥使用大量不同的脚本，尝试创建通过管理Behance资料自动更新的在线投资组合。

我现在使用的是最简单的，仅使用jQuery，JSON，并通过Twitter与Bootstrap集成。

这是我的源代码：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Bootstrap Portfolio with Behance API &amp; jQuery</title>

  <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <link href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.min.css" rel="stylesheet">
  <link href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick-theme.min.css" rel="stylesheet">
  <link href="vendor/prism.css" rel="stylesheet">

  <!-- http://fontpair.co/ -->
  <link href="//fonts.googleapis.com/css?family=Quando|Judson" rel="stylesheet">

  <!-- Demo stylesheet -->
  <link href="demo.css" rel="stylesheet">
</head>

<body class="demo">

  <div class="demo-intro">
      <div class="container">
          <div class="row">
              <div class="col-lg-8 col-lg-offset-2">
                  <a href="http://siamkreative.com/">
                      <img src="https://secure.gravatar.com/avatar/f634817190acb57d0f3e61e7c68eabbb?s=160" alt="Julien Vernet" class="avatar img-circle">
                  </a>
                  <h1>Bootstrap Portfolio<br> with Behance API &amp; jQuery</h1>
                  <p class="lead">If you're using Behance to showcase your projects and you would like to embed your portfolio on your site, look no further.</p>
                  <p>This quick example show you how to retrieve your projects from Behance using their API, store the data in the browser, and display it using Bootstrap 3 markup. To render the template we use jQuery, but you could also use a template engine such as <a href="http://beebole.com/pure/">pure.js</a> or <a href="http://handlebarsjs.com/">handlebars</a>. Find the most suitable template engine <a href="https://garann.github.io/template-chooser/">here</a>.</p>
                  <div class="btn-group" role="group">
                      <a href="#grid" class="btn btn-lg btn-default">Grid Layout</a>
                      <a href="#slider" class="btn btn-lg btn-primary">Slider Layout</a>
                  </div>
              </div>
          </div>
      </div>
  </div>

  <div class="demo-grid" id="grid">
      <div class="container">
          <h2>Grid Layout <small>Using Bootstrap Grid</small></h2>
          <div id="be_grid" class="row be__portfolio be__grid">Loading...</div>
      </div>
  </div>

  <div class="demo-slider" id="slider">
      <div class="container">
          <h2>Slider Layout <small>Using Slick Carousel</small></h2>
          <div id="be_slider" class="row be__portfolio be__slider">Loading...</div>
      </div>
  </div>

  <div class="demo-source" id="source">
      <div class="container">
          <h2>Source code</h2>
          <!-- http://prismjs.com/plugins/file-highlight/ -->
          <pre class="line-numbers" data-src="https://raw.githubusercontent.com/SiamKreative/Bootstrap-Portfolio-Behance-API/master/jquery.behance.js"></pre>
      </div>
  </div>

  <div class="demo-comments">
      <div class="container">
          <div class="row">
              <div class="col-lg-8 col-lg-offset-2">
                <h3>Leave your feedback below :)</h3>
                <br>
                <div id="disqus_thread"></div>
              </div>
          </div>
      </div>
  </div>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/layzr.js/1.4.3/layzr.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-smooth-scroll/1.5.6/jquery.smooth-scroll.min.js"></script>
  <script src="vendor/prism.js"></script>
  <script src="jquery.behance.js"></script>
  <script>
  $(function() {
    $('a').smoothScroll();
  });
  </script>
  <script>
  (function() {
    var d = document, s = d.createElement('script');
    s.src = '//siamkreative.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
  })();
  </script>

</body>
</html>

这里是jQuery：

$(function () {

var beUsername = 'josephrobee27e',
    beApiKey = 'ugCqRrCuAuHAD6gvDTmegYXLxO2lWVca',
    bePerPage = 12,
    beProjectAPI = '//www.behance.net/v2/users/' + beUsername + '/projects?callback=?&api_key=' + beApiKey + '&per_page=' + bePerPage,
    beItemWidth = 360,
    beItemHeight = 282,
    beLazyLoad = true,
    beLinkTarget = '_self';

/**
 * Get Data from Behance API
 */
if (sessionStorage.getItem('behanceProject')) {
    setPortfolioTemplate();
} else {
    // Load JSON-encoded data from the Behance API & Store it in sessionStorage
    $.getJSON(beProjectAPI, function (project) {
        sessionStorage.setItem('behanceProject', JSON.stringify(project));
        setPortfolioTemplate();
    });
}

/**
 * Populate Data
 */
function setPortfolioTemplate() {
    var projects = JSON.parse(sessionStorage.getItem('behanceProject')).projects;
    var portfolio = $('.be__portfolio').html('');
    var items = '';
    var image = '';

    $.each(projects, function (i, val) {
        // If Lazy load is enabled, edit the markup accordingly
        beLazyLoad ? image = 'src="images/loading.png" data-lazy="' + val.covers.original + '"' : image = 'src="' + val.covers.original + '"';

        // Create the items template
        items += '<div class="be__item be__item__' + val.id + ' col-lg-4 col-md-4 col-sm-4 col-xs-6 col-xxs-12">';
        items += '<a href="' + val.url + '" title="' + val.name + '" target="' + beLinkTarget + '">';
        items += '<img class="img-responsive" ' + image + ' width="' + beItemWidth + '" height="' + beItemHeight + '" alt="' + val.name + '">';
        items += '</a>';
        items += '</div>';

        // How many items are shown
        return i < bePerPage;
    });

    // Append items only once
    portfolio.each(function (index, el) {
        $(el).append(items);
    });

    // Create Lazy Load instance for Grid Layout
    if (beLazyLoad) {
        var layzr = new Layzr({
            container: '.be__grid',
            selector: '[data-lazy]',
            attr: 'data-lazy'
        });
    }

    // Slider Layout
    $('.be__slider').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 1,
        lazyLoad: 'ondemand',
        responsive: [{
            breakpoint: 768,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 1
            }
        }, {
            breakpoint: 480,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1
            }
        }]
    });
}

});

我发现代码中没有问题。然而，这就是显示的全部内容： screenshot

最后这里是它拉动的JSON文件的屏幕截图，所以我知道它打印了脚本所需的信息：

screenshot

任何帮助都将受到重视。老实说，我不知道自己做错了什么。我添加了username和API key因为我认为我的帐户设置错误，也许有人可以帮我解决这个问题。

Answer 1

无论出于何种原因，该应用程序无法在本地计算机上运行。

我的Behance API密钥没有任何作用

1 个答案: