自制独一无二的『🏅掘金称号』，我是『🏅摸鱼王』，你呢？

一、柠檬精的自力更生🍋🍋🍋

2021年过去了，那些『大佬写手』和『会拉票的写手』都获得了自己的『称号』。看的我这种普通写手是万分垂涎。
就连有些2021年只发 1 篇文章，27 赞的老哥都获得了『人气作者』前20的称号。天赋异禀的选手

对此，我这种新加入的普普通通的作者，看着自己空空如也的称号，不由得内心大酸🍋🍋🍋。

虽然我平平无奇，文章也平平无奇，而且我还有社交恐惧症，但是我也想要称号啊！

不就是称号吗？这还不容易！
刷刷刷，肝了两天，本柠檬精也有称号了！还是独一无二的那种！
三端效果

除了【app端】因为那个阴影的存在导致效果捉急以外，其他两端的效果都非常直观。

最关键的是，获取称号这个东西，我把它做成了『网页』并且完全开源，而且部署了。
每个掘友，只要想获得，只需要30秒！

二、如何获得?

步骤一：找到自己的掘金id

电脑端和H5端找掘金id方法如下：

打开『点右上角头像-我的主页』找到掘金ID

APP端找掘金id方法如下：

打开『APP - 我 - 个人主页 - 右上角分享 - 复制链接』 app端找掘金ID

复制出链接后，随便找到哪里粘贴出来，然后就和电脑端的方法一样了。

步骤二：访问『生成网站』

我在自己的博客域名下放置了『生成称号』的网站，地址如下：

www.zhangshichun.top/avatar/#/ju…

注意，请把地址末尾的 xxxx 替换为【步骤一】中获取的掘金ID。

以著名的 @沸点小助手为例，他的掘金ID为 2780007432717400。

那掘金酱应该访问的链接就是： www.zhangshichun.top/avatar/#/ju…

看到如下效果，就表示访问成功了！

三、生成吧！独一无二的称号

生成称号有两种模式：

第一种是直接选择内置的称号。
第二种是手动输入称号。（但目前只支持3-4个字的称号）

操作顺序

操作很容易，一二三四，就完成了！

四、下载图片，作为头像

我一个普通掘友，当然没办法产生真正的称号，不过把头像处理一下，看起来像是真的有『称号』，是完全OK的吧！

欢迎大家把带着称号的图片发到评论区~供大家一起欣赏，把玩！

放图，快！

不说以假乱真吧，聊以慰籍还是不错的吧。

五、开源！随便玩

源码地址： github.com/zhangshichu…

随便fork，随便star，随便提pr提issue，别客气...🤣

六、编码思路

6.1 通过 `掘金id` 获取到掘金首页的头像信息

掘金为了做 seo，解决自己的最大短板，把首页信息静态化了，因此没有直接的接口获取目标用户的信息。

只能通过 https://juejin.cn/user/2780007432717400 接口获取首页信息。虽然它是 xml 结构的，没事，完全够用了。

通过两个正则，可以分别得到 头像链接 和 用户名。

// 获取头像地址
const getAvatarPath = (str) => {
  const arr = str?.match(/<img src="(.*)" data-src="(.*)" alt="(.*)的个人资料头像" class="lazy avatar"/)
  return arr?.[1]
}
// 获取用户名
const getUserName = (str) => {
  const arr = str?.match(/>(.*) 的个人主页 - 动态 - 掘金</)
  return arr?.[1]
}

6.2 处理图片

虽然我们在所有端看到的头像都是圆的，但掘金在存储头像时是按上传时的尺寸进行存储的。
因此获取到的图像资源是矩形的。

对于矩形的图片资源，我们按下面思路一步步处理即可：
处理图片的思路

至于处理图片的细节，涉及到海量的canvas api(其实就那么几个)，不在此赘述了，有兴趣的小伙伴可以直接看本项目的源码。

6.3 处理请求跨域的问题

从 zhangshichun.top 博客域到 juejin.cn 域当然是存在跨域问题的，我的选择是通过 nginx 完成转发，解决各种可能存在的跨域问题。

配置如下：

  location /juejin/ {
    # 一定不要忽略最后那个 / 
    proxy_pass https://juejin.cn/;
  }

6.4 实现自动部署

我的时间很宝贵，要摸鱼，要写文。

因此我直接复制了这篇文章内提供的脚本：《【一库】ssh2-sftp-client: 一键将你的博客或项目部署到远程服务器（贼方便！！）》

快速实现了在博客上的部署工作，告别一次次打开 xshell 和 xftp 的繁琐工作。

// 开始干活
yarn build
yarn deploy
// 干完了，美滋滋

七、结束

我是春哥。
我热爱 vue.js , ElementUI , Element Plus 相关技术栈，我的目标是给大家分享最实用、最有用的知识点，希望大家都可以早早下班，并可以飞速完成工作，淡定摸鱼🐟。

你可以在掘金关注我，也可以在公众号里找到我：前端要摸鱼。
希望大家玩得开心。