从客户得到的网页字体足足有 10MB 大小，会严重拖慢网页加载，如何处理？

阅读下面的解决方法前，建议先阅读网页字体优化，了解一些基本知识，以及，为什么。

字体去繁体

GBK 结尾的字体偏大的原因是包含庞大的繁体字库，大多数网页并不需要，可以使用 fontTools 得到字体的简体中文子集。

要是 Icarus 能用拼音搜文章就好了，如果你也有这样的想法，那这篇文章也许会对你有帮助。

效果

前提

1. Icarus 版本 3.0 以上
2. 搜索插件使用的是 Insight

Icarus 相信大家都很熟悉，但是有时候我们希望在文章中用特别的样式注明一些内容，markdown 语法就不够用了，所以 Icarus 有哪些高级玩法呢？下面就让 iMaeGoo 带大家一起了解吧。（误

TOC

如果你和我一样只是想在 1.3.10 原版的基础上增加昵称和邮箱的防空验证，可以直接下划到结尾部分，跳过前半部分的过程记录。

最近经受匿名评论的困扰，计划禁止匿名评论。还有一个原因是《网信办：网站不得向未实名认证的用户提供跟帖评论服务》，咱小小博客也是备过案的（能用国内 CDN 加速太香了），应该注意一下是不是？

很遗憾，Valine 作者不计划添加这一功能！这让我一度想要换评论系统了……先不谈数据转移，我对比了一下其他评论系统——

• Discuz 系，国内连通率堪忧，不行；
• 基于 GitHub Issue 的，需要 GitHub 授权，对访客不是很友好，国内速度也不快，不行；
• 还有国内的畅言，要备案好说，但是 UI 不好看，还要验证访客手机号、绑定微信一大堆，麻烦不说，重要的是泄露访客隐私，不行……

昨天发现 Valine 1.4 发布，有几个新特性挺喜欢，打算升级，想起这茬，干脆一起把防空校验加上吧！

如果要为网站增加矢量图标，其中两个选项是使用 SVG 和使用字体图标，两种方式各有千秋，以下是我个人做的比较。

SVG

在阅读这一部分前，可以先参考文章 HTML中嵌入SVG图片的N种方式，了解一下不同的 SVG 嵌入页面的方式。

原主题
Icarus 夜间模式（实验中）
如何给 Icarus 增加夜间模式

夜间模式单独提取的代码目前已经更新，支持 Icarus 3.0.0，有需要的朋友欢迎 checkout。

分支：https://github.com/imaegoo/hexo-theme-icarus/tree/night3
提交：https://github.com/imaegoo/hexo-theme-icarus/commit/fc3d016ae1c999347bd9ecbf3cc656e1382db06d

1
2
3
4

cd theme/icarus
git remote add imaegoo https://github.com/imaegoo/hexo-theme-icarus.git
git fetch imaegoo
git merge imaegoo/night3

昨天晚上 Icarus 主题的 RC 版本发布，离正式版不远了，我自 3.0.0-beta.1 一路使用到现在，把自己的使用经验分享一下。

魔改迁移

由于主题作者换掉了 ejs 语言，全部重写了一遍，迁移这块的难度是最大的。

拉 dev 分支，冲突实在是太多了，我的办法是，把在旧版上的魔改的整个 diff 导出，然后直接从 dev 签出一个新的分支，参考 diff 对每个文件都重新修改，花了不到2个小时搞定。

魔改 hexo-component-inferno 组件

主题中部分可重用的 JS 和 JSX 代码已经被移到另一个项目 hexo-component-inferno 中，我们如何对这些组件魔改？此时要分2种情况——

1. widgets 的魔改
2. 其它 JS 和 JSX 的魔改

前提

已安装 Vue 脚手架

1

npm install -g @vue/cli

现象

找不到 vue-cli-service 命令

1

'vue-cli-service' is not recognized as an internal or external command, operable program or batch file.

经过搜索，发现这个问题只在 Windows 下存在。

装了脚手架应该会在 node 目录产生 vue-cli-service.cmd 的文件，实际没有产生，不过在全局 node_modules 下是有的。

有说清理 node_modules 重新安装可以解决的，试了不管用，全局卸载脚手架重新安装也不管用，就算管用也比较麻烦，于是我找到了几个间接使用方法——

对一个有国际化的 Vue 组件写单元测试，mount这个组件时，会遇到找不到 $t 的报错。

1

<p>{{ $t('message.hello' }}</p>

1

TypeError: _vm.$t is not a function

添加一个参数

当前 URL：http://localhost/home?keyword=example

1

this.$router.replace({ query: { ...this.$route.query, code: '1' } })

最终 URL：http://localhost/home?keyword=example&code=1

删除一个参数

我所使用的 Vue Router 版本为 3.0.3，删除参数比较麻烦。

当前 URL：http://localhost/home?keyword=example&code=1

1
2

delete this.$route.query.code
this.$router.replace({ query: this.$route.query }) // 地址栏无反应

1
2
3
4

let newQuery = JSON.parse(JSON.stringify(this.$route.query)) // 深拷贝
delete newQuery.code
// 如果有引入 lodash, 可以写成: let newQuery = _.omit(this.$route.query, 'code')
this.$router.replace({ query: newQuery })

最终 URL：http://localhost/home?keyword=example