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

阅读更多

Netlify 初体验——真就是几秒部署呗

Hexo 部署依赖 node 环境就让很多专注写作的人放弃这个框架,劝退萌新,并且难以随时随地写作。好在其 CLI 比较简单,前面我也介绍过如何利用免费的微软 Azure 持续部署博客

不过今天看 Ant Design Pro 官网的 footer 的时候发现了 Netlify 这个东西,试了以后,强烈安利!!!

来到它的首页,里面有这么几段话——

大字:

在几秒钟内部署您的网站*

小字:

*不,这里没有陷阱。
真的只需点击几下。

嗯……嗯?哼哼……有免费套餐,试试吧!

  1. 首先用 GitHub 授权登录
  2. 选择 New site from Git
  3. 选择项目托管的位置:GitHub
  4. 授权 GitHub 访问私有项目
  5. 输入构建命令……等等,你怎么给我自动输入了啊喂?
  6. 点 Deploy site

然后构建就启动了,1分钟后我的站点就到了 Netlify 上。

当时我的表情是 (⊙o⊙)?

我连部署命令都没打;
我连环境都没提供;
我甚至全程没有摸一下键盘……(你要问我注册登录不摸键盘?真就没摸,GitHub 是已登录的状态,点一下授权按钮就登录了。)
敢情 hexo 的部署配置,Azure 的 CICD 都白写了呗?

……

😓,流批……

这个网站还支持绑定域名,自动申请 HTTPS,配 Web Hook(就不用手动点部署了),还有很多很多真 · 自动化的功能,大家一起发掘吧!

如何给 Icarus 增加夜间模式

此篇针对 Icarus 2 版本,Icarus 3 请参考:Icarus 夜间模式支持 3.0 了

Preview

Live Preview

https://www.imaegoo.com/

Attention

This extension is NOT FULLY TESTED, so it may not fully cover the theme styles, if you find something wrong (such as bright things in night mode), please report it in this issue, do not open new issue.

Usage

  1. Merge night branch from imaegoo/hexo-theme-icarus into your icarus theme folder, or dowmload zip.
  2. If you configured an image logo, you should prepare a logo for night mode, then apply them in themes/icarus/_config.yml.
    1
    2
    3
    logo:
    light: /images/logo.png
    dark: /images/logo-dark.png

  1. night 分支(imaegoo/hexo-theme-icarus)合并到你的主题分支中。如果你不懂,并且你对主题没有自己修改,直接下载修改好压缩包
  2. 如果你的网站 LOGO 是图片,你可能需要准备一黑一白两个版本的 LOGO,并在主题 themes/icarus/_config.yml 中配置。
    1
    2
    3
    logo:
    light: /images/logo.png
    dark: /images/logo-dark.png

Modify

If you want to customize your theme, you can modify night mode part in themes/icarus/source/css/style.styl.

Thanks

Universe background from https://github.com/fan-lv/Fan