GitHub 主页美化 & 显示掘金最近发布文章 Top10 🔥-六虎

导言

你是不是经常在逛 GitHub 时会发现别人的主页特别的好看, 可是对于怎么装备确一直是一知半解呢? 我自己也一直是如此, 只是大约怎么装备, 可是一直没细心研究过, 刚好趁着周末有空好好研究一番, 顺便把自己的 GitHub 主页好好美化美化, 下面是本次折腾进程记载

一、增加自述文件(创立同名库房)

进入个人主页, 默许主页内容相对来说仍是比较简略的, 只能设置指定库房、个人奉献热力图

但实际上不知道从什么时候开端, GitHub 是允许用户在个人主页的顶部显现 自述文件

那么这个 自述文件 又是怎么增加的呢? 其实这个自述文件是来自, 个人同名库房下 README.md, 所以咱们这儿只需求创立一个和 GitHub 用户名同名的库房, 并编写 README.md, 该 README 的内容就会在个人主页顶部区域进行展示

按上图创立完库房, 咱们尝试开端编写 README.md

如下图能够看到, 创立库房时, 其实 GitHub 默许就给咱们设置了模板, 只是主体内容被注释了罢了

下面咱们尝试将注释去掉, 并进行保存; 回到个人主页就会看到在顶部新增了一块区域, 展示了同名库房 README.md 的内容

更多细节部分可参考官方文档

二、标题 & 描述 & 标签

在开端的第一趴, 期望设置一个标题, 然后则是简略的个人描述以及技能栈标签, 故修正内容如下:

<!-- 标题 + 个人描述, emoji 取自: http://emojihomepage.com -->
<p align="center">
  <h1 height="200px" align="center">
    God dag <img src="https://cdn.jsdelivr.net/gh/MaleWeb/picture/images/techblog/hi.gif" >, I'm MoYuanJun
  </h1>
   <p align="center">A Sometimes passion ✨ and sometimes idle  frontend developer from China ‍</p>
</p>

<!-- 
  技能栈标签, 小标签来自: https://shields.io/
  1. shields 链接格局: https://img.shields.io/badge/-{标签文本}-{标签背景色}?style={标签类型}&logo={标签前面 Logo}&logoColor={Logo 色彩}
  2. shields 可选 Logo 列表参考: https://github.com/simple-icons/simple-icons/blob/develop/slugs.md
-->
<div align="center">
  <img src="https://img.shields.io/badge/-JavaScript-f6da1c?style=flat&logo=javascript&logoColor=white">
  <img src="https://img.shields.io/badge/-TypeScript-2b6dbf?style=flat&logo=typescript&logoColor=white">
  <img src="https://img.shields.io/badge/-React-00b4ce?style=flat&logo=react&logoColor=white">
  <img src="https://img.shields.io/badge/-Node.js-3C873A?style=flat&logo=Node.js&logoColor=white">
  <img src="https://img.shields.io/badge/-Koa-33333D?style=flat&logo=koa&logoColor=white">
  <img src="https://img.shields.io/badge/-Less-bf608e?style=flat&logo=less&logoColor=white">
  <img src="https://img.shields.io/badge/-Sass-b37feb?style=flat&logo=sass&logoColor=white">
  <img src="https://img.shields.io/badge/-Graphql-cf1322?style=flat&logo=graphql&logoColor=white">
</div>
<div align="center">
  <img src="https://img.shields.io/badge/-Git-ee462c?style=flat&logo=git&logoColor=white">
  <img src="https://img.shields.io/badge/-Docker-218bea?style=flat&logo=docker&logoColor=white">
  <img src="https://img.shields.io/badge/-Github-black?style=flat&logo=github">
  <img src="https://img.shields.io/badge/-Webpack-%232C3A42?style=flat-square&logo=webpack">
  <img src="https://img.shields.io/badge/-ESLint-%234B32C3?style=flat-square&logo=eslint">
</div>

上面预览成果如下:

这儿的标签来自 Shields.io、Emoji 取自 Emojihomepage、色彩则取自 Ant.design

三、关于我

第二趴, 期望能够对自己的有个简略的介绍, 增加内容如下:

<!-- 背景图 -->
<br />
<br />
<img align="right" alt="GIF" src="./assets/bg.png" width="400"/>
<!-- 关于我 -->
<h2 height="200px" align="center"> About Me</h2>
<br />
-  I’m currently working on [DXY](https://dxy.com/)~
-  I'm passionate about fitness, and it pays off ~
- ‍ I'm passionate about coding and have been developing my skill ~
-  I love to share, and currently share technical articles at [juejin](https:///user/4459274891717223)
- ⛺️ I have a private site: [kunlunxu](https://kunlunxu.cc), you're welcome to come! ~
-  My email address is `moyuanjun@kunlunxu.cc` Welcome to contact me  ~

上面预览成果如下:

四、奉献图贪吃蛇动画

在别人的 GitHub 个人主页上你也许会看到下面这么一个贪吃蛇动画

这儿其实是经过 Platane/snk 完结的, 完结原理其实也简略, 就是经过 GitHub Actions 创立工作流, 工作流中设置了守时使命, 使命中运用 Platane/snk 拉取用户的奉献图生成一个 svg 的动图;

这儿咱们先设置下库房的 Actions 装备, 由于工作流需求生成图片并将图片提交到咱们的库房, 可是默许情况下工作流是没有读写权限的, 这儿咱们需求在 setting -> Actions -> General -> Workflow permissions 挑选 Read and write permissions 选项并保存

接下来咱们开端创立 GitHub Actions 工作流, 具体流程如下:

Actions 装备如下:

# 创立 Snake, see: https://github.com/Platane/snk
# 工作流称号
name: Generate Snake
# 工作流触发机遇, see: https://docs.github.com/zh/actions/using-workflows/triggering-a-workflow
# 触发条件修正为: 当 main 分支有 push 操作 || 每天 0 点
on:
  push:
    branches: 
      - main  
  schedule:
    - cron:  "0 0 * * *" 
# 作业, see: https://docs.github.com/zh/actions/using-jobs/using-jobs-in-a-workflow
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      # 运用 actions/checkout, see: https://github.com/actions/checkout
      - name: Checkout
        uses: actions/checkout@v3
      # 运用 Platane/snk 生成图片, see: https://github.com/Platane/snk
      - name: Generate Snake
        uses: Platane/snk@v2
        with:
          github_user_name: ${{ github.repository_owner }}
          outputs: |
            assets/github-snake.svg
            assets/github-snake-dark.svg?palette=github-dark
            assets/ocean.gif?color_snake=orange&color_dots=#bfd6f6,#8dbdff,#64a1f4,#4b91f1,#3c7dd9

      # 运用 EndBug/add-and-commit 提交代码, see: https://github.com/EndBug/add-and-commit
      - name: Push to GitHub
        uses: EndBug/add-and-commit@v9
        with:
          branch: main
          default_author: github_actions
          message: 'Generate Contribution Snake'

完结上面工作流的创立, 由于会提交 commit 存在 push 操作所以将会触发工作流

工作流履行结束, 会发现项目下会生成 assets 目录并生成 3 张贪吃蛇动图

接下来咱们要做的就是在自述文件中, 引证咱们生成的动图:

<!-- 贪吃蛇 - 图片有 actions/Generate Snake 守时生成 -->
<picture>
  <source media="(prefers-color-scheme: dark)" srcset="./assets/github-snake-dark.svg" />
  <source media="(prefers-color-scheme: light)" srcset="./assets/github-snake.svg" />
  <img width="100%" alt="github-snake" src="./assets/github-snake.svg" />
</picture>

增加贪吃蛇后效果如下:

五、计算卡片

在很多地方可能会看到如下计算卡片, 该计算的完结能够参考 github-readme-stats

github-readme-stats 运用起来比较简略, 只需求将图片地址设为 https://github-readme-stats.vercel.app/api?username={用户名}&{卡片样式装备} 即可, 具体运用可查看库房文档

在计算部分除了运用 github-readme-stats之外, 这儿还想运用了 lowlighter/metrics, 该功能的完结和贪吃蛇的原理一致, 需求经过工作流来生成计算图, 之所以要运用 lowlighter/metrics 是由于它能够生成更多各种花里胡哨的图片

更多案例以及文档可参考库房文档, 接下来咱们将引进 lowlighter/metrics 下面咱们来调整咱们的工作流:

+ name: Generate
jobs:
+ # 生成计算图, see: https://github.com/lowlighter/metrics
+ github-metrics:
+   runs-on: ubuntu-latest
+   steps:
+     - name: metrics-Half-year-calendar
+       uses: lowlighter/metrics@latest
+       with:
+         base: ""
+         filename: assets/metrics.plugin.isocalendar.svg
+         token: ${{ github.token }}
+         plugin_isocalendar: yes
+ 
  github-Snake:
    runs-on: ubuntu-latest
  ....

修正完工作流, 将会重新履行工作流, 履行后会在项目下 assets 目录中生成 metrics.plugin.isocalendar.svg, 然后咱们就能够在自述文件中引证生成的图片以及 github-readme-stats 计算图:

<!-- 计算卡片, see: https://github.com/anuraghazra/github-readme-stats -->
<table align="center">
  <tr>
    <td align="center">
      <div><b><em><spam>Statistics</spam></em></b></div>
      <img align="left" src="https://juejin.im/post/assets/metrics.plugin.isocalendar.svg" />
    </td>
    <td align="left">
      <img src="https://github-readme-stats.vercel.app/api?username=anuraghazra&hide_border=true&show_icons=true&theme=dark&bg_color=00000000"/>
    </td>
  </tr>
</table>

上面预览成果如下:

六、掘金最近发布文章展示

这儿还有个灵感, 是否能够利用工作流守时拉取 掘金 个人主页发布的文章, 然后再在自述文件中进行展示呢?

说搞就搞, 咱们这儿咱们运用 node 来创立一个脚本来拉取数据, 首先先将库房拉取下来, 然后初始化咱们的项目:

npm init -y
echo '\nnode_modules' >> .gitignore

安装 jsdom 下面脚本需求该依赖来处理 html

npm i jsdom

下面创立根文件 renderPosts.mjs, 来编写咱们的脚本, 脚本内容如下, 脚本详细介绍可直接看注释:

import fs from 'fs';
import util from 'util'
import process from 'child_process'
import { JSDOM } from 'jsdom'
const exec = util.promisify(process.exec)
const USER_ID = '4459274891717223' // 掘金用户 ID
// 1. 拉取页面: 运用 cur 拿到 html内容
const { stdout: body } = await exec(`curl https:///user/${USER_ID}/posts`)
// 2. 运用 jsdom 解析 HTML
const dom = await new JSDOM(body)
// 3. 生成 html
const appendHtmlText = [...dom.window.document.querySelectorAll('.detail-list .post-list-box .entry-list .entry')]
  .reduce((total, ele) => {
    const data = ele.querySelector('.meta-container .date')?.textContent 
    const link = ele.querySelector('.content-wrapper .title-row a.title')
    return `${total}\n<li>[${data}] <a href="https://${link?.getAttribute('href')}">${link?.textContent}</a></li>`
  }, '')
// 4. 读取 README, 并在 <!-- posts start --> 和 <!-- posts end --> 中间插入生成的 html
const README_PATH = new URL('./README.md', import.meta.url)
const res = fs.readFileSync(README_PATH, 'utf-8')
  .replace(/(?<=\<\!-- posts start --\>)[.\s\S]*?(?=\<\!-- posts end --\>)/, `\n<ul>${appendHtmlText}\n</ul>\n`)
// 5. 修正 README
fs.writeFileSync(README_PATH, res)

下面咱们修正 README.md: 增加标志位

<!-- posts start -->
生成的文章列表将会在这儿展示
<!-- posts end -->

履行脚本

node renderPosts.mjs

履行完脚本, 在 README.md 中会发现, 在标志位  和  中间插入了一段 html

接下来咱们就来调整咱们的工作流, 调整内容如下:

...
jobs:
+ juejin-posts:
+   runs-on: ubuntu-latest
+   steps:                    # 工作流过程
+     # step 1. 获取源码
+     - name: Chekcout ️             # 过程名
+       uses: actions/checkout@master # 运用插件名 => https://github.com/actions/checkout
+
+     # step 2. 生成列表、并插入到 README
+     - name: Append Juejin Posts List 
+       run: |
+         npm install
+         node ./renderPosts.mjs
+
+     # step 3. 运用 EndBug/add-and-commit 提交代码, see: https://github.com/EndBug/add-and-commit
+     - name: Push to GitHub
+       uses: EndBug/add-and-commit@v9
+       with:
+         branch: main
+         default_author: github_actions
+         message: 'render renderPosts'
+ 
  github-metrics:
    ....

修正完工作流, 将会重新履行工作流, 履行后将插入掘金最新发布的 10 篇文章, 其预览成果如下:

弥补弥补弥补: 上面的逻辑现在已经抽离成独立的库房, 大家假如也想插入掘金文章列表, 无需自己手撸一遍代码, 能够直接在工作流中直接运用, 运用方式如下:

jobs:
  juejin-posts:
    runs-on: ubuntu-latest
    steps:
      # 运用 actions/checkout 拉取库房, see: https://github.com/actions/checkout
      - name: Checkout
        uses: actions/checkout@v3
      # 运用 KunLunXu-CC/juejin-posts-action 生成文章列表, 
      # see: https://github.com/KunLunXu-CC/juejin-posts-action
      - name: Append Juejin Posts List 
        uses: KunLunXu-CC/juejin-posts-action@main
        with: 
          user_id: "4459274891717223"
      # 运用 EndBug/add-and-commit 提交代码, see: https://github.com/EndBug/add-and-commit
      - name: Push to GitHub
        uses: EndBug/add-and-commit@v9
        with:
          branch: main
          default_author: github_actions
          message: 'juejin-posts'

七、总结

到此, 一顿折腾到此也根本差不多咯, 后边的工作根本就是对自述文件进行微调, 假如各位看官对最后的效果比较猎奇欢迎到我的 GitHub 一游, 假如你对生成掘金列表的 Action 猎奇, 也能够点击 juejin-posts-action 查看

八、参考

GitHub Profile的装备
三分钟让你也具有一个很酷炫的GitHub展示页面(保姆级教程)

本文正在参与「金石计划」

GitHub 主页美化 & 显示掘金最近发布文章 Top10 🔥

导言

一、增加自述文件(创立同名库房)

二、标题 & 描述 & 标签

三、关于我

四、 奉献图贪吃蛇动画

五、计算卡片

六、掘金最近发布文章展示

七、总结

八、参考

相关文章

【云原生】Spark on k8s 讲解与实战操作

从代码去认识SVG(二)

objc方法声明和实现由于参数类型不一致所引发的崩溃

AMS之Activity栈管理（上篇）

作者信息

四、奉献图贪吃蛇动画