简介
nx-github-widget 是一个方便在网页中展示 Github 项目信息的 npm 包。它可以在任何网页上方便地调用 Github API 并展示项目的 README 文件、最近的提交记录以及贡献者列表等信息。它的代码是基于 Angular 框架的，安装和使用都非常方便。
安装
在使用 nx-github-widget 前，您需要先安装 Node.js 和 npm 包管理器。如何安装 Node.js 和 npm 可以参考官方文档。
安装 nx-github-widget 的方式非常简单，只需要在命令行中运行以下命令：
npm install nx-github-widget
这样就可以把 nx-github-widget 安装到您的项目中了。
使用
在 Angular 应用中使用
如果您已经在使用 Angular 框架开发网页，那么 nx-github-widget 可以轻松地集成到您的应用中。在您想要展示 Github 项目信息的组件中，您只需要添加以下代码：
<nx-github-widget [owner]="owner" [repo]="repo"></nx-github-widget>
其中，owner 是 Github 项目的 owner 名称，repo 是 Github 项目的 repo 名称。例如，如果您要展示 Angular 项目的信息，那么 owner 就是 angular，repo 就是 angular。
如果您想在展示信息之前对 nx-github-widget 进行一些设置，您可以在组件的 TypeScript 文件中添加以下代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------------- --------------------- - ---- -------------------
------------
--------- -----------------------
------------ ------------------------------------
---------- -------------------------------------
--
------ ----- ----------------------- -
----- - ----------
---- - ----------
------------------- -------------- ---------------------- -
----- ------- -------------------- - -
----------------- -----
----------- ----
-
-------------------------------------
-
-在这个例子中，我们通过 NxGithubWidgetService 引入了 nx-github-widget 的配置项，然后调用 setConfig 方法对组件进行配置。在这里，我们设置了 showContributors 和 showIssues 两个配置项为 true，这意味着我们想在展示 Github 项目信息时同时展示贡献者列表和开放的问题列表。
配置项的详细信息可以在 nx-github-widget 的官方文档中查看。
在普通网页中使用
如果您没有使用 Angular 框架，而是在普通网页中使用 nx-github-widget，那么您需要在 HTML 文件中引入 nx-github-widget。您可以在命令行中运行以下命令：
npm install nx-github-widget --save-dev
然后，在 HTML 文件中添加以下代码：
<html>
<head>
<script src="node_modules/nx-github-widget/bundles/nx-github-widget.umd.js"></script>
</head>
<body>
<nx-github-widget owner="angular" repo="angular"></nx-github-widget>
</body>
</html>这里需要注意的是，如果您想对 nx-github-widget 进行配置，您需要在 JavaScript 文件中添加以下代码：
const config = {
showContributors: true,
showIssues: true
};
const githubWidget = document.getElementsByTagName('nx-github-widget')[0];
githubWidget.setConfig(config);这里我们通过 getElementsByTag() 方法获取了页面中的第一个 nx-github-widget 元素，然后调用了 setConfig 方法对其进行了配置。
示例代码
以下是一个完整的 Angular 组件代码示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------------- --------------------- - ---- -------------------
------------
--------- -----------------------
------------ ------------------------------------
---------- -------------------------------------
--
------ ----- ----------------------- -
----- - ----------
---- - ----------
------------------- -------------- ---------------------- -
----- ------- -------------------- - -
----------------- -----
----------- ----
-
-------------------------------------
-
-<nx-github-widget [owner]="owner" [repo]="repo"></nx-github-widget>
总结
nx-github-widget 可以方便地展示 Github 项目信息，让您的网页更加美观和实用。安装和使用非常简单，只需要几行代码即可。如果您想对 nx-github-widget 进行配置，也可以轻松地通过配置项实现。希望本文对您有帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f963d1de16d83a66d0b