Github profile 还能这样玩儿

一杯代码
1,534 阅读4分钟

Github在某一次更新中加入了一个彩蛋，当你创建一个和你github账号同名的仓库时，它会出现一个提示说

这是什么意思呢，先看看我们以前github profile是什么样子 image

用我们大佬Linus的github举例，就是这个样子。（大佬就是大佬。。） 就是一排Popular repositories

那现在如果你用它提示的，创建一个和github用户名同名的repo，并且创建一个README，那么会是怎样呢。

随便找一个例子：

可以看到，同名repo的README显示在了profile页面。

这个就很有意思了，你完全可以可以把github profile当成简历了，支持markdown，这样对那些没有时间做自己的博客，但是又想有一个逼格十足的技术流简历的人，简直就是一个不二的选择。

可是我们也能看到，由于README只支持markdown，它必定无法展示像网页上那么丰富的内容。

当然并不是一点办法也没有，今天我们就来用其中一种办法，让我们的README可以显示比markdown本身更加丰富的内容。

大体思路

其实这个的思路很简单，那就是使用图片，markdown不是只能支持很有限的文本格式吗，那我们就不用它，我们直接把我们要显示的内容做成图片，然后放在README里不就完事儿了。

当然这个只适合显示静态内容，交互和动画不在这篇文章的考虑范畴。

当然作为一个简历，或者任何你想展示的信息，要易于修改，图片内容该如何修改呢，我们不是设计师，我也不会ps这些东西，我们当然不会去手动作图，作为web开发者当然就是html，css，javascript一把梭了。

所以废话不多说，步骤如下：

  1. 用html把我们要展示的东西写出来，web开发。
  2. 把我们的web内容转化为图片。
  3. 把图片放到README。

完事儿，把大象放进冰箱分三步，这里也一样。

接下来我们来具体实现一下。

具体实现

我们使用nodejs来实现，当然你可以用任何语言去实现，只不过nodejs比较方便。

创建我们要展示的内容

这一步就是基本的web开发，主要就是写一个html文件，这里主要为了演示，我随便写一个简单的页面，命名为template.html，也避免过长的代码让文章变得难以阅读。

<html>
  <head>
    <style>
      body {
        background: #ffb69e;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
      }
      .content {
        color: red;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <div class="content">I am a colorful content</div>
    </div>
  </body>
</html>

这个html页面如下： image

主要就是为了演示，不要在意细节。

把html转化为图片

这里我们使用到一个包node-html-to-image，具体使用也很简单：

const nodeHtmlToImage = require('node-html-to-image')
 
nodeHtmlToImage({
  output: './image.png',
  html: '<html><body>Hello world!</body></html>'
}).then(() => console.log('The image was created successfully!'))

主要就两个点，一是定义输出图片文件的路径output: './image.png'，二是把html作为字符串传入。

知道了这一点，接下来我们就要把我们上面定义的html模版传入这个函数，让它生成图片。

首先如何把html文件转化为字符串：

function convertHTMLtoString(filePath) {
  return new Promise((resolve, reject) => {
    fs.readFile(filePath, 'utf8', (err, data) => {
      if (err) {
        reject(err);
      }
      resolve(data);
    });
  });
}

我们这里就用nodejs原生的fs模块来读取html文件，就可以拿到字符串的内容。

const template = await convertHTMLtoString(`${path.resolve(__dirname)}/template.html`);
await nodeHtmlToImage({
    output: './image.png',
    html: template,
    content: {},
});

这里的content是用于接收你在html里定义的变量，比如在你的template.html里面，如果I am a colorful content这句话来自于远程服务器，那么你的template.html的内容就是：

<div id="wrapper">
  <div class="content">{{title}}</div>
</div>

双大括号扩起来，然后在你的js文件里

await nodeHtmlToImage({
    output: './image.png',
    html: template,
    content: {
      title: "I am a colorful content"
    },
});

这就像一些模版引擎的写法一样，在实现一些定时更新页面的功能的时候，就可以动态的变换要展示的内容，我可能在下一篇文章来实现这个功能，关注公众号：一杯代码，可以及时收到文章推送。

编写README

![](wonderful-image.png)

完事儿。

总结

内容比较简单，就不放最终效果了。当然你要说这有什么用，其实也没有什么用，但是通过这样的一顿操作，细心琢磨一下，其实可以做出非常漂亮的profile页面。但是这个方案终究是静态图片，我个人认为比较适合配合github action去做一些定时显示效果。比如你可以去你感兴趣的网站抓取一些你感兴趣的内容，然后汇总显示在这里。我还是很期待未来github能够增强这一部分的编辑功能，而不单单只是一个简单的README。

- EOF -

当你迷茫时

一杯咖啡，千行代码

欢迎关注公众号：一杯代码

avatar
文章
阅读
粉丝