Github 预览

image-页面

一.流程步骤：

1. 【建立工程】

image-Git

注意：这里的工程名一定要跟你的 Github 上设置的名字一致，否则页面无法正确读取。

2. 【刷新你的 Profile】

  • 将编辑完成的 README.md 文件推送到你的工程中，刷新个人主页即可看到更新的内容。

二.怎么写你的主页：

1. 【生成模板】

image-Rahuldkjain

  • 在网页中选择合适的主页结构;
  • 确定结构后点击生成;
  • 复制生成的 README.md 内容并粘贴到你的文件中进行编辑;

2. 【扩展模板】

  • 使用 github-readme-stats—选择数据展示模板并应用到页面中。

  • 在 README.md 文件中添加以下代码以显示 GitHub 统计信息：

    1
    ![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=YOUR_GITHUB_USERNAME)

三.参考资源：

>【GitHub 教程】

>【GitHub 页面图标】

>【GitHub 页面动图】

  • giphy—动图系列 01

>【GitHub GIF 压缩器】

>【GitHub 插件库】

  • anuraghazra—这个项目允许你动态地生成 GitHub 统计信息并添加到你的 README 中。它提供了多种风格和自定义选项。
  • DenverCoder1—可以帮助你轻松生成 GitHub 个人资料的 README。它提供了一个用户友好的界面，让你可以选择和自定义你想在 README 中展示的内容。也是我用来生成主页模板插件。可以直接进入 DenverCoder 网页 去生成，就不用再去 GitHub 点进去了。

四.主页-README-代码参考：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!-- 顶部居中 Logo -->
<p align="center">
  <img src="[你的图片]" alt="logo" width="800">
</p>

<!-- 欢迎标题 -->
<h1 align="center">Welcome to My GitHub Profile!</h1>

<!-- 我的博客和邮箱 -->
<div align="center" style="margin: 20px 0;">
    <h3>Contact:</h3>
    <ul style="list-style-type: none;">
        <li>
            <img src="[你的图片]" alt="Icon" style="width: 24px; margin-right: 10px;"> <!-- 替换为你的图标 -->
            Blog: <a href="#">[你的链接]</a>
        </li>
        <li>
            <img src="[你的图片]" alt="Mail Icon" style="width: 24px; margin-right: 10px;"> <!-- 替换为你的图标 -->
            Email: <a href="mailto:[email protected]">[email protected]</a>
        </li>
    </ul>
</div>

<!-- GitHub 统计数据 -->
<p align="center">
  <a href="#">
    <img src="[你的统计数据图片]" alt="GitHub Streak">
  </a>
</p>
<p align="center">
  <img src="[你的统计数据图片]" alt="GitHub Stats">
</p>

<!-- 技能和工具 -->
<div align="center">
  <h3>Languages and Tools:</h3>

  <!-- 语言方面 -->
  <div style="text-align: center; margin-bottom: 20px;">
    <h4>Main Languages:</h4>
    <div style="display: flex; justify-content: center; gap: 20px;">
      <img src="[你的图片]" alt="Language 1" width="40" height="40"/>
      <img src="[你的图片]" alt="Language 2" width="40" height="40"/>
      <img src="[你的图片]" alt="Language 3" width="40" height="40"/>
    </div>
  </div>

  <!-- 软件工具 -->
  <div style="text-align: center; margin-bottom: 20px;">
    <h4>Tools:</h4>
    <div style="display: flex; justify-content: center; gap: 20px;">
      <img src="[你的图片]" alt="Tool 1" width="40" height="40"/>
      <img src="[你的图片]" alt="Tool 2" width="40" height="40"/>
      <img src="[你的图片]" alt="Tool 3" width="40" height="40"/>
    </div>
  </div>

  <!-- 游戏引擎 -->
  <div style="text-align: center; margin-bottom: 20px;">
    <h4>Engines:</h4>
    <div style="display: flex; justify-content: center; gap: 20px;">
      <img src="[你的图片]" alt="Engine 1" width="40" height="40"/>
      <img src="[你的图片]" alt="Engine 2" width="40" height="40"/>
    </div>
  </div>
</div>

<!-- 关于我 -->
<div style="text-align: center; margin-top: 20px;">
  <h2>About Me:</h2>
  <p>
    I am a passionate developer constantly learning and exploring new technologies.
  </p>
</div>