时间戳

首页 > 解决方案 > 使用 REST API 为存储库添加语言颜色

javascript - 使用 REST API 为存储库添加语言颜色

问题描述

我想使用 REST API 显示用户名的所有存储库，所以我想获得在 Github 上显示的语言颜色。

例如

在此处输入图像描述

我确实显示了总星数、分叉和语言。但我也想显示语言徽章。我希望我解释得足够明白。

var request = new XMLHttpRequest();
    request.open('GET','https://api.github.com/users/murtazajafari/repos?per_page=3' , 
    true)
    request.onload = function() {
        var data = JSON.parse(this.response);
        console.log(data);
        var statusHTML = '';
        $.each(data, function(i, status){
            statusHTML += '<div class="card"> \
                <a href=""> \
                    <div class="col-auto"> \
                        <i class="fa fa-github"></i> \
                    </div> \
                    <h4>' + status.name +  '</h4> \
                    <div class="state"> \
                        <span class="mr-4"><i class="fa fa-star mr-2"></i>' + status.stargazers_count +  '</span> \
                        <span class="mr-4"><i class="fa fa-code-fork mr-2"></i>' + status.forks_count + '</span> \
                        <span class="repo-language-color mr-1" style="background-color:' + site.data.colors[status.language]["color"] + '"></span><span itemprop="programmingLanguage">' + repository.language + '</span> \
                    </div> \
                </a> \
            </div>';
        });
        $('.repositories').html(statusHTML);
    }
    request.send();

标签： javascriptrestapigithub

解决方案

一个简单的 Google 搜索会返回几个包含您想要的数据的存储库，我选择的一个是https://github.com/ozh/github-colors并且源代码有一个简单的 JSON 文件，您可以按照您的方式加载它重新加载 GitHub API...

我将使用fetch它，因为它更简单，而且我也讨厌编写 HTML ......这是一个简单的解决方案：

.color {
  display: inline-block;
  background-color: transparent;
  width: 10px;
  height: 10px;
}

  <div id="app">
    <ul>
      <li v-for="(repo, idx) in repos" :key="idx">
        <span class="color" :style="{ background: languageColor(repo.language) }">&nbsp;</span>
        {{ repo.language }} | 
        <a :href="`https://github.com/${repo.full_name}`">{{ repo.name }}</a> | 
        {{ repo.stargazers_count }} | 
        {{ repo.forks_count }}
      </li>
    </ul>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

new Vue({
  el: '#app',
  data: function() {
    return {
      repos: null,
      colors: null
    }
  },
  created() {
    var _ = this
    var urlApi = 'https://api.github.com/users/murtazajafari/repos?per_page=10'
    var urlColors = 'https://raw.githubusercontent.com/ozh/github-colors/master/colors.json'

    fetch(urlApi)                    // fetch API data
      .then(res => res.json())
      .then(json => _.repos = json)  // append to repos
    fetch(urlColors)                 // fetch colors data
      .then(res => res.json())
      .then(json => _.colors = json) // append to colors
  },
  methods: {
    languageColor(language) {
      return this.colors[language].color // pick up the right color by language
    }
  }
})

生活在JsBin上并在 CodePen 上使用Veutify

推荐阅读