比较 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

PHP imagepng 输出损坏的图片问题解决

问题发现

我和同事的两套本地开发环境,相同的一段返回随机验证码图片的代码,验证码代码参考的是 php实现的Captcha验证码类实例 里的代码。在同事的电脑上调用,出来的是裂开的图片,在我的电脑上调用,出来的就是正常的图片,这是为什么呢?解决这个问题花费了三四个小时,记录一下过程。

解决过程

因为代码上没有区别,所以开始怀疑环境问题,两台开发机都是相同型号,配置也相同,PHP 运行在 docker 容器下,检查 PHP 版本相同。

查了一下 PHP 文档,怀疑可能是因为什么特性没有启用,测试以下代码:

test.php
1
2
3
4
5
<?php
if (imagetypes() & IMG_PNG) {
echo "PNG Support is enabled";
}
?>

测试结果 imagetypes() & IMG_PNG 的值大于零,看起来两个环境都是支持 PNG 图的。

阅读更多

hexo-theme-icarus 3 食用经验分享

昨天晚上 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 的魔改
阅读更多

体验 Azure 应用服务:可以白嫖的 OneIndex 空间

之前已经写过一篇如何使用 Azure DevOps 实现自动部署 Hexo 的文章,这个月,受疫情影响在家,就把自己的 Azure 新用户体验账号开了,获得了限时 1 个月 200 刀的体验额度。

之后研究中发现了 Azure 提供的应用服务还挺好用的,当然重点是——可以白嫖!

免费套餐当然是有限制的——

  1. 配置上,1G内存,每天最多1小时CPU时间(计算量不大24小时开着没问题)
  2. 330M 左右的出站流量
  3. 无法绑定自定义域名,只能使用 *.azurewebsites.net
  4. 没有数据库,可以另建 MySQL,但不是免费的,想搭建 Typecho 和 Wordpress 的还是别想了
  5. 无国内节点,可选日本节点
  6. 需要 Azure 账号,也就是需要 VISA 或者 Master 卡

我们可以在上面部署 .Net Core, ASP.NET, Java, Node.js, PHP, Python, Ruby 语言的项目。

之前有访问过别人的 PyOne,发现下载速度还挺快,就一直想用 OneDrive 搭建一个自己的网盘,机会来了。

主流的 OneDrive 第三方 Directory Index,有老牌的 oneindex,还有后起之秀 PyOneOLAINDEX,虽然 Azure 的 PHP 环境可以自动识别 composer 安装依赖,也支持执行部署脚本、执行 php 命令,但是由于 PyOne 还要依赖 Python 环境,OLAINDEX 还要依赖 Nginx,别想了,搭建不了。

当我尝试在 Azure 应用服务上面部署 OLAINDEX 时,在执行安装脚本 php artisan od:install 时出错,遇到的错误是 SQLite General error: 5 database is locked,由于完全不会 PHP,就放弃了。

好了,就决定是 OneIndex 了!高手看到这里基本就可以自己去尝试了,下面是我的步骤。

阅读更多

多种方式解决 Windows CMD 中 vue-cli-service 不是内部或外部命令

前提

已安装 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 Router 向 URL query 添加、删除参数

添加一个参数

当前 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

阅读更多