返回

随心定制您的GitHub主页：美化＆实时同步掘金Top10文章

闲谈

美化你的 GitHub 主页，并同步实时掘金文章 Top10

准备工作：

在着手美化 GitHub 主页之前，你需要具备以下条件：

  • 一个 GitHub 账号
  • 安装并配置 Node.js 和 npm
  • 熟悉 HTML、CSS 和 JavaScript

安装项目：

  1. 克隆项目到本地：git clone https://github.com/username/github-home-beautify.git
  2. 进入项目目录并安装依赖：cd github-home-beautify && npm install

配置项目：

在项目目录下的 config.js 文件中，修改以下配置：

  • githubUsername: 你的 GitHub 用户名
  • 掘金文章数目: 你希望在主页上显示的掘金文章数量

部署项目：

运行以下命令部署项目：npm run deploy

该命令会将项目部署到 GitHub Pages。

启用掘金文章同步：

  1. 访问 https://github.com/settings/applications/new
  2. 创建一个新的 OAuth 应用，并填写信息：
  3. 复制 Client ID 和 Client Secret。
  4. 将 Client ID 和 Client Secret 填入 config.js 文件并保存。

代码示例：

在 config.js 文件中添加以下代码来配置掘金文章同步：

const fetchArticles = async () => {
  const response = await fetch(
    `https://api.juejin.cn/content_api/v1/article/query_articles?category=5562855196854509575&sort_type=hottest&top_num=${掘金文章数目}&uid=0`,
    {
      headers: {
        'Content-Type': 'application/json',
      },
    }
  );
  const data = await response.json();
  return data.d.list;
};

预览效果：

部署并启用掘金文章同步后，你可以在 GitHub 主页上看到美化效果和实时同步的掘金文章 Top10。

更多技巧：

除了美化 GitHub 主页和同步掘金文章，你还可以在 GitHub 上做更多事情：

  • 使用 Markdown 格式编写 README 文件，让项目文档更美观易读。
  • 使用 GitHub Actions 自动构建和部署项目。
  • 使用 GitHub Pages 托管个人网站或项目网站。
  • 使用 GitHub Issues 跟踪项目问题。
  • 使用 GitHub Pull Requests 与他人协作开发项目。

常见问题解答：

  1. 如何更改 GitHub 主页的背景图片？

    • 编辑 README.md 文件并添加以下代码：<div style="background-image: url(IMAGE_URL);"></div>。将 IMAGE_URL 替换为你的背景图片 URL。

  2. 如何添加社交媒体链接到 GitHub 主页？

    • 编辑 README.md 文件并添加以下代码：<a href="LINK"><svg width="32" height="32"><path /></svg></a>, 将 LINK 替换为你的社交媒体链接，并将 <path /> 替换为 SVG 图标。

  3. 如何展示 GitHub 仓库中的贡献者？

    • 使用 Contributors App，该应用程序会自动更新仓库中贡献者的列表。

  4. 如何定制 GitHub 主页的配色方案？

    • 编辑 style.css 文件并修改 .header、.main 和 .footer 类的颜色。

  5. 如何添加自定义脚本到 GitHub 主页？

    • 编辑 index.html 文件并在 <body> 元素中添加<script> 标签，其中包含你的自定义脚本。