Question

我正在尝试将我的Dribble帖子发布到我的Gatsby网站上。

我紧随本教程https://medium.com/@nithin_94885/dribbble-shots-in-your-website-v2-api-5945a355d106之后，在该教程中，我从Dribble生成了访问令牌（一种唯一的代码，允许我的gatsby站点访问我的运球文章）。

我在弄清楚在gatsby站点中添加调用API的脚本的位置时遇到了麻烦。

我尝试将其粘贴到我的gatsby-node.js文件中（过去我认为这是脚本应该去的地方）

我是新手。.如果调用Dribble API的脚本如下所示：

// Set the Access Token
var accessToken = '9f061d26c5a8be96b17a81718959a67dd54ca9669ca41752777193f7cc5be7c3';

// Call Dribble v2 API
$.ajax({
    url: 'https://api.dribbble.com/v2/user/shots?access_token='+accessToken,
    dataType: 'json',
    type: 'GET',
    success: function(data) {  
      if (data.length > 0) { 
        $.each(data.reverse(), function(i, val) {                
          $('#shots').prepend(
            '<a class="shot" target="_blank" href="'+ val.html_url +'" title="' + val.title + '"><div class="title">' + val.title + '</div><img src="'+ val.images.hidpi +'"/></a>'
            )
        })
      }
      else {
        $('#shots').append('<p>No shots yet!</p>');
      }
    }
});

和我的gatsby-node.js文件看起来像这样：

const path = require('path');
const { createFilePath } = require('gatsby-source-filesystem');

// Look at every node when it is created
exports.onCreateNode = ({node, getNode, actions}) => {
    // Check for markdown nodes
    const { createNodeField } = actions;
    if(node.internal.type === 'MarkdownRemark') {
        // Create a slug out of the markdown filepath name
        const slug = createFilePath({
            node,
            getNode,
            basePath: 'projects'
        });
        // Add the newly created slug to the node itself
        createNodeField({
            node,
            name: 'slug',
            value: `/project${slug}`
        });
    }
};

exports.createPages = ({ graphql, actions }) => {
    const { createPage } = actions
    return new Promise((resolve, reject) => {
      graphql(`
        {
          allMarkdownRemark {
            edges {
              node {
                fields {
                  slug
                }
              }
            }
          }
        }
      `).then(result => {
        result.data.allMarkdownRemark.edges.forEach(({ node }) => {
          createPage({
            path: node.fields.slug,
            component: path.resolve(`./src/templates/project.js`),
            context: {
              // Data passed to context is available in page queries as GraphQL variables.
              slug: node.fields.slug,
            },
          })
        })
        resolve()
      })
    })
    };

如何添加脚本，以便API脚本在Dribble中调用我的镜头以链接回该脚本？

我希望这是一个简单的解决方案，但几天来我一直在努力与Dribble / Gatsby集成。：（

如何将API脚本（来自Dribble）添加到我的Gatsby网站

0 个答案: