# CV

**Repository Path**: chenttianlin/cv

## Basic Information

- **Project Name**: CV
- **Description**: CV大全 ，常用的代码块
- **Primary Language**: 其他
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-10-08
- **Last Updated**: 2025-04-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# CV

## 介绍
常用的代码块

![](http://127.0.0.1:9005/typora/2024/10/15/八重神子.jpg)
node 环境

### 验证安装

```sh
#验证node
node -v

#验证npm
npm -v
```

### 安装 docsify-cli 工具

推荐全局安装 `docsify-cli` 工具，可以方便地创建及在本地预览生成的文档。npm v18 左右

```sh
#用npm安装全局工具
npm i docsify-cli -g
```

### 初始化项目

```sh
docsify init .
```

- `index.html` 入口文件
- `README.md` 会做为主页内容渲染
- `.nojekyll` 用于阻止 GitHub Pages 忽略掉下划线开头的文件

### 本地预览

```sh
docsify serve -p 3
```

### 配置

```js
window.$docsify = {
      //_navbar.md 导航栏
      loadNavbar: true
    
      //内容有4层目录级别
      subMaxLevel: 2
    
      // 搜索
      // <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>

      search: 'auto', // 默认值
    
    
      //开启 封面
      coverpage: true,
    
      // 封面是否单独一个页面
      // onlyCover: true,
    
      // 自定义侧边栏  _sidebar.md
      loadSidebar: true,
    
      // 复制
      // <script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>

}
```

### 自定义功能-复制内容

`<font style="background-color:transparent"></font>` 给这种添加复制功能

```css
font[style="background-color:transparent"] {  
    position: relative; 
    padding-right: 50px; 
}  

/* 使用伪元素添加复制图标 */  
font[style="background-color:transparent"]::after {  
    content: '📋'; /* 使用emoji作为图标 */  
    position: absolute; /* 绝对定位 */  
    right: 5px; /* 距离右边的距离 */  
    cursor: pointer; /* 改变光标样式 */  
    font-size: 16px; /* 图标大小 */  
}
```

```html
  <script>  
    document.addEventListener("DOMContentLoaded", function() {  
           // 为body添加一个点击事件  
           document.body.addEventListener('click', function(event) {  
               // 检查被点击的元素是否是符合条件的font标签  
               const fontElement = event.target.closest('font[style="background-color:transparent"]');  
               
               if (fontElement) {  
                   // 复制内容  
                   const textToCopy = fontElement.textContent;  
                   navigator.clipboard.writeText(textToCopy)  
                       .then(() => {  
                           console.log('已复制: ' + textToCopy);  
                       })  
                       .catch(err => {  
                           console.error('无法复制: ', err);  
                       });  
               }  
           });  
           // 在每个符合条件的font标签右边添加复制图标  
          //  const fontElements = document.querySelectorAll('font[style="background-color:transparent"]');  
          //  fontElements.forEach(fontElement => {  
          //      const copyIcon = document.createElement('span');  
          //      copyIcon.className = 'copy-icon';  
          //      copyIcon.textContent = '📋'; // 可以使用emoji作为图标  
          //      fontElement.parentNode.insertBefore(copyIcon, fontElement.nextSibling); // 在font标签后面插入图标  
          //  });  
       }); 
</script> 
```

### 自定义功能-弹窗

```css
#message-container {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
     
        /* 采用flex弹性布局，让容器内部的所有消息可以水平居中，还能任意的调整宽度 */
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #message-container .message {
        background: #fff;
        margin: 10px 0;
        padding: 0 10px;
        height: 40px;
        box-shadow: 0 0 10px 0 #eee;
        font-size: 14px;
        border-radius: 3px;
     
        /* 让消息内部的三个元素（图标、文本、关闭按钮）可以垂直水平居中 */
        display: flex;
        align-items: center;
    }
    #message-container .message .text {
        color: #333;
        padding: 0 20px 0 5px;
    }
    #message-container .message .close {
        cursor: pointer;
        color: #999;
    }
     
    /* 给每个图标都加上不同的颜色，用来区分不同类型的消息 */
    #message-container .message .icon-info {
        color: #0482f8;
    }
    #message-container .message .icon-error {
        color: #f83504;
    }
    #message-container .message .icon-success {
        color: #06a35a;
    }
    #message-container .message .icon-warning {
        color: #ceca07;
    }
    #message-container .message .icon-loading {
        color: #0482f8;
    }
    /* message.css */
     
    /* 这个动画规则我们就叫做message-move-in吧，随后我们会用animation属性在某个元素上应用这个动画规则。 */
    @keyframes message-move-in {
        0% {
            /* 前边分析过了，弹出动画是一个自上而下的淡入过程 */
            /* 所以在动画初始状态要把元素的不透明度设置为0，在动画结束的时候再把不透明度设置1，这样就会实现一个淡入动画 */
            opacity: 0;
            /* 那么“自上而下”这个动画可以用“transform”变换属性结合他的“translateY”上下平移函数来完成 */
            /* translateY(-100%)表示动画初始状态，元素在实际位置上面“自身一个高度”的位置。 */
            transform: translateY(-100%);
        }
        100% {
            opacity: 1;
            /* 平移到自身位置 */
            transform: translateY(0);
        }
    }
    /* message.css */
     
    #message-container .message.move-in {
        /* animation属性是用来加载某个动画规则 请参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation */
        animation: message-move-in 0.3s ease-in-out;
    }
    /* message.css */
    
    @keyframes message-move-out {
        0% {
            opacity: 1;
            transform: translateY(0);
        }
        100% {
            opacity: 0;
            transform: translateY(-100%);
        }
    }
    
    #message-container .message.move-out {
        animation: message-move-out 0.3s ease-in-out;
        /* 让动画结束后保持结束状态 */
        animation-fill-mode: forwards;
    }
```



```js
class Message {
        constructor() {
            const containerId = 'message-container';
            // 检测下html中是否已经有这个message-container元素
            this.containerEl = document.getElementById(containerId);
    
            if (!this.containerEl) {
                // 创建一个Element对象，也就是创建一个id为message-container的dom节点
                this.containerEl = document.createElement('div');
                this.containerEl.id = containerId;
                // 把message-container元素放在html的body末尾
                document.body.appendChild(this.containerEl);
            }
        }
    
        show({ type = 'info', text = '', duration = 2000, closeable = false }) {
            // 创建一个Element对象
            let messageEl = document.createElement('div');
            // 设置消息class，这里加上move-in可以直接看到弹出效果
            messageEl.className = 'message move-in';
            // 消息内部html字符串
            messageEl.innerHTML = `
            <span class="icon icon-${type}"></span>
            <div class="text">${text}</div>
        `;

        // 是否展示关闭按钮
        if (closeable) {
            // 创建一个关闭按钮
            let closeEl = document.createElement('div');
            closeEl.className = 'close icon icon-close';
            // 把关闭按钮追加到message元素末尾
            messageEl.appendChild(closeEl);

            // 监听关闭按钮的click事件，触发后将调用我们的close方法
            // 我们把刚才写的移除消息封装为一个close方法
            closeEl.addEventListener('click', () => {
                this.close(messageEl)
            });
        }

        // 追加到message-container末尾
        // this.containerEl属性是我们在构造函数中创建的message-container容器
        this.containerEl.appendChild(messageEl);

        // 只有当duration大于0的时候才设置定时器，这样我们的消息就会一直显示
        if (duration > 0) {
            // 用setTimeout来做一个定时器
            setTimeout(() => {
                this.close(messageEl);
            }, duration);
        } 

        }
        close(messageEl) {
            // 首先把move-in这个弹出动画类给移除掉，要不然会有问题，可以自己测试下
            messageEl.className = messageEl.className.replace('move-in', '');
            // 增加一个move-out类
            messageEl.className += 'move-out';

            // 这个地方是监听动画结束事件，在动画结束后把消息从dom树中移除。
            // 如果你是在增加move-out后直接调用messageEl.remove，那么你不会看到任何动画效果
            messageEl.addEventListener('animationend', () => {
                // Element对象内部有一个remove方法，调用之后可以将该元素从dom树种移除！
                messageEl.remove();
            });
        }
    }

// 使用
const message = new Message();
message.show({
    // info error success warning loading
    type: 'success',
    text: '已复制',
    duration: 1000,    // 不会自动消失
    closeable: true, // 可手动关闭
});
```



## emoji

1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣0️⃣