VuePress 密码加密文章

前言

事情的起因是,我需要一个存放未分类整理知识点,以及收藏转载文章的私人知识库,和 iMaeGoo’s Blog 区别开来。

我尝试过简书、语雀、Evernote、OneNote、有道云笔记,对它们的 markdown 支持、导出能力、搜索能力、容量、安全性都有体会。

频繁的整顿让我对其安全性产生担忧

最后我决定建一个私人 Git 仓库,用 markdown 来记笔记。然后通过 CI/CD 自动构建到一个叫 iMaeGoo’s Diary 的 VuePress 网站。写笔记 Notepad + Git 就能搞定,还能自由选择多种多样的 markdown 编辑器,手机端也可以通过在线 IDE 更新内容,VuePress 的搜索非常好用,安全性也完全在自己的掌控范围之内。

反正是知识库嘛,我配置了完全公开,方便自己随时随地查看,但由于是未经整理的知识库,也不建议访客去看啦。

问题就来了,有些笔记包含了敏感信息,怎么在公开的知识库中保护这类信息?

在寻找 VuePress 加密时,我发现了 vuepress-plugin-encrypt 这个好用的插件,使用了 aes-128-ctr 来加密内容,你可以直接查看它的英文官方文档

阅读更多

PC 浏览器平滑惯性滚动(smooth scroll)一套简单实现

前言

主要是 Bing 找了许多 libraries。效果在 Chrome for Windows 上都不理想,要么滚动很生硬,要么就是太复杂,就自己实现了。

本来是 PC only 的,写好后测试了一下移动端,是兼容的,效果也还不错……

不过反正移动端都自带惯性滑动了

效果

无惯性滚动

有惯性滚动

阅读更多

解决 Edge 浏览器 SCRIPT5022: Exception thrown and not caught

JS 代码在 Safari, Chrome, Firefox 都是好的,就只有 Edge 莫名其妙地报错。

1
SCRIPT5022: Exception thrown and not caught

未捕获的异常?EXM?你倒是说是什么异常啊?行号还是错的?点过去无法定位错误位置?hash-navigation.js?我的项目里根本都没有这个 js 啊喂!

阅读更多

纯 CSS 实现椭圆轨迹旋转小球

话不多说看效果

阅读更多
网页中文字体压缩(woff2)、拆分、去繁体字库,提高加载速度

网页中文字体压缩(woff2)、拆分、去繁体字库,提高加载速度

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

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

字体去繁体

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

阅读更多
让 Icarus Insight 搜索插件支持拼音检索文章
活用 Bulma 美化 Icarus 文章

活用 Bulma 美化 Icarus 文章

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

TOC

  1. 按钮
  2. 进度条
  3. 标签页
  4. 彩色突出
  5. 点击展开代码
  6. 你知道的太多了
  7. 让简介不出现在正文
  8. 封面图来源声明
阅读更多

Valine 升级 1.4 以及增加判断 “昵称和邮箱不能为空”

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

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

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

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

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

阅读更多

比较 SVG 与字体图标 - 缺点与解决方案

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

SVG

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

缺点解决方案
如果将 SVG 放在静态资源目录,通过路径引用至页面,SVG 将造成额外的 HTTP 请求在 HTML 中内嵌 <svg> 标签
如果在 HTML 中内嵌 <svg> 标签,HTML 会显得杂乱且无法复用使用 SVG Inline Loader for Webpack 可以用 require 的方式向 HTML 插入 SVG
图标本身带的颜色(类似 fill="#ccc")无法覆盖移除 SVG 本身的颜色。使用 SVG Inline Loader for WebpackremovingTagAttrs 选项,可以在打包时批量去除图标本身的颜色,再通过 CSS fill 覆盖颜色
阅读更多

Icarus 夜间模式支持 3.0 了

原主题
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