我的第一次PR，一个炫酷的个人介绍页面

是乃德也是Ned

发布于 2022-08-04 10:05:46

3650

发布于 2022-08-04 10:05:46

文章被收录于专栏：前端成长日记

前言

一直想做个关于介绍的个人页面，挂在域名的根路径下面，当home页用，还不想手动的去自己从0到1的去做一个，觉得那很浪费时间，直到我前几天逛github，发现了这个项目，瞬间觉得，它就是我想要的样子~

个人简介页面模板

女生自用99新？？？？引起了我极大的好奇心，连忙点进去。

111.jfif

这个项目是Vue做的，READEME里面给与了充足的介绍，跟效果图，demo网址等，给了小白充足的了解去把这个项目更改成为自己的一个介绍网页，里面的功能也是十分的齐全。

image.png

我的github上有直达链接哦，感兴趣的小伙伴可以冲~

我也是十分的欣喜，终于找到了我喜欢的样子，于是直接git clone，将项目拉下来，进去照着注释，文档，各种改了改，于是他最后成了这个样子：

传送门查看效果：www.wangez.site

现在.png

这里我又要说一件事情了，这个项目原来，下方的icon不是我截屏中的这样，而是这个效果：

原来.png而我心中的页面，下方想要放一些自己的站点，点击可以直接跳转的那种，并且我觉得他原来做的动效也很好看，可以保留，于是就想着，我能不能自己给他改动一下，使得🐟和🐻可以兼得呢？

是不是做出来还可以提个PR，满足我的开源梦~

我的第一次PR

说做就做，我去找到了有关icon的函数，查了一下相关的配置，发现我这个需求其实不难实现。用到的原本的数据格式是这样：

[
    {
      name: "Github",
      icon: "icon brands fa-github",
      desc: "Github",
      content: "https://www.wangez.site/",
      show: false,
      // jump: true,
    }
]

下面函数是获知用户点击了哪个icon，传入对应的name，从而去将show改成true，将其内部的content显示出来。

showContact: function (name) {
    let num = 0;
    for (let i = 0; i < this.contacts.length; i++) {
      if (this.contacts[i].name == name) {
        num = i;
        break;
      }
    }
    this.hideContact(false);
    this.defaults = 0;
    clearTimeout(this.timer);
    this.timer = setTimeout(() => {
      this.contacts[num].show = true;
      this.backButton = true;
    }, 500);
}

我在这个数据中加入一个jump字段，也是有着true，false，两个值，如果根据name得到的那组数据中的jump字段是true，就将其跳转，false我们就不管，继续执行他原本的动效操作。

showContact: function (name) {
    let num = 0;
    for (let i = 0; i < this.contacts.length; i++) {
      if (this.contacts[i].name == name) {
        num = i;
        break;
      }
    }
    if (this.contacts[num].jump == true) {
      window.open(this.contacts[num].content);
      return;
    }
    this.hideContact(false);
    this.defaults = 0;
    clearTimeout(this.timer);
    this.timer = setTimeout(() => {
      this.contacts[num].show = true;
      this.backButton = true;
    }, 500);
}

改完，测试完的我，就兴致勃勃的提交了我人生中的第一个PR，后来跟项目作者在github上交流了几次，也做了部分修改后，我的PR成功被采纳了！！！！！