Logo

菜单

发布于 2026-01-06 4 阅读
0

创建动态 GitHub 个人资料 自述文件 结论 DEV 的全球展示挑战赛，由 Mux 呈现：展示你的项目！

创建动态 GitHub 个人资料自述文件

结论

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

GitHub 最近发布了一项新功能，允许用户创建个人资料 Readme Markdown 文件。虽然 GitHub 官方尚未对此进行文档说明，但许多用户都在使用这项功能。个人资料 Readme 文件相当于用户的个人作品集，用户可以在其中向浏览其个人资料的人介绍自己的重要信息。

有很多文章介绍了如何创建个人资料 README 文件。本文将介绍如何使其动态化。例如，显示一些 GitHub 个人资料统计信息（星标数、提交次数等）、显示最常用的编程语言，甚至显示用户最新的博客文章。您可以在这里查看我的个人资料：https://github.com/CharalambosIoannou。现在，让我们开始吧：

步骤 1：创建配置文件自述文件

  • 请前往 GitHub 并创建一个新的仓库，仓库名称以您的用户名命名，如下所示。同时勾选“.”复选框Initialize this repository with a README。我的页面显示警告，因为我已经创建过该仓库。

第二步：添加你想向世界展示的详细信息

  • 我所做的就是在顶部显示我的名字以及我的网站链接，方便任何人访问。
  • 然后，我在 GitHub 创建 readme 文件后填写了其提供的默认信息。
  • 然后我添加了社交媒体链接和联系方式，方便大家联系我。之后，我又添加了常用语言和工具的图标。相关代码如下：（为了节省空间，我省略了大部分语言链接。如需查看完整列表，请点击文章末尾的链接查看我的自述文件。）
## ✉️ Find me on:


<p align="center">
 <a href="https://charalambosioannou.github.io/" target="_blank" rel="noopener noreferrer"> <img src="https://raw.githubusercontent.com/iconic/open-iconic/master/svg/globe.svg" alt="Python" height="40" style="vertical-align:top; margin:4px"> </a>
 <a href="https://linkedin.com/in/charalambosioannou" target="_blank" rel="noopener noreferrer"> <img src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/linkedin.svg" alt="Python" height="40" style="vertical-align:top; margin:4px"></a>
 <a href="mailto:cioannou1997@gmail.com"> <img src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/gmail.svg" alt="Python" height="40" style="vertical-align:top; margin:4px"></a>
</p>

<br />

## 🧰 Languages and Tools:
<p align="center">
<img src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/python/python.png" alt="Python" height="40" style="vertical-align:top; margin:4px">
<img src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/javascript/javascript.png" alt="Javascript" height="40" style="vertical-align:top; margin:4px">
<img src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/visual-studio-code/visual-studio-code.png" alt="VS Code" height="40" style="vertical-align:top; margin:4px">
</p>
Enter fullscreen mode Exit fullscreen mode

我使用 html 样式来显示图片而不是 markdown，因为我可以把图片居中显示。

  • 我的包含这些详细信息的自述文件如下所示，如下所示。

步骤 3：添加动态数据

  • 我使用的动态数据包括：

    1) GitHub 个人主页访客数
    2) GitHub 个人主页关注者数
    3) Dev.to 博客文章数
    4) GitHub 个人主页统计数据（星标数、提交数等）
    5) 我的代码仓库中最常用的语言

1）GitHub个人资料访客数量

  • 请将这行代码添加到 readme 文件中，但将我的用户名替换CharalambosIoannou为你的 GitHub 用户名。
![](https://visitor-badge.laobi.icu/badge?page_id=CharalambosIoannou.CharalambosIoannou)
Enter fullscreen mode Exit fullscreen mode

2）GitHub个人资料关注者数量

  • 请将这行代码添加到 readme 文件中，但将我的用户名替换CharalambosIoannou为你的 GitHub 用户名。
[![Github](https://img.shields.io/github/followers/CharalambosIoannou?label=Follow&style=social)](https://github.com/CharalambosIoannou)
Enter fullscreen mode Exit fullscreen mode

3) Dev.to 博客文章

  • 为了动态获取 dev.to 的最新博客文章，我们需要创建一个 YAML 文件和一个 GitHub 操作，但是多亏了这个仓库https://github.com/gautamkrishnar/blog-post-workflow，这变得前所未有的简单。
  • 第一步是将此代码段复制并粘贴到您的 readme 文件中：
# Blog posts
<!-- BLOG-POST-LIST:START -->
<!-- BLOG-POST-LIST:END -->
Enter fullscreen mode Exit fullscreen mode
  • 下一步是创建一个名为 的文件夹.github，并在该文件夹内创建另一个名为 的文件夹workflows。
  • 在文件夹中workflows创建一个名为“blog-post-workflow.yml
  • blog-post-workflow.yml将此代码复制并粘贴到文件中：
name: Latest blog post workflow
on:
  schedule:
    # Runs every hour
    - cron: '0 * * * *'
  workflow_dispatch:

jobs:
  update-readme-with-blog:
    name: Update this repo's README with latest blog posts
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: gautamkrishnar/blog-post-workflow@master
        with:
          feed_list: "https://dev.to/feed/charalambosioannou"
Enter fullscreen mode Exit fullscreen mode

  • 在 feed_list 部分，将我的 dev.to 用户名替换charalambosioannou为您自己的 dev.to 用户名。

  • 这里还有很多其他设置，例如更改显示的帖子数量（默认值为 5）或添加多个来源（dev.to、stackoverflow 等）。所有这些设置都可以在这里找到：https://github.com/gautamkrishnar/blog-post-workflow#options

  • 如果您已在本地进行了更改，请推送更改并转到操作部分。

替代文字

  • 下一步是点击按钮Latest blog post workflow，然后Run workflow再点击一次Run workflow。然后等待几秒钟，任务就会运行。

4) GitHub 个人资料统计信息（星标数、提交次数等）

  • 请将这行代码添加到 readme 文件中，但将我的用户名替换CharalambosIoannou为你的 GitHub 用户名。
![GitHub stats](https://github-readme-stats.vercel.app/api?username=CharalambosIoannou&show_icons=true&theme=tokyonight)
Enter fullscreen mode Exit fullscreen mode

5）我的代码库中最常用的语言

  • 请将这行代码添加到 readme 文件中，但将我的用户名替换CharalambosIoannou为你的 GitHub 用户名。
![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=CharalambosIoannou&theme=tokyonight)
Enter fullscreen mode Exit fullscreen mode

结论

最终结果如下：
替代文字

我建议你的个人简介要简洁明了，并发挥创意。希望你喜欢这篇教程，并觉得它有用。你可以在这里查看我的个人简介：https://github.com/CharalambosIoannou。如果你需要一些关于如何创建个人简介的灵感，可以在这个仓库中找到很多示例：https://github.com/abhisheknaiidu/awesome-github-profile-readme

希望您喜欢这篇文章，并觉得内容对您有所帮助。您可以点击下方按钮请我喝杯咖啡来支持我。您的慷慨解囊将鼓励我更频繁地创作文章。

请我喝杯咖啡

文章来源：https://dev.to/charalambosianonnou/create-a-dynamic-github-profile-readme-il5
TDD简介：它是什么以及为什么它很重要
React 是什么⚛️🤔？Rea...