为你的博客安装上便携小空调

star 了 2 年 云游君 的小空调项目 我终于在两年后习得真传归来花费了 大概一个下午的时间完成 ✅ 了该项目的 VUE3 重构。

项目地址，欢迎大家 Star

相对原项目比起来优势大概就是没有使用任何 UI 框架, 极少的依赖, 这能够让我打包后的体积也仅只有84kb的js, 做到了all in js，且兼容至 ie8。

部署方案

如果你和我一样是使用 hexo 的话，那么将变的极其简单。

在你的博客根目录执行以下命令:

1
hexo new page air-conditioner

然后在会生成source/air-conditioner/index.md, 将以下内容替换原内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
---
title: 便携小空调 - 为你的夏日带去清凉!
date: 2022-10-20 22:06:17
comments: true
aside: false
top_img: false
---

> 终于为博客安装上了便携小空调

<style>
.copyright-box a {
  border-bottom: none !important;
  padding: 0 !important;
}
</style>

<div id="air-conditioner-vue"></div>
<script defer data-pjax src='https://npm.elemecdn.com/anzhiyu-air-conditioner@1.0.1/index.3f125bc6.js'></script>

然后访问https://你的博客域名/air-conditioner就可以得到一个没有风的空调 ❄️

其他部署方案

如果你使用的是其他的，部署也一样简单，只需加入以下代码嵌入网站即可

1
<iframe height="740" src="https://loquacious-bienenstitch-58539b.netlify.app/"></iframe>

自行构建部署

  1. 进入 https://github.com/anzhiyu-c/air-conditioner-vue

  2. 点击项目右上角的 fork 叉子

  3. 进入 vercel 或 netlify

  4. 部署项目 选择仓库时选择刚刚 fork 的仓库然后 点击 deploy 即可。