-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
121 lines (121 loc) · 48.3 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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!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>清秋的博客</title><link rel="manifest" href="/manifest.json"><meta name="application-name" content="清秋的博客"><meta name="msapplication-TileImage" content="/images/mylogo.png"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-title" content="清秋的博客"><meta name="apple-mobile-web-app-status-bar-style" content="default"><meta name="description" content="Front End, CS, Design, Translation, Art, PM"><meta property="og:type" content="blog"><meta property="og:title" content="清秋的博客"><meta property="og:url" content="https://ivocin.github.io/"><meta property="og:site_name" content="清秋的博客"><meta property="og:description" content="Front End, CS, Design, Translation, Art, PM"><meta property="og:locale" content="zh_CN"><meta property="og:image" content="https://ivocin.github.io/img/og_image.png"><meta property="article:author" content="清秋"><meta property="article:tag" content="Front End, CS, Design, Translation, Art, PM"><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://ivocin.github.io"},"headline":"清秋的博客","image":["https://ivocin.github.io/img/og_image.png"],"author":{"@type":"Person","name":"清秋"},"description":"Front End, CS, Design, Translation, Art, PM"}</script><link rel="icon" href="/images/mylogo.png"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/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=Oxanium:wght@300;400;600&family=Roboto+Mono"><link rel="stylesheet" href="/css/cyberpunk.css"><style>body>.footer,body>.navbar,body>.section{opacity:0}</style><!--!--><script>var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?e84c7e175906c3ea9fb7d904d291b461";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();</script><!--!--><!--!--><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/mylogo.png" alt="清秋的博客" 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" target="_blank" rel="noopener" title="Download on GitHub" href="http://github.com/ivocin"><i class="fab fa-github"></i></a><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"><div class="card-image"><a class="image is-7by3" href="/2021/03/24/new-JavaScript-Definitive-Guide-7-should-buy/"><img class="fill" src="/images/js-guide-book-buy.jpeg" alt="新版犀牛书该不该入手？"></a></div><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="2021-03-24T10:46:25.000Z" title="2021/3/24下午6:46:25">2021-03-24</time>发表</span><span class="level-item"><time dateTime="2021-03-28T09:26:59.983Z" title="2021/3/28下午5:26:59">2021-03-28</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/Front-End/">Front-End</a><span> / </span><a class="link-muted" href="/categories/Front-End/JavaScript/">JavaScript</a></span><span class="level-item">10 分钟读完 (大约1477个字)</span></div></div><h1 class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2021/03/24/new-JavaScript-Definitive-Guide-7-should-buy/">新版犀牛书该不该入手？</a></h1><div class="content"><blockquote>
<p>三月初，各大前端公众号开始一波抽奖送书活动，原来是经典的“犀牛书”<strong>《JavaScript 权威指南》第七版</strong>的中文版面世了，等不到抽奖，迫不及待买了一本，这几天粗读了一遍，先给出结论：<strong>本书内容较新，涵盖了 ES2020 之前的全部内容，可以入手。</strong></p>
</blockquote>
<h2 id="书变薄了"><a href="#书变薄了" class="headerlink" title="书变薄了"></a>书变薄了</h2><p>今天主要是想通过和第六版的对比的形式来看看第七版犀牛书有什么变化。首先最大的变化就是<strong>书变薄了</strong>！从原来的 1000 多页缩到了不到 600 页，篇幅变小的原因书中也交代了，如今互联网的普及，纸书已经没有必要将参考资料放入其中，直接看 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/">MDN 网站</a> 就可以了。</p>
<h2 id="译者"><a href="#译者" class="headerlink" title="译者"></a>译者</h2><p>第二个变化就是译者发生了变化，第七版的作者是拥有十五年技术翻译经验的<a target="_blank" rel="noopener" href="https://weibo.com/lisf?is_all=1">李松峰</a>，经典的“红宝书”《JavaScript高级程序设计》第 4 版也是出自其手。而第六版当年是<strong>淘宝前端团队</strong>做的翻译，当时正是 2011 年，十年之间发生了翻天覆地的变化，今天看了译者，无意中发现熟悉的<a target="_blank" rel="noopener" href="https://github.com/sorrycc">云谦</a>和<a target="_blank" rel="noopener" href="https://github.com/lifesinger">玉伯</a>二位大佬赫然在列，如今二人已从淘宝到了蚂蚁，大佬们十年前的个人介绍也如此青涩：</p>
<p><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/18ce827fc8684fadaf357c9687965256~tplv-k3u1fbpfcp-watermark.image"></p></div><a class="article-more button is-small is-size-7" href="/2021/03/24/new-JavaScript-Definitive-Guide-7-should-buy/#more">阅读更多</a></article></div><div class="card"><div class="card-image"><a class="image is-7by3" href="/2021/03/20/react-multi-tags-practice/"><img class="fill" src="/images/react-multi-tags-practice.png" alt="React 中后台系统多页签实现"></a></div><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="2021-03-20T10:46:25.000Z" title="2021/3/20下午6:46:25">2021-03-20</time>发表</span><span class="level-item"><time dateTime="2021-03-28T09:09:51.990Z" title="2021/3/28下午5:09:51">2021-03-28</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/Front-End/">Front-End</a><span> / </span><a class="link-muted" href="/categories/Front-End/React/">React</a></span><span class="level-item">18 分钟读完 (大约2761个字)</span></div></div><h1 class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2021/03/20/react-multi-tags-practice/">React 中后台系统多页签实现</a></h1><div class="content"><blockquote>
<p>在中后台管理类系统中，<strong>多页签</strong>的需求非常普遍，用户常常需要在多个页签内跳转，比如填写表单时去查询某个列表获取一些字段信息再回到表单页面填写。这样的需求在 Vue 中使用 <a target="_blank" rel="noopener" href="https://v3.cn.vuejs.org/api/built-in-components.html#keep-alive"><code>keep-alive</code></a> 即可实现，但是在 React 中，React Router 切换路由后就会卸载组件，而本身并没有提供类似 <code>keep-alive</code> 的功能，所以实现多页签的功能就会变得格外困难。我的项目也遇到了同样的问题，在 2019 年左右做了技术调研和选型，最终选择了 <a target="_blank" rel="noopener" href="https://github.com/CJY0208/react-router-cache-route">react-router-cache-route</a>，并在此基础上实现了多页签的需求，并稳定运行了 2 年的时间。下面我来复盘一下这次的多页签改造。</p>
</blockquote>
<h2 id="一、项目简介"><a href="#一、项目简介" class="headerlink" title="一、项目简介"></a>一、项目简介</h2><p>本项目是我现在所在部门的项目，是一个<strong>企业级中后台管理系统</strong>，包括系统管理、角色权限体系、基于 <a target="_blank" rel="noopener" href="https://www.activiti.org/">Activiti</a> 的工作流引擎等很多开箱即用的功能。项目包括前后端，后端是我们部门自研的基于 Spring 的企业级 Java 框架，<strong>前端是 React 技术栈，当时还是 v15 版本。React Router 还是 v2 版本</strong>。</p>
<p>项目主要对象是提供给科技部门有中后台和流程需求的项目组，基于我们项目提供的基线工程，可以快速搭建工程，在此基础上根据需求进行开发。截止到 2019 年 10 月我离开该项目组，本项目已经服务了行内近 50 个系统。</p></div><a class="article-more button is-small is-size-7" href="/2021/03/20/react-multi-tags-practice/#more">阅读更多</a></article></div><div class="card"><div class="card-image"><a class="image is-7by3" href="/2021/03/19/my2015-2018/"><img class="fill" src="/images/my2015-2018.png" alt="我的 2015-2018 —— 银行软开三年项目回顾"></a></div><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="2021-03-19T07:15:25.000Z" title="2021/3/19下午3:15:25">2021-03-19</time>发表</span><span class="level-item"><time dateTime="2021-03-28T09:04:52.777Z" title="2021/3/28下午5:04:52">2021-03-28</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/Front-End/">Front-End</a><span> / </span><a class="link-muted" href="/categories/Front-End/Vue/">Vue</a></span><span class="level-item">25 分钟读完 (大约3731个字)</span></div></div><h1 class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2021/03/19/my2015-2018/">我的 2015-2018 —— 银行软开三年项目回顾</a></h1><div class="content"><blockquote>
<p>借着掘金“项目复盘”的机会，回顾自己工作的真实项目。本项目是我进入职场的第一个项目。从研三实习开始到第一个部门结束，一直都在做的项目。我们内部将这种项目称作“滚动开发包”，从名字就能看出来，持续滚动开发就是这个项目最大的特点，而从 2015 年 9 月开始，到 2018 年 7 月，将近 3 年的时间，我的主要工作都是围绕这个项目，是我职业生涯的第一个里程碑，在此进行复盘，希望其中的点滴内容能够帮助到希望进入银行软开的同学们。</p>
</blockquote>
<h2 id="一、项目简介"><a href="#一、项目简介" class="headerlink" title="一、项目简介"></a>一、项目简介</h2><p>本项目是部门的内部项目管理系统，提供了从项目立项、方案评审、实施、上线到结项的全生命周期项目管理，涵盖了项目管理中的资源、进度、成本、质量等关键维度，学过 <strong>PMP</strong> 的同学们应该都比较熟悉。</p>
<ul>
<li><strong>项目用户</strong>：部门中高管、PMO、行员、外包。</li>
<li><strong>项目特点</strong>：滚动开发包，需求迭代非常频繁，管理侧改革落地基本都基于本系统；内部系统，用户体验方面要求不高；用户量不大，几乎没有高并发场景；</li>
<li><strong>项目缺点</strong>：技术栈老旧、前后端未分离、需求变化频繁、缺少业务和技术文档、代码臃肿、开发效率低下；</li>
<li><strong>项目类型</strong>：采购产品，并根据业务需求进行了多年的迭代开发</li>
<li><strong>开发团队</strong>：10 左右规模，包括行内的项目经理、技术经理和我，其余开发、测试都为外包。</li>
</ul>
<p>我入职的时候，行员就我一个开发，还有一个项目经理，一个技术经理。后来加入了祥哥作为技术经理，他是 Java 大牛。团队用了快 2 年的时间，将我们的项目从采购系统逐渐转变为了<strong>能够真正完全自主掌控的系统</strong>。我在这个项目中做过很多的角色，前后端开发、UI 设计、产品经理、项目经理、DBA、运维、运营、客服这些工作都贯穿在我工作的始终，银行软开的小伙伴对这种一人分饰多角的体验应该比较熟悉。我也通过接近两年的努力，将自己强行掰回了 Web 前端的轨道上来，并重归 Web 前端的正轨。</p></div><a class="article-more button is-small is-size-7" href="/2021/03/19/my2015-2018/#more">阅读更多</a></article></div><div class="card"><div class="card-image"><a class="image is-7by3" href="/2021/03/13/javascript-what-is-the-meaning-of-this/"><img class="fill" src="/images/jsthis.png" alt="[译]JavaScript: 带你彻底搞懂 this"></a></div><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="2021-03-13T13:12:25.000Z" title="2021/3/13下午9:12:25">2021-03-13</time>发表</span><span class="level-item"><time dateTime="2021-03-14T00:07:03.143Z" title="2021/3/14上午8:07:03">2021-03-14</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/Front-End/">Front-End</a><span> / </span><a class="link-muted" href="/categories/Front-End/JavaScript/">JavaScript</a></span><span class="level-item">16 分钟读完 (大约2396个字)</span></div></div><h1 class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2021/03/13/javascript-what-is-the-meaning-of-this/">[译]JavaScript: 带你彻底搞懂 this</a></h1><div class="content"><blockquote>
<ul>
<li>原文地址：<a target="_blank" rel="noopener" href="https://web.dev/javascript-this/">JavaScript: What is the meaning of this?</a></li>
<li>原文作者：<a target="_blank" rel="noopener" href="https://web.dev/authors/jakearchibald/">Jake Archibald</a></li>
<li>原文发布时间：2021-03-08</li>
<li>本文永久链接：<a target="_blank" rel="noopener" href="https://github.com/Ivocin/Translation/blob/master/Blogs/javascript-what-is-the-meaning-of-this.md">https://github.com/Ivocin/Translation/Blogs/javascript-what-is-the-meaning-of-this.md</a></li>
<li>翻译、校对：<a target="_blank" rel="noopener" href="https://github.com/Ivocin/">Ivocin</a></li>
</ul>
</blockquote>
<p>搞明白 JavaScript 中 <code>this</code> 的值有时候会很棘手，本文带你彻底搞懂 <code>this</code>。</p>
<p>JavaScript 的 <code>this</code> 往往会成为许多笑话的笑柄，因为它相当复杂。然而，我发现很多开发人员为了避免处理 <code>this</code>，用了更加复杂和特定领域的处理。如果你对 <code>this</code> 还不熟悉，希望本文能帮助到你。下面进入我的 <code>this</code> 指南。</p>
<p>我将从最具体的情况开始，以最不具体的情况结束，本文的结构类似与一个大的 <code>if (…) … else if () … else if (…) …</code> 语句，所以你可以直接跳转到匹配你代码情况的章节。</p></div><a class="article-more button is-small is-size-7" href="/2021/03/13/javascript-what-is-the-meaning-of-this/#more">阅读更多</a></article></div><div class="card"><div class="card-image"><a class="image is-7by3" href="/2021/03/13/ECMAScript-2021-the-final-feature-set/"><img class="fill" src="/images/ecma2021.png" alt="[译]ECMAScript 2021: 最终功能集确定"></a></div><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="2021-03-13T08:00:25.000Z" title="2021/3/13下午4:00:25">2021-03-13</time>发表</span><span class="level-item"><time dateTime="2021-03-13T15:50:52.885Z" title="2021/3/13下午11:50:52">2021-03-13</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/Front-End/">Front-End</a><span> / </span><a class="link-muted" href="/categories/Front-End/JavaScript/">JavaScript</a></span><span class="level-item">4 分钟读完 (大约639个字)</span></div></div><h1 class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2021/03/13/ECMAScript-2021-the-final-feature-set/">[译]ECMAScript 2021: 最终功能集确定</a></h1><div class="content"><blockquote>
<ul>
<li>原文地址：<a target="_blank" rel="noopener" href="https://2ality.com/2020/09/ecmascript-2021.html">ECMAScript 2021: the final feature set</a></li>
<li>原文作者：<a target="_blank" rel="noopener" href="http://dr-axel.de/">Axel Rauschmayer</a></li>
<li>本文永久链接：<a target="_blank" rel="noopener" href="https://github.com/Ivocin/Translation/blob/master/Blogs/ECMAScript-2021-the-final-feature-set.md">https://github.com/Ivocin/Translation/Blogs/ECMAScript-2021-the-final-feature-set.md</a></li>
<li>翻译、校对：<a target="_blank" rel="noopener" href="https://github.com/Ivocin/">Ivocin</a></li>
</ul>
</blockquote>
<p><strong>更新于 2021-03-09:</strong> 今天，<a target="_blank" rel="noopener" href="https://github.com/tc39/ecma262/releases/tag/es2021-candidate-2021-03">ES2021 候选提案</a> 发布了其最终功能集的版本。如果它能够在今年 6 月的 ECMA 大会上通过，就会成为官方的标准。本文描述了有哪些新的内容。</p></div><a class="article-more button is-small is-size-7" href="/2021/03/13/ECMAScript-2021-the-final-feature-set/#more">阅读更多</a></article></div><div class="card"><div class="card-image"><a class="image is-7by3" href="/2021/03/13/build-hexo-cyberpunk-blog/"><img class="fill" src="/images/hexoblog.png" alt="轻松搭建赛博朋克风格个人博客 —— Hexo 篇"></a></div><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="2021-03-12T21:30:25.000Z" title="2021/3/13上午5:30:25">2021-03-13</time>发表</span><span class="level-item"><time dateTime="2021-03-13T15:54:27.417Z" title="2021/3/13下午11:54:27">2021-03-13</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/Front-End/">Front-End</a><span> / </span><a class="link-muted" href="/categories/Front-End/Tools/">Tools</a></span><span class="level-item">15 分钟读完 (大约2263个字)</span></div></div><h1 class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2021/03/13/build-hexo-cyberpunk-blog/">轻松搭建赛博朋克风格个人博客 —— Hexo 篇</a></h1><div class="content"><blockquote>
<p>最近在整理<a href="https://ivocin.github.io/">个人博客</a>，之前的博客是基于 <a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/">Hexo</a> 3.x 版本的，一晃两年多过去了，Hexo 已经升级到了 5.x 版本，新版本带来了一系列新特性，并且性能得到了极大的提升。而个人喜欢的 <a target="_blank" rel="noopener" href="https://github.com/ppoffice/hexo-theme-icarus">Icarus 主题</a>也有了大版本的更新，更是带来了<a target="_blank" rel="noopener" href="https://github.com/ppoffice/hexo-theme-icarus#cyberpunk-theme-variant">赛博朋克的主题</a>，十分惊艳，话不多说，直接看效果。</p>
</blockquote>
<p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1607aa9dda6c463ea46ed2af814069b0~tplv-k3u1fbpfcp-watermark.image" alt="iShot2021-03-13 03.16.00.png"></p>
<p>现在让我们从零开始，快速搭建一个<strong>赛博朋克</strong>风格个人博客。</p></div><a class="article-more button is-small is-size-7" href="/2021/03/13/build-hexo-cyberpunk-blog/#more">阅读更多</a></article></div><div class="card"><div class="card-image"><a class="image is-7by3" href="/2021/03/08/next_generation_frontend_tooling_with_vitejs/"><img class="fill" src="/images/vitet.png" alt="【译】下一代前端构建工具 ViteJS 中英双语字幕"></a></div><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="2021-03-08T03:12:25.000Z" title="2021/3/8上午11:12:25">2021-03-08</time>发表</span><span class="level-item"><time dateTime="2021-03-12T19:13:27.905Z" title="2021/3/13上午3:13:27">2021-03-13</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/Front-End/">Front-End</a><span> / </span><a class="link-muted" href="/categories/Front-End/Tools/">Tools</a></span><span class="level-item">17 分钟读完 (大约2578个字)</span></div></div><h1 class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2021/03/08/next_generation_frontend_tooling_with_vitejs/">【译】下一代前端构建工具 ViteJS 中英双语字幕</a></h1><div class="content"><blockquote>
<ul>
<li>原视频地址：<a target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=UJypSr8IhKY">Next generation frontend tooling with ViteJS ✨ Open Source Friday ✨</a></li>
<li>中英文字幕视频地址（B站）：<a target="_blank" rel="noopener" href="https://www.bilibili.com/video/BV1kh411Q7WN">【译】下一代前端工具 ViteJS 中英双语字幕 - Open Source Friday</a></li>
<li>中英文字幕视频地址（腾讯视频）：<a target="_blank" rel="noopener" href="https://v.qq.com/x/page/z3232ldhxho.html">【译】下一代前端工具 ViteJS 中英双语字幕 - Open Source Friday</a></li>
<li>英文字幕：听译、YouTube 自动字幕</li>
<li>英文校对、翻译：<a target="_blank" rel="noopener" href="https://github.com/Ivocin">Ivocin</a></li>
<li>视频字幕地址： <a target="_blank" rel="noopener" href="https://github.com/Ivocin/Translation/tree/master/Vite-Open-Source-Friday">Vite-Open-Source-Friday</a></li>
<li>原文链接：<a target="_blank" rel="noopener" href="https://juejin.cn/post/6937176680251424775">【译】下一代前端工具 ViteJS 中英双语字幕 - 掘金</a></li>
</ul>
</blockquote>
<p>关于 <strong>Vite</strong>，来看看作者本人怎么说。本视频是 <a target="_blank" rel="noopener" href="https://v3.vuejs.org/">Vue</a> 以及 <a target="_blank" rel="noopener" href="https://vitejs.dev/">Vite</a> 作者 <a target="_blank" rel="noopener" href="https://github.com/yyx990803">尤雨溪</a> 在 2021 年 2 月 12 日在 <a target="_blank" rel="noopener" href="https://www.twitch.tv/">Twitch</a> 上做客 <a target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=qXHiXSSD3Kc&list=PL0lo9MOBetEFmtstItnKlhJJVmMghxc0P">GitHub Open Source Friday</a> 节目的直播视频。在视频里有尤大关于 Vite 的各项功能的详细阐述、大神在线编码、在线 Debug、大佬 diss webpack 以及对 Vite 的哲学思考。本视频很长，接近 70 分钟，下面是视频摘录，大家可以选择自己感兴趣的点自行传送。强烈建议大家观看视频，里面有很多细节相信大家会有收获。</p>
<iframe src="//player.bilibili.com/player.html?aid=204607604&bvid=BV1kh411Q7WN&cid=308612692&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe></div><a class="article-more button is-small is-size-7" href="/2021/03/08/next_generation_frontend_tooling_with_vitejs/#more">阅读更多</a></article></div><div class="card"><div class="card-image"><a class="image is-7by3" href="/2021/02/26/vite2-practice/"><img class="fill" src="/images/vite2p.png" alt="Vite 2 + React 实践"></a></div><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="2021-02-26T03:12:25.000Z" title="2021/2/26上午11:12:25">2021-02-26</time>发表</span><span class="level-item"><time dateTime="2021-03-12T19:14:43.757Z" title="2021/3/13上午3:14:43">2021-03-13</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/Front-End/">Front-End</a><span> / </span><a class="link-muted" href="/categories/Front-End/Tools/">Tools</a></span><span class="level-item">21 分钟读完 (大约3100个字)</span></div></div><h1 class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2021/02/26/vite2-practice/">Vite 2 + React 实践</a></h1><div class="content"><h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p><a target="_blank" rel="noopener" href="https://github.com/vitejs/vite">Vite</a> 无疑是当前最火热的项目之一，随着春节后 2.0 版本的发布，越来越多开发者开始关注起了这个项目。这个号称<strong>下一代前端构建工具</strong>的给我们最大的印象的就是<strong>快</strong>。日常被缓慢的项目启动时间和 <code>HMR</code> 折磨，有了 <code>Vite</code> 之后，真的不要太爽。虽然 <code>Vite</code> 和框架无关，但应用较多的仍然是 <code>Vue</code> 工程，那么 <code>React</code> 工程是否能够顺利使用呢，这两周在工作之余，就开始了 <code>Vite 2.0</code> + <code>React</code> 的尝试。当然其中踩了比较多的坑，比如 <code>Antd</code> 的引入带来的一系列问题，别名怎么写，代理如何配置，集成 <code>ahooks</code> 等等，希望能够帮助到使用 <code>React</code> 又想使用 <code>Vite</code> 提升开发效率的同学，少走弯路。当然，我们还可以从实践的过程中直观了解到 <code>Vite</code> 的预打包原理以及性能真实的感受。</p>
<p>本文源码地址在 <a target="_blank" rel="noopener" href="https://github.com/Ivocin/vite-playgrounds/tree/main/vite-react">vite-playgrounds</a> 中，如果阅读中发现问题，欢迎 pr。</p></div><a class="article-more button is-small is-size-7" href="/2021/02/26/vite2-practice/#more">阅读更多</a></article></div><div class="card"><div class="card-image"><a class="image is-7by3" href="/2021/02/08/vscode-recommend-to-react-developer-2021/"><img class="fill" src="/images/vscode2021.png" alt="2021 推荐给 React 开发者的 Visual Studio Code 插件及配置"></a></div><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="2021-02-08T03:12:25.000Z" title="2021/2/8上午11:12:25">2021-02-08</time>发表</span><span class="level-item"><time dateTime="2021-03-13T15:26:13.684Z" title="2021/3/13下午11:26:13">2021-03-13</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/Front-End/">Front-End</a><span> / </span><a class="link-muted" href="/categories/Front-End/Tools/">Tools</a></span><span class="level-item">17 分钟读完 (大约2549个字)</span></div></div><h1 class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2021/02/08/vscode-recommend-to-react-developer-2021/">2021 推荐给 React 开发者的 Visual Studio Code 插件及配置</a></h1><div class="content"><blockquote>
<p>本文是在 <a target="_blank" rel="noopener" href="https://juejin.im/post/6844903649978630158">React 工程的 VS Code 插件及配置</a> 基础上编写的，当时写的时候是 2018 年，至今项目组使用 React 开发已经两年多了，是时候更新一波 <a target="_blank" rel="noopener" href="https://code.visualstudio.com/">Visual Studio Code</a> 插件使用文档了。本文主要以实用为目的，本着不折腾的原则，只挑选平时开发 React 工程用的顺手的插件、主题和字体，也欢迎同学们推荐好用的效率神器。</p>
</blockquote></div><a class="article-more button is-small is-size-7" href="/2021/02/08/vscode-recommend-to-react-developer-2021/#more">阅读更多</a></article></div><div class="card"><div class="card-image"><a class="image is-7by3" href="/2019/03/12/why-i-write-css-in-javascript/"><img class="fill" src="/images/cssinjs.png" alt="[译] 为什么我用 JavaScript 来编写 CSS"></a></div><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="2019-03-12T04:12:12.000Z" title="2019/3/12下午12:12:12">2019-03-12</time>发表</span><span class="level-item"><time dateTime="2021-03-13T15:26:41.574Z" title="2021/3/13下午11:26:41">2021-03-13</time>更新</span><span class="level-item"><a class="link-muted" href="/categories/Front-End/">Front-End</a><span> / </span><a class="link-muted" href="/categories/Front-End/CSS/">CSS</a></span><span class="level-item">10 分钟读完 (大约1512个字)</span></div></div><h1 class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2019/03/12/why-i-write-css-in-javascript/">[译] 为什么我用 JavaScript 来编写 CSS</a></h1><div class="content"><blockquote>
<ul>
<li>原文地址：<a target="_blank" rel="noopener" href="https://mxstbr.com/thoughts/css-in-js/">Why I Write CSS in JavaScript</a></li>
<li>原文作者：<a target="_blank" rel="noopener" href="https://mxstbr.com/">max stoiber</a></li>
<li>译文出自：<a target="_blank" rel="noopener" href="https://github.com/xitu/gold-miner">掘金翻译计划</a></li>
<li>本文永久链接：<a target="_blank" rel="noopener" href="https://github.com/xitu/gold-miner/blob/master/TODO1/why-i-write-css-in-javascript.md">https://github.com/xitu/gold-miner/blob/master/TODO1/why-i-write-css-in-javascript.md</a></li>
<li>译者：<a target="_blank" rel="noopener" href="https://github.com/Ivocin">Ivocin</a></li>
<li>校对者：<a target="_blank" rel="noopener" href="https://github.com/Reaper622">MacTavish Lee</a>, <a target="_blank" rel="noopener" href="https://github.com/Mirosalva">Mirosalva</a></li>
</ul>
</blockquote>
<p>三年来，我设计的 Web 应用程序都没有使用 <code>.css</code> 文件。作为替代，我用 JavaScript 编写了所有的 CSS。</p>
<p>我知道你在想什么：“为什么有人会用 JavaScript 编写 CSS 呢？！” 这篇文章我就来解答这个问题。</p></div><a class="article-more button is-small is-size-7" href="/2019/03/12/why-i-write-css-in-javascript/#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></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.jpeg" alt="清秋"></figure><p class="title is-size-4 is-block" style="line-height:inherit;">清秋</p><p class="is-size-6 is-block">SDE @ CMBC</p><p class="is-size-6 is-flex justify-content-center"><i class="fas fa-map-marker-alt mr-1"></i><span>Beijing, 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">26</p></a></div></div><div class="level-item has-text-centered is-marginless"><div><p class="heading">分类</p><a href="/categories"><p class="title">9</p></a></div></div><div class="level-item has-text-centered is-marginless"><div><p class="heading">标签</p><a href="/tags"><p class="title">26</p></a></div></div></nav><div class="level"><a class="level-item button is-primary is-rounded" href="http://github.com/ivocin" 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/ppoffice"><i class="fab fa-github"></i></a><a class="level-item button is-transparent is-marginless" target="_blank" rel="noopener" title="掘金" href="https://juejin.cn/user/940837682306830/posts"><i class="fas fa-blog"></i></a></div></div></div><div class="card widget" data-type="links"><div class="card-content"><div class="menu"><h3 class="menu-label">链接</h3><ul class="menu-list"><li><a class="level is-mobile" href="https://juejin.im/user/58855de9128fe100683a3339/posts" target="_blank" rel="noopener"><span class="level-left"><span class="level-item">掘金专栏</span></span><span class="level-right"><span class="level-item tag">juejin.im</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/Designs-Arts/"><span class="level-start"><span class="level-item">Designs & Arts</span></span><span class="level-end"><span class="level-item tag">2</span></span></a><ul><li><a class="level is-mobile" href="/categories/Designs-Arts/UX/"><span class="level-start"><span class="level-item">UX</span></span><span class="level-end"><span class="level-item tag">2</span></span></a></li></ul></li><li><a class="level is-mobile" href="/categories/Front-End/"><span class="level-start"><span class="level-item">Front-End</span></span><span class="level-end"><span class="level-item tag">24</span></span></a><ul><li><a class="level is-mobile" href="/categories/Front-End/CSS/"><span class="level-start"><span class="level-item">CSS</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/JavaScript/"><span class="level-start"><span class="level-item">JavaScript</span></span><span class="level-end"><span class="level-item tag">4</span></span></a></li><li><a class="level is-mobile" href="/categories/Front-End/Performance/"><span class="level-start"><span class="level-item">Performance</span></span><span class="level-end"><span class="level-item tag">2</span></span></a></li><li><a class="level is-mobile" href="/categories/Front-End/React/"><span class="level-start"><span class="level-item">React</span></span><span class="level-end"><span class="level-item tag">9</span></span></a></li><li><a class="level is-mobile" href="/categories/Front-End/Tools/"><span class="level-start"><span class="level-item">Tools</span></span><span class="level-end"><span class="level-item tag">5</span></span></a></li><li><a class="level is-mobile" href="/categories/Front-End/Vue/"><span class="level-start"><span class="level-item">Vue</span></span><span class="level-end"><span class="level-item tag">2</span></span></a></li></ul></li></ul></div></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="recent-posts"><div class="card-content"><h3 class="menu-label">最新文章</h3><article class="media"><figure class="media-left"><a class="image" href="/2021/03/24/new-JavaScript-Definitive-Guide-7-should-buy/"><img src="/images/js-guide-book-buy.jpeg" alt="新版犀牛书该不该入手？"></a></figure><div class="media-content"><p class="date"><time dateTime="2021-03-24T10:46:25.000Z">2021-03-24</time></p><p class="title"><a href="/2021/03/24/new-JavaScript-Definitive-Guide-7-should-buy/">新版犀牛书该不该入手？</a></p><p class="categories"><a href="/categories/Front-End/">Front-End</a> / <a href="/categories/Front-End/JavaScript/">JavaScript</a></p></div></article><article class="media"><figure class="media-left"><a class="image" href="/2021/03/20/react-multi-tags-practice/"><img src="/images/react-multi-tags-practice.png" alt="React 中后台系统多页签实现"></a></figure><div class="media-content"><p class="date"><time dateTime="2021-03-20T10:46:25.000Z">2021-03-20</time></p><p class="title"><a href="/2021/03/20/react-multi-tags-practice/">React 中后台系统多页签实现</a></p><p class="categories"><a href="/categories/Front-End/">Front-End</a> / <a href="/categories/Front-End/React/">React</a></p></div></article><article class="media"><figure class="media-left"><a class="image" href="/2021/03/19/my2015-2018/"><img src="/images/my2015-2018.png" alt="我的 2015-2018 —— 银行软开三年项目回顾"></a></figure><div class="media-content"><p class="date"><time dateTime="2021-03-19T07:15:25.000Z">2021-03-19</time></p><p class="title"><a href="/2021/03/19/my2015-2018/">我的 2015-2018 —— 银行软开三年项目回顾</a></p><p class="categories"><a href="/categories/Front-End/">Front-End</a> / <a href="/categories/Front-End/Vue/">Vue</a></p></div></article><article class="media"><figure class="media-left"><a class="image" href="/2021/03/13/javascript-what-is-the-meaning-of-this/"><img src="/images/jsthis.png" alt="[译]JavaScript: 带你彻底搞懂 this"></a></figure><div class="media-content"><p class="date"><time dateTime="2021-03-13T13:12:25.000Z">2021-03-13</time></p><p class="title"><a href="/2021/03/13/javascript-what-is-the-meaning-of-this/">[译]JavaScript: 带你彻底搞懂 this</a></p><p class="categories"><a href="/categories/Front-End/">Front-End</a> / <a href="/categories/Front-End/JavaScript/">JavaScript</a></p></div></article><article class="media"><figure class="media-left"><a class="image" href="/2021/03/13/ECMAScript-2021-the-final-feature-set/"><img src="/images/ecma2021.png" alt="[译]ECMAScript 2021: 最终功能集确定"></a></figure><div class="media-content"><p class="date"><time dateTime="2021-03-13T08:00:25.000Z">2021-03-13</time></p><p class="title"><a href="/2021/03/13/ECMAScript-2021-the-final-feature-set/">[译]ECMAScript 2021: 最终功能集确定</a></p><p class="categories"><a href="/categories/Front-End/">Front-End</a> / <a href="/categories/Front-End/JavaScript/">JavaScript</a></p></div></article></div></div><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/2021/03/"><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/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/2019/03/"><span class="level-start"><span class="level-item">三月 2019</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile" href="/archives/2019/02/"><span class="level-start"><span class="level-item">二月 2019</span></span><span class="level-end"><span class="level-item tag">2</span></span></a></li><li><a class="level is-mobile" href="/archives/2019/01/"><span class="level-start"><span class="level-item">一月 2019</span></span><span class="level-end"><span class="level-item tag">2</span></span></a></li><li><a class="level is-mobile" href="/archives/2018/12/"><span class="level-start"><span class="level-item">十二月 2018</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile" href="/archives/2018/11/"><span class="level-start"><span class="level-item">十一月 2018</span></span><span class="level-end"><span class="level-item tag">5</span></span></a></li><li><a class="level is-mobile" href="/archives/2018/10/"><span class="level-start"><span class="level-item">十月 2018</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile" href="/archives/2018/09/"><span class="level-start"><span class="level-item">九月 2018</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile" href="/archives/2018/08/"><span class="level-start"><span class="level-item">八月 2018</span></span><span class="level-end"><span class="level-item tag">2</span></span></a></li><li><a class="level is-mobile" href="/archives/2018/07/"><span class="level-start"><span class="level-item">七月 2018</span></span><span class="level-end"><span class="level-item tag">2</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/Ant-Design/"><span class="tag">Ant Design</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Blog/"><span class="tag">Blog</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">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Create-React-App/"><span class="tag">Create React App</span><span class="tag">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Design/"><span class="tag">Design</span><span class="tag">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Dva/"><span class="tag">Dva</span><span class="tag">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Frontend/"><span class="tag">Frontend</span><span class="tag">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/GitHub/"><span class="tag">GitHub</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">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Hooks/"><span class="tag">Hooks</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">13</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Less/"><span class="tag">Less</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Performance/"><span class="tag">Performance</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">14</span></a></div><div class="control"><a class="tags has-addons" href="/tags/React-Conf-2018/"><span class="tag">React Conf 2018</span><span class="tag">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/React-Hooks/"><span class="tag">React Hooks</span><span class="tag">4</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Tools/"><span class="tag">Tools</span><span class="tag">5</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Translation/"><span class="tag">Translation</span><span class="tag">14</span></a></div><div class="control"><a class="tags has-addons" href="/tags/UX/"><span class="tag">UX</span><span class="tag">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Umi/"><span class="tag">Umi</span><span class="tag">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/VS-Code/"><span class="tag">VS Code</span><span class="tag">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Vite/"><span class="tag">Vite</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">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Web/"><span class="tag">Web</span><span class="tag">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Webpack/"><span class="tag">Webpack</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E8%81%8C%E4%B8%9A%E7%94%9F%E6%B6%AF/"><span class="tag">职业生涯</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/mylogo.png" alt="清秋的博客" height="28"></a><p class="is-size-7"><span>© 2021 清秋</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>