GitHub Widget 项目教程

最新推荐文章于 2024-09-07 08:53:59 发布

傅爽业Veleda

最新推荐文章于 2024-09-07 08:53:59 发布

阅读量355

点赞数 5

本文链接：https://blog.csdn.net/gitblog_00204/article/details/141851793

版权

GitHub Widget 项目教程

github-widgetA widget showing your github details that you can embed in any website.项目地址:https://gitcode.com/gh_mirrors/gi/github-widget

1. 项目的目录结构及介绍

github-widget/
├── css/
│   ├── style.css
├── js/
│   ├── widget.js
├── index.html
├── README.md

css/: 包含项目的样式文件 style.css。
js/: 包含项目的JavaScript文件 widget.js。
index.html: 项目的入口文件。
README.md: 项目的说明文档。

2. 项目的启动文件介绍

项目的启动文件是 index.html。这个文件包含了项目的HTML结构，并引用了必要的CSS和JavaScript文件。以下是 index.html 的部分代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GitHub Widget</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="github-widget"></div>
    <script src="js/widget.js"></script>
</body>
</html>

3. 项目的配置文件介绍

项目的主要配置文件是 js/widget.js。这个文件包含了GitHub Widget的逻辑和配置。以下是 widget.js 的部分代码：

document.addEventListener('DOMContentLoaded', function() {
    const widget = document.getElementById('github-widget');
    const username = 'surbhioberoi'; // 配置GitHub用户名
    const apiUrl = `https://api.github.com/users/${username}`;

    fetch(apiUrl)
        .then(response => response.json())
        .then(data => {
            widget.innerHTML = `
                <h1>${data.name}</h1>
                <p>${data.bio}</p>
                <a href="${data.html_url}">View on GitHub</a>
            `;
        })
        .catch(error => console.error('Error:', error));
});

在这个文件中，你可以配置GitHub用户名和其他相关参数。

github-widgetA widget showing your github details that you can embed in any website.项目地址:https://gitcode.com/gh_mirrors/gi/github-widget