笔记 | “拾迹”张大侠个人简历模板修改

oduang

2020 年 03 月 24 日

2627 次浏览

暂无评论

1396字数

笔记分享

>### 介绍

最近一直在网上找一款个人简历模板，在经过无所的对比后，发现还是张大侠的个人简历模板效果最好，但该模板个人logo无法显示，加之侧边信息栏随页面一起滚动，遂在网上查询相关教程、予以修改。
![拾迹个人简历模板-修改版][1]

>### 代码修改

#### logo部分

- 删除以下代码：原24-29行
```
<script>
    function loading() {
            document.getElementsByClassName('avatar')[0].style.display = 'block';
            document.getElementsByClassName('loading')[0].style.display = 'none';
   }
</script>
```

- 添加以下代码：75行后
```
<script type="text/javascript">
      avatar.onload = function() {
            setTimeout(function(){
                document.getElementsByClassName('avatar')[0] .style.display = 'block';
                document.getElementsByClassName('loading')[0] .style.display = 'none';},1000)
       }
</script>

```

#### 左侧栏固定（手机会产生问题）
 - 原37-46行代码替换为
```
<section class="side" id="side" style="position: fixed;">
     <label class="switch" style="display: none;" onchange="switchFixed()">
     <script type="text/javaScript">
     function switchFixed(){
     var value = document.getElementById('side').style.position === 'fixed' ? 'absolute' : 'fixed';
     document.getElementById('side').style.position = value;
     }
</script>
```

>### 预览与下载

修改前DEMO：[https://itsay.gitee.io/resume/][2]
修改后DEMO：[https://oduang.github.io/resume/][3]
github仓库：[https://github.com/oduang/resume/][4]

>### 致谢

向原作者致谢：[https://gitee.com/itsay/resume][5]

[1]: https://www.oduang.com/usr/uploads/2020/03/820396975.png
  [2]: https://itsay.gitee.io/resume/
  [3]: https://oduang.github.io/resume/
  [4]: https://github.com/oduang/resume/
  [5]: https://gitee.com/itsay/resume

最后修改：2020 年 06 月 25 日