-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
81 lines (80 loc) · 38.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!doctype html>
<html lang="zh"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta><title>阿东zza</title><link rel="manifest" href="/manifest.json"><meta name="application-name" content="阿东zza"><meta name="msapplication-TileImage" content="/images/favicon.svg"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-title" content="阿东zza"><meta name="apple-mobile-web-app-status-bar-style" content="default"><meta property="og:type" content="blog"><meta property="og:title" content="(>_<)"><meta property="og:url" content="https://waydez.github.io/"><meta property="og:site_name" content="阿东zza"><meta property="og:locale" content="zh_CN"><meta property="og:image" content="https://waydez.github.io/img/og_image.png"><meta property="article:author" content="waydez"><meta property="twitter:card" content="summary"><meta property="twitter:image" content="/img/og_image.png"><script type="application/ld+json">{"@context":"https://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@type":"WebPage","@id":"https://waydez.github.io"},"headline":"阿东zza","image":["https://waydez.github.io/img/og_image.png"],"author":{"@type":"Person","name":"waydez"},"publisher":{"@type":"Organization","name":"阿东zza","logo":{"@type":"ImageObject","url":"https://waydez.github.io/images/logo.svg"}},"description":""}</script><link rel="icon" href="/images/favicon.svg"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/styles/atom-one-light.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;600&family=Source+Code+Pro"><link rel="stylesheet" href="/css/default.css"><style>body>.footer,body>.navbar,body>.section{opacity:0}</style><!--!--><!--!--><!--!--><!--!--><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/cookieconsent.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/lightgallery.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/justifiedGallery.min.css"><!--!--><!--!--><script src="https://cdn.jsdelivr.net/npm/[email protected]/pace.min.js"></script><!--!--><!--!--><meta name="generator" content="Hexo 5.4.0"></head><body class="is-3-column"><nav class="navbar navbar-main"><div class="container"><div class="navbar-brand justify-content-center"><a class="navbar-item navbar-logo" href="/"><img src="/images/logo.svg" alt="阿东zza" height="28"></a></div><div class="navbar-menu"><div class="navbar-start"><a class="navbar-item is-active" href="/">首页</a><a class="navbar-item" href="/archives">归档</a><a class="navbar-item" href="/categories">类别</a><a class="navbar-item" href="/tags">标签</a><a class="navbar-item" href="/about">关于我</a></div><div class="navbar-end"><a class="navbar-item search" title="搜索" href="javascript:;"><i class="fas fa-search"></i></a></div></div></div></nav><section class="section"><div class="container"><div class="columns"><div class="column order-2 column-main is-8-tablet is-8-desktop is-6-widescreen"><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item"><time dateTime="2024-03-20T08:18:34.000Z" title="2024/3/20 16:18:34">2024-03-20</time>发表</span><span class="level-item"><time dateTime="2024-04-30T11:17:19.024Z" title="2024/4/30 19:17:19">2024-04-30</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/Front-end-Study/">Front-end Study</a></span><span class="level-item">4 分钟读完 (大约530个字)</span></div></div><h1 class="title is-3 is-size-4-mobile"><a class="link-muted" href="/typescript-utility-types/">TypeScript 中各种实用工具类型的功能示例</a></h1><div class="content"><h3 id="Partial"><a href="#Partial" class="headerlink" title="Partial"></a>Partial</h3><p>Partial 工具类型可以将接口中的所有属性转换为可选属性。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> User {</span><br><span class="line"> id: <span class="built_in">number</span>;</span><br><span class="line"> name: <span class="built_in">string</span>;</span><br><span class="line"> age: <span class="built_in">number</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> PartialUser = Partial<User>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> partialUser: PartialUser = { <span class="attr">id</span>: <span class="number">1</span> };</span><br></pre></td></tr></table></figure></div><a class="article-more button is-small is-size-7" href="/typescript-utility-types/#more">阅读更多</a></article></div><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item"><time dateTime="2024-02-20T14:44:44.000Z" title="2024/2/20 22:44:44">2024-02-20</time>发表</span><span class="level-item"><time dateTime="2024-02-20T15:01:28.765Z" title="2024/2/20 23:01:28">2024-02-20</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/Front-end-Study/">Front-end Study</a></span><span class="level-item">2 分钟读完 (大约242个字)</span></div></div><h1 class="title is-3 is-size-4-mobile"><a class="link-muted" href="/parallel-task/">并发任务控制</a></h1><div class="content"><p>遇到的问题如下，需要构建一个 <code>SuperTask</code> 这么一个类，来实现并发任务控制。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">SuperTask</span> </span>{</span><br><span class="line"> <span class="comment">// todo</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sleep</span>(<span class="params">time</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve</span>) =></span> {</span><br><span class="line"> <span class="built_in">setTimeout</span>(<span class="function">() =></span> {</span><br><span class="line"> resolve()</span><br><span class="line"> }, time)</span><br><span class="line"> })</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> superTask = <span class="keyword">new</span> SuperTask()</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">addTask</span>(<span class="params">time, name</span>) </span>{</span><br><span class="line"> superTask</span><br><span class="line"> .add(<span class="function">() =></span> sleep(time))</span><br><span class="line"> .then(<span class="function">() =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">`任务<span class="subst">${name}</span>完成`</span>)</span><br><span class="line"> })</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">addTask(<span class="number">10000</span>, <span class="number">1</span>)</span><br><span class="line">addTask(<span class="number">5000</span>, <span class="number">2</span>)</span><br><span class="line">addTask(<span class="number">3000</span>, <span class="number">3</span>)</span><br><span class="line">addTask(<span class="number">4000</span>, <span class="number">4</span>)</span><br><span class="line">addTask(<span class="number">5000</span>, <span class="number">5</span>)</span><br></pre></td></tr></table></figure></div><a class="article-more button is-small is-size-7" href="/parallel-task/#more">阅读更多</a></article></div><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item"><time dateTime="2024-01-05T13:39:54.000Z" title="2024/1/5 21:39:54">2024-01-05</time>发表</span><span class="level-item"><time dateTime="2024-04-30T11:14:41.531Z" title="2024/4/30 19:14:41">2024-04-30</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/Front-end-Study/">Front-end Study</a></span><span class="level-item">1 分钟读完 (大约192个字)</span></div></div><h1 class="title is-3 is-size-4-mobile"><a class="link-muted" href="/function2class/">function 转 class</a></h1><div class="content"><p>如何将下面的代码转换为<strong>普通构造函数</strong>的写法？</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Animal</span> </span>{</span><br><span class="line"> <span class="function"><span class="title">constructor</span>(<span class="params">name</span>)</span> {</span><br><span class="line"> <span class="built_in">this</span>.name = name</span><br><span class="line"> }</span><br><span class="line"> <span class="function"><span class="title">run</span>(<span class="params"></span>)</span> {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="built_in">this</span>.name + <span class="string">' is running!'</span>)</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></div><a class="article-more button is-small is-size-7" href="/function2class/#more">阅读更多</a></article></div><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item"><time dateTime="2024-01-01T11:36:25.000Z" title="2024/1/1 19:36:25">2024-01-01</time>发表</span><span class="level-item"><time dateTime="2024-01-01T12:35:46.338Z" title="2024/1/1 20:35:46">2024-01-01</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/Front-end-Study/">Front-end Study</a></span><span class="level-item">2 分钟读完 (大约264个字)</span></div></div><h1 class="title is-3 is-size-4-mobile"><a class="link-muted" href="/amazing-underline-css/">一个很棒的下划线css 效果</a></h1><div class="content"><p>最近刷视频刷到一个分享，发现是一个很棒的 css 效果：通过使用<code>background</code>相关属性来实现一段文本的多彩下划线样式，并且在鼠标悬浮时进行显示。</p>
<p>先思考一下自己可以有哪些手段来实现，然后再来了解一下这里的实现手段吧：</p></div><a class="article-more button is-small is-size-7" href="/amazing-underline-css/#more">阅读更多</a></article></div><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item"><time dateTime="2023-12-02T09:13:34.000Z" title="2023/12/2 17:13:34">2023-12-02</time>发表</span><span class="level-item"><time dateTime="2023-12-02T09:19:03.892Z" title="2023/12/2 17:19:03">2023-12-02</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/Front-end-Study/">Front-end Study</a></span><span class="level-item">23 分钟读完 (大约3450个字)</span></div></div><h1 class="title is-3 is-size-4-mobile"><a class="link-muted" href="/path-draw/">svg中 path 的路径命令</a></h1><div class="content"><p><code>路径命令</code>是对要绘制的路径的说明。每一个命令由代表命令的字母和代表参数的数字组成。</p>
<p>SVG 定义了六种路径命令类型，一共 20 条命令：</p>
<ul>
<li>MoveTo(移动到)：<code>M</code>、<code>m</code></li>
<li>LineTo(画线至)：<code>L</code>、<code>l</code>、<code>H</code>、<code>h</code>、<code>V</code>、`v</li>
<li>BezierCurve(贝塞尔曲线)<ul>
<li>二次贝塞尔曲线：<code>Q</code>、<code>q</code>、<code>T</code>、<code>t</code></li>
<li>三次贝塞尔曲线：<code>C</code>、<code>c</code>、<code>S</code>、<code>s</code></li>
</ul>
</li>
<li>椭圆曲线：<code>A</code>、<code>a</code></li>
<li>ClosePath(封闭路径)：<code>Z</code>、<code>z</code></li>
</ul>
<p>本文主要是针对以上命令，进行整理</p></div><a class="article-more button is-small is-size-7" href="/path-draw/#more">阅读更多</a></article></div><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item"><time dateTime="2023-11-25T14:42:46.000Z" title="2023/11/25 22:42:46">2023-11-25</time>发表</span><span class="level-item"><time dateTime="2023-12-16T10:52:05.584Z" title="2023/12/16 18:52:05">2023-12-16</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/Front-end-Study/">Front-end Study</a></span><span class="level-item">5 分钟读完 (大约819个字)</span></div></div><h1 class="title is-3 is-size-4-mobile"><a class="link-muted" href="/Loader-Plugin-Webpack/">webpack 中 loader 和 plugin 的不同</a></h1><div class="content"><h3 id="作用不同"><a href="#作用不同" class="headerlink" title="作用不同"></a>作用不同</h3><ul>
<li><p>Loader 用于转换某些类型的模块，为其他模块提供加载支持。</p>
<p>提供给 webpack 加载和解析非 JavaScript 文件的一个能力</p>
</li>
<li><p>Plugin 用于改变 webpack 的打包行为。</p>
<p>扩展 webpack 的功能，使 webpack 拥有更多的灵活性</p>
</li>
</ul></div><a class="article-more button is-small is-size-7" href="/Loader-Plugin-Webpack/#more">阅读更多</a></article></div><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item"><time dateTime="2023-11-25T14:20:48.000Z" title="2023/11/25 22:20:48">2023-11-25</time>发表</span><span class="level-item"><time dateTime="2023-11-28T05:57:19.510Z" title="2023/11/28 13:57:19">2023-11-28</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/Front-end-Study/">Front-end Study</a></span><span class="level-item">3 分钟读完 (大约453个字)</span></div></div><h1 class="title is-3 is-size-4-mobile"><a class="link-muted" href="/process-of-webpack/">webpack的构建流程</a></h1><div class="content"><p>Webpack的构建流程，包括初始化参数、开始编译、确定入口、编译模块、完成模块编译、输出资源和输出完成等7个步骤。</p></div><a class="article-more button is-small is-size-7" href="/process-of-webpack/#more">阅读更多</a></article></div><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item"><time dateTime="2023-11-25T13:39:12.000Z" title="2023/11/25 21:39:12">2023-11-25</time>发表</span><span class="level-item"><time dateTime="2023-11-28T06:05:29.316Z" title="2023/11/28 14:05:29">2023-11-28</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/Front-end-Study/">Front-end Study</a></span><span class="level-item">7 分钟读完 (大约991个字)</span></div></div><h1 class="title is-3 is-size-4-mobile"><a class="link-muted" href="/comparison-between-Vue-React/">Vue 和 React 的比较</a></h1><div class="content"><blockquote>
<p>自从入了 Vue 的坑，都快忘记了 React</p>
</blockquote>
<p>最近突然想起来 React，这么久没有接触，想试着玩一玩。</p>
<p>回想起大学时，学长们的分享，总是说 Vue 更易上手，所以就入了 Vue 的坑，但是仔细想想，自己却从来没有亲自去认真了解过 React，真是罪过…</p>
<p>趁此机会了解一下 React，试着把 Vue 和 React 进行一下比较。在网上找到一篇大佬的分享，觉得非常棒，文章内容很详细，链接我放到后文中。</p>
<p>我看完之后想简单总结性的记一下</p></div><a class="article-more button is-small is-size-7" href="/comparison-between-Vue-React/#more">阅读更多</a></article></div><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item"><time dateTime="2023-03-28T09:51:58.000Z" title="2023/3/28 17:51:58">2023-03-28</time>发表</span><span class="level-item"><time dateTime="2023-04-06T06:47:43.094Z" title="2023/4/6 14:47:43">2023-04-06</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/Front-end-Study/">Front-end Study</a></span><span class="level-item">1 分钟读完 (大约182个字)</span></div></div><h1 class="title is-3 is-size-4-mobile"><a class="link-muted" href="/relationship-selector-in-CSS/">css中的关系选择器</a></h1><div class="content"><blockquote>
<p>⚠️后代选择器和子代选择器比较常用，还有两个选择器需要记住</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 后代选择器——典型用单个空格（" "）字符——组合两个选择器 */</span></span><br><span class="line"><span class="selector-tag">body</span> <span class="selector-tag">article</span> <span class="selector-tag">p</span></span><br><span class="line"><span class="comment">/* 子代关系选择器是个大于号（>），只会在选择器选中直接子元素的时候匹配 */</span></span><br><span class="line"><span class="selector-tag">article</span> > <span class="selector-tag">p</span></span><br><span class="line"><span class="comment">/* 邻接兄弟选择器（+）用来选中恰好处于另一个在继承关系上同级的元素旁边的物件，只能是邻接 */</span></span><br><span class="line"><span class="selector-tag">p</span> + <span class="selector-tag">img</span></span><br><span class="line"><span class="comment">/* 通用兄弟选择器（~）用来选中，一个元素后的兄弟元素，即使它们不直接相邻，在前面选不到 */</span></span><br><span class="line"><span class="selector-tag">p</span> ~ <span class="selector-tag">img</span></span><br></pre></td></tr></table></figure>
</div></article></div><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item"><time dateTime="2023-03-19T08:24:12.000Z" title="2023/3/19 16:24:12">2023-03-19</time>发表</span><span class="level-item"><time dateTime="2023-11-25T14:46:50.386Z" title="2023/11/25 22:46:50">2023-11-25</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/Front-end-Study/">Front-end Study</a></span><span class="level-item">1 分钟读完 (大约140个字)</span></div></div><h1 class="title is-3 is-size-4-mobile"><a class="link-muted" href="/custom-eventbus-with-vue-life-circle/">event-bug结合vue生命周期使用</a></h1><div class="content"><p><code>event-bus</code> 在vue中使用时，为了避免在vue组件未实际生效时，event-bus就进行事件的监听。因此需要结合vue的生命周期进行代理实现。</p></div><a class="article-more button is-small is-size-7" href="/custom-eventbus-with-vue-life-circle/#more">阅读更多</a></article></div><nav class="pagination" role="navigation" aria-label="pagination"><div class="pagination-previous is-invisible is-hidden-mobile"><a href="/page/0/">上一页</a></div><div class="pagination-next"><a href="/page/2/">下一页</a></div><ul class="pagination-list is-hidden-mobile"><li><a class="pagination-link is-current" href="/">1</a></li><li><a class="pagination-link" href="/page/2/">2</a></li><li><a class="pagination-link" href="/page/3/">3</a></li><li><a class="pagination-link" href="/page/4/">4</a></li></ul></nav></div><div class="column column-left is-4-tablet is-4-desktop is-3-widescreen order-1"><div class="card widget" data-type="profile"><div class="card-content"><nav class="level"><div class="level-item has-text-centered flex-shrink-1"><div><figure class="image is-128x128 mx-auto mb-2"><img class="avatar" src="/images/avatar.png" alt="waydez"></figure><p class="title is-size-4 is-block" style="line-height:inherit;">waydez</p><p class="is-size-6 is-block">I have no idea.</p><p class="is-size-6 is-flex justify-content-center"><i class="fas fa-map-marker-alt mr-1"></i><span>ShangHai,China</span></p></div></div></nav><nav class="level is-mobile"><div class="level-item has-text-centered is-marginless"><div><p class="heading">文章</p><a href="/archives"><p class="title">37</p></a></div></div><div class="level-item has-text-centered is-marginless"><div><p class="heading">分类</p><a href="/categories"><p class="title">6</p></a></div></div><div class="level-item has-text-centered is-marginless"><div><p class="heading">标签</p><a href="/tags"><p class="title">36</p></a></div></div></nav><div class="level"><a class="level-item button is-primary is-rounded" href="https://github.com/waydez" target="_blank" rel="noopener">关注我</a></div><div class="level is-mobile is-multiline"><a class="level-item button is-transparent is-marginless" target="_blank" rel="noopener" title="Github" href="https://github.com/waydez"><i class="fab fa-github"></i></a><a class="level-item button is-transparent is-marginless" target="_blank" rel="noopener" title="Facebook" href="https://facebook.com"><i class="fab fa-facebook"></i></a><a class="level-item button is-transparent is-marginless" target="_blank" rel="noopener" title="Twitter" href="https://twitter.com"><i class="fab fa-twitter"></i></a></div></div></div><div class="card widget" data-type="recent-posts"><div class="card-content"><h3 class="menu-label">最新文章</h3><article class="media"><div class="media-content"><p class="date"><time dateTime="2024-03-20T08:18:34.000Z">2024-03-20</time></p><p class="title"><a href="/typescript-utility-types/">TypeScript 中各种实用工具类型的功能示例</a></p><p class="categories"><a href="/categories/Front-end-Study/">Front-end Study</a></p></div></article><article class="media"><div class="media-content"><p class="date"><time dateTime="2024-02-20T14:44:44.000Z">2024-02-20</time></p><p class="title"><a href="/parallel-task/">并发任务控制</a></p><p class="categories"><a href="/categories/Front-end-Study/">Front-end Study</a></p></div></article><article class="media"><div class="media-content"><p class="date"><time dateTime="2024-01-05T13:39:54.000Z">2024-01-05</time></p><p class="title"><a href="/function2class/">function 转 class</a></p><p class="categories"><a href="/categories/Front-end-Study/">Front-end Study</a></p></div></article><article class="media"><div class="media-content"><p class="date"><time dateTime="2024-01-01T11:36:25.000Z">2024-01-01</time></p><p class="title"><a href="/amazing-underline-css/">一个很棒的下划线css 效果</a></p><p class="categories"><a href="/categories/Front-end-Study/">Front-end Study</a></p></div></article><article class="media"><div class="media-content"><p class="date"><time dateTime="2023-12-02T09:13:34.000Z">2023-12-02</time></p><p class="title"><a href="/path-draw/">svg中 path 的路径命令</a></p><p class="categories"><a href="/categories/Front-end-Study/">Front-end Study</a></p></div></article></div></div><div class="column-right-shadow is-hidden-widescreen"></div></div><div class="column column-right is-4-tablet is-4-desktop is-3-widescreen is-hidden-touch is-hidden-desktop-only order-3"><div class="card widget" data-type="archives"><div class="card-content"><div class="menu"><h3 class="menu-label">归档</h3><ul class="menu-list"><li><a class="level is-mobile" href="/archives/2024/03/"><span class="level-start"><span class="level-item">三月 2024</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile" href="/archives/2024/02/"><span class="level-start"><span class="level-item">二月 2024</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile" href="/archives/2024/01/"><span class="level-start"><span class="level-item">一月 2024</span></span><span class="level-end"><span class="level-item tag">2</span></span></a></li><li><a class="level is-mobile" href="/archives/2023/12/"><span class="level-start"><span class="level-item">十二月 2023</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile" href="/archives/2023/11/"><span class="level-start"><span class="level-item">十一月 2023</span></span><span class="level-end"><span class="level-item tag">3</span></span></a></li><li><a class="level is-mobile" href="/archives/2023/03/"><span class="level-start"><span class="level-item">三月 2023</span></span><span class="level-end"><span class="level-item tag">4</span></span></a></li><li><a class="level is-mobile" href="/archives/2021/12/"><span class="level-start"><span class="level-item">十二月 2021</span></span><span class="level-end"><span class="level-item tag">2</span></span></a></li><li><a class="level is-mobile" href="/archives/2021/07/"><span class="level-start"><span class="level-item">七月 2021</span></span><span class="level-end"><span class="level-item tag">7</span></span></a></li><li><a class="level is-mobile" href="/archives/2021/05/"><span class="level-start"><span class="level-item">五月 2021</span></span><span class="level-end"><span class="level-item tag">2</span></span></a></li><li><a class="level is-mobile" href="/archives/2021/03/"><span class="level-start"><span class="level-item">三月 2021</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile" href="/archives/2021/02/"><span class="level-start"><span class="level-item">二月 2021</span></span><span class="level-end"><span class="level-item tag">2</span></span></a></li><li><a class="level is-mobile" href="/archives/2021/01/"><span class="level-start"><span class="level-item">一月 2021</span></span><span class="level-end"><span class="level-item tag">2</span></span></a></li><li><a class="level is-mobile" href="/archives/2020/03/"><span class="level-start"><span class="level-item">三月 2020</span></span><span class="level-end"><span class="level-item tag">3</span></span></a></li><li><a class="level is-mobile" href="/archives/2020/02/"><span class="level-start"><span class="level-item">二月 2020</span></span><span class="level-end"><span class="level-item tag">5</span></span></a></li><li><a class="level is-mobile" href="/archives/2020/01/"><span class="level-start"><span class="level-item">一月 2020</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li></ul></div></div></div><div class="card widget" data-type="categories"><div class="card-content"><div class="menu"><h3 class="menu-label">分类</h3><ul class="menu-list"><li><a class="level is-mobile" href="/categories/Config-Share/"><span class="level-start"><span class="level-item">Config Share</span></span><span class="level-end"><span class="level-item tag">8</span></span></a></li><li><a class="level is-mobile" href="/categories/Course-Notes/"><span class="level-start"><span class="level-item">Course Notes</span></span><span class="level-end"><span class="level-item tag">3</span></span></a></li><li><a class="level is-mobile" href="/categories/DevOps-Record/"><span class="level-start"><span class="level-item">DevOps Record</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile" href="/categories/Front-end-Study/"><span class="level-start"><span class="level-item">Front-end Study</span></span><span class="level-end"><span class="level-item tag">16</span></span></a></li><li><a class="level is-mobile" href="/categories/Front-end-Study/"><span class="level-start"><span class="level-item">Front-end-Study</span></span><span class="level-end"><span class="level-item tag">2</span></span></a></li><li><a class="level is-mobile" href="/categories/Study-Share/"><span class="level-start"><span class="level-item">Study Share</span></span><span class="level-end"><span class="level-item tag">6</span></span></a></li></ul></div></div></div><div class="card widget" data-type="tags"><div class="card-content"><div class="menu"><h3 class="menu-label">标签</h3><div class="field is-grouped is-grouped-multiline"><div class="control"><a class="tags has-addons" href="/tags/Axios/"><span class="tag">Axios</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/C/"><span class="tag">C</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/C/"><span class="tag">C++</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/CSS/"><span class="tag">CSS</span><span class="tag">3</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Cross-domin/"><span class="tag">Cross-domin</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Data-Structure/"><span class="tag">Data Structure</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Docker/"><span class="tag">Docker</span><span class="tag">3</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Electron/"><span class="tag">Electron</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Express/"><span class="tag">Express</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/FTP/"><span class="tag">FTP</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Flex/"><span class="tag">Flex</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Generator/"><span class="tag">Generator</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Hexo/"><span class="tag">Hexo</span><span class="tag">4</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Https/"><span class="tag">Https</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/JS-%E7%BC%96%E7%A8%8B%E6%80%9D%E8%B7%AF/"><span class="tag">JS 编程思路</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/JavaScript/"><span class="tag">JavaScript</span><span class="tag">7</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Linux/"><span class="tag">Linux</span><span class="tag">3</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Markdown/"><span class="tag">Markdown</span><span class="tag">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/NPM/"><span class="tag">NPM</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/NVM/"><span class="tag">NVM</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Network/"><span class="tag">Network</span><span class="tag">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Node/"><span class="tag">Node</span><span class="tag">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Others/"><span class="tag">Others</span><span class="tag">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Path/"><span class="tag">Path</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Promise/"><span class="tag">Promise</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/React/"><span class="tag">React</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/RegExp/"><span class="tag">RegExp</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/SCP/"><span class="tag">SCP</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/SFTP/"><span class="tag">SFTP</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/SSH/"><span class="tag">SSH</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Sublime/"><span class="tag">Sublime</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Svg/"><span class="tag">Svg</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Uni-app/"><span class="tag">Uni-app</span><span class="tag">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Vue/"><span class="tag">Vue</span><span class="tag">6</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Win10/"><span class="tag">Win10</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/webpack/"><span class="tag">webpack</span><span class="tag">2</span></a></div></div></div></div></div></div></div></div></section><footer class="footer"><div class="container"><div class="level"><div class="level-start"><a class="footer-logo is-block mb-2" href="/"><img src="/images/logo.svg" alt="阿东zza" height="28"></a><p class="is-size-7"><span>© 2024 waydez</span> Powered by <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a> & <a href="https://github.com/ppoffice/hexo-theme-icarus" target="_blank" rel="noopener">Icarus</a></p></div><div class="level-end"></div></div></div></footer><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/min/moment-with-locales.min.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js" defer></script><script>moment.locale("zh-CN");</script><script>var IcarusThemeSettings = {
article: {
highlight: {
clipboard: true,
fold: 'unfolded'
}
}
};</script><script src="/js/column.js"></script><script src="/js/animation.js"></script><a id="back-to-top" title="回到顶端" href="javascript:;"><i class="fas fa-chevron-up"></i></a><script src="/js/back_to_top.js" defer></script><!--!--><!--!--><!--!--><script src="https://cdn.jsdelivr.net/npm/[email protected]/build/cookieconsent.min.js" defer></script><script>window.addEventListener("load", () => {
window.cookieconsent.initialise({
type: "info",
theme: "edgeless",
static: false,
position: "bottom-left",
content: {
message: "此网站使用Cookie来改善您的体验。",
dismiss: "知道了！",
allow: "允许使用Cookie",
deny: "拒绝",
link: "了解更多",
policy: "Cookie政策",
href: "https://www.cookiesandyou.com/",
},
palette: {
popup: {
background: "#edeff5",
text: "#838391"
},
button: {
background: "#4b81e8"
},
},
});
});</script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/lightgallery.min.js" defer></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/jquery.justifiedGallery.min.js" defer></script><script>window.addEventListener("load", () => {
if (typeof $.fn.lightGallery === 'function') {
$('.article').lightGallery({ selector: '.gallery-item' });
}
if (typeof $.fn.justifiedGallery === 'function') {
if ($('.justified-gallery > p > .gallery-item').length) {
$('.justified-gallery > p > .gallery-item').unwrap();
}
$('.justified-gallery').justifiedGallery();
}
});</script><!--!--><!--!--><!--!--><!--!--><!--!--><script src="/js/main.js" defer></script><div class="searchbox"><div class="searchbox-container"><div class="searchbox-header"><div class="searchbox-input-container"><input class="searchbox-input" type="text" placeholder="想要查找什么..."></div><a class="searchbox-close" href="javascript:;">×</a></div><div class="searchbox-body"></div></div></div><script src="/js/insight.js" defer></script><script>document.addEventListener('DOMContentLoaded', function () {
loadInsight({"contentUrl":"/content.json"}, {"hint":"想要查找什么...","untitled":"(无标题)","posts":"文章","pages":"页面","categories":"分类","tags":"标签"});
});</script></body></html>