star 了 2 年 云游君 的小空调项目 我终于在两年后习得真传归来花费了 大概一个下午的时间完成 ✅ 了该项目的 VUE3 重构。
引用站外地址
云空调，便携小空调
云空调，便携小空调
项目地址，欢迎大家 Star
引用站外地址
云空调，便携小空调项目地址
云空调，便携小空调项目地址
相对原项目比起来优势大概就是没有使用任何 UI 框架, 极少的依赖, 这能够让我打包后的体积也仅只有84kb的js, 做到了all in js，且兼容至 ie8。
部署方案如果你和我一样是使用 hexo 的话，那么将变的极其简单。
在你的博客根目录执行以下命令:
1hexo new page air-co ...
自从写博客以来就一直面临着图床问题，各种各样的图片该存放在哪里，又该如何管理，在我经过不断的探索以后写下了这篇博客
初识图床图床图床，就是用来存放图片的温床，博客内有大量的图片，大量的地方需要使用到图片，优化博客加载方便管理的除了压缩图片的大小之外，首选就是多处使用图片链接，到不同的资源地址去进行加载来完成图片的加载。
网络免费图床可以通过百度图床搜索 🔍 到很多很多各种各样的图床, 在此不做介绍如 SMMS 等图床.
特点
无配置，仅需注册，有些甚至不用注册 ✅
方便上传，方便管理 ✅
免费 ✅
容易跑路 ❌
图像处理：如裁剪，压缩等 ❌
图片加载速度不够快 ❌
稳定性差 ❌
Github 图床大部分同学是没有服务器的，那么就很需要图床来优化自己的仓库内容，毕竟 github 一个仓库大小只能在 1G 左右，一个比较成熟的方案是使用 github + jsd + PicGo
特点
配置较为简单 ✅
方便上传 ✅
免费 ✅
多个仓库可无限容量 ✅
图像处理：如裁剪，压缩等 ❌
一个仓库只能 1G❌
图片加 ...
butterfly 自带的本地搜索配置方便所以便一直使用至今，不过有一个痛点就是没有搜索预览图，于是为了解决这个问题做了如下尝试。
安装1npm install hexo-generator-search --save
修改_config.yml, 添加以下内容
1234search: path: search.xml field: post content: true
使用在_config.butterfly.yml中开启本地搜索
12345# Local searchlocal_search: enable: true preload: true CDN:
修改local_search依赖 cdn 项, 修改文件_config.butterfly.yml中最下面 CDN.option.local_search的值为 https://npm.elemecdn.com/anzhiyu-blog@2.1.2/js/search/local-search.js
123456CDN: ... option: # main_css: # translate ...
前端开发
未读在 vite 环境下开发时，默认是试用 ESM 打包，但是当我开发一个嵌入式应用就需要能做到闭包以防止变量冲突等问题，这个时候就要切换打包方式了，经过我不断的翻看文档，发现只需要在build.rollupOptions.output.format 配置iife即可，因为 vite 底层试用 rollup 构建，所以我们需要告诉 rollup 我们需要使用什么方式来构建。
引用站外地址
roolup官方文档
roolup官方文档
output.formatType: stringCLI: -f/–format Default: “es”
Specifies the format of the generated bundle. One of the following:
amd
Asynchronous Module Definition, used with module l ...
魔改有风险, 魔改前注意备份。此篇魔改需一定代码能力。
魔改效果预览
setTimeout(() => {
var dogePlayer = new DogePlayer({
container: document.getElementById("player_ebb742fd1f0b5a7b"),
userId: 4945,
vcode: "ebb742fd1f0b5a7b",
autoPlay: false
});
}, 300);
更改 aplayer 依赖修改_config.butterfly.yml中
CDN.option.aplayer_js
CDN.option.aplayer_css
CDN.option.meting_js
建议将其下载至本地再引入, 博主不保证其可访问性。
123aplayer_css: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.cssa ...
点击查看参考站点
参考方向教程原贴张洪 Heo张洪 Heo
实际效果
引用站外地址
butterfly关于页面魔改实际效果
butterfly关于页面魔改实际效果
魔改有风险，魔改前注意备份。
添加 about 页面新建 source/about/index.md
123456789---title: 关于date: 2021-03-30 15:57:51aside: falsetop_img: falsebackground: "#f8f9fe"comments: falsetype: "about"---
添加 html 结构新建 themes/butterfly/layout/includes/page/about.pug
...
前端开发
未读问题： 解决 元素隐式具有 “any” 类型，因为类型为 “string” 的表达式不能用于索引类型 “Object”。 在类型 “Object”上找不到具有类型为 “string” 的参数的索引签名
描述： 在写代码的时候，对一个对象做了一个 forEach 循环，然后取到了其每一个 key 对应的 value 值，但是写完之后发现Typescript 报错了，错误内容就是如题，有点奇怪，特此去了解一下
123456789Object.keys(obejct).forEach((key) => { obejct[key]});// 或者for (const key in obejct) { // 处理... obejct[key] ....}
解决过程原谅我报错都没有看明白，查了一下之后才知道，原来 key 值的类型不是 string，在 javascript 中是默认给你转好的，而在 Typescript 中则不是，因此要么转，要么声明，要么忽略…
方案一：忽略在 tsconfig.json 中 compilerOptions 里面 ...
butterfly 即刻短文（瀑布流）部署方案。希望能给各位看客提供魔改思路。
todolist
支持度
图片灯箱
✅
多图片多行显示
✅
外部链接
✅
瀑布流
✅
首页滚动
✅
快速评论
✅
本地修改 yml 发布
✅
aplayer 单曲音乐
✅
插件版本
❌
点击查看参考教程
参考洪哥的即刻短文修改而来。参考方向教程原贴heoHexo 的 Butterfly 魔改：即刻短文静态部署版
注意 ⚠️ 该教程仅为博主目前使用的方法, 如需移植还需自行修改 css 变量, 以下为博主自用 css 变量, 可自行修改为自己喜欢的颜色。
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778 ...
最近在做关于界面的数据统计模块过程中要使用到正则表达式匹配 span 元素开头 和 p 标签结尾的字符
于是开心的下了如下正则表达式匹配这串数据
数据内容1<p>网站数据概况</p><p><span>0</span><span>4</span></p><p><span>1</span><span>33</span></p><p><span>2</span><span>95</span></p><p><span>3</span><span>103</span></p><p><span>4</span><span>269</span></p><p><span>5</span> ...
什么是响应式?
我们先来看一下响应式意味着什么?我们来看一段代码:
123let m = 20;console.log(m);console.log(m * 2);
m 有一个初始化的值，有一段代码使用了这个值;那么在 m 有一个新的值时，这段代码可以自动重新执行;
上面的这样一种可以自动响应数据变量的代码机制，我们就称之为是响应式的。
那么我们再来看一下对象的响应式:
响应式函数设计
首先，执行的代码中可能不止一行代码，所以我们可以将这些代码放到一个函数中:
那么我们的问题就变成了，当数据发生变化时，自动去执行某一个函数;
但是有一个问题:在开发中我们是有很多的函数的，我们如何区分一个函数需要响应式，还是不需要响应式呢?
很明显，下面的函数中 foo 需要在 obj 的 name 发生变化时，重新执行，做出相应;
bar 函数是一个完全独立于 obj 的函数，它不需要执行任何响应式的操作;
响应式函数的实现 watchFn
但是我们怎么区分呢?
这个时候我们封装一个新的函数 watchFn;凡是传入到 watchFn 的函数，就是需要响应式的;其他默认定义的函数都是 ...
v-model 的基本使用表单提交是开发中非常常见的功能，也是和用户交互的重要手段:
比如用户在登录、注册时需要提交账号密码;
比如用户在检索、创建、更新信息时，需要提交一些数据;
这些都要求我们可以在代码逻辑中获取到用户提交的数据，我们通常会使用 v-model 指令来完成:
v-model 指令可以在表单 input、textarea 以及 select 元素上创建双向数据绑定;
它会根据控件类型自动选取正确的方法来更新元素;
尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特 殊处理;
v-model 的原理
官方有说到，v-model 的原理其实是背后有两个操作:
v-bind 绑定 value 属性的值;v-on 绑定 input 事件监听到函数中，函数会获取最新的值赋值到绑定的属性中;
事实上 v-model 更加复杂
v-model 绑定 表单元素
v-model 绑定 textarea我们来看一下绑定 textarea:
12345<div id="app"> ...
复杂 data 的处理方式我们知道，在模板中可以直接通过插值语法显示一些data 中的数据。
但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示;
比如我们需要对多个 data 数据进行运算、三元运算符来决定结果、数据进行某种转化后显示;
在模板中使用表达式，可以非常方便的实现，但是设计它们的初衷是用于简单的运算;
在模板中放入太多的逻辑会让模板过重和难以维护;
并且如果多个地方都使用到，那么会有大量重复的代码;
我们有没有什么方法可以将逻辑抽离出去呢?
可以，其中一种方式就是将逻辑抽取到一个method中，放到 methods 的 options 中;
但是，这种做法有一个直观的弊端，就是所有的 data 使用过程都会变成了一个方法的调用;
另外一种方式就是使用计算属性 computed;
认识计算属性 computed
什么是计算属性呢?
官方并没有给出直接的概念解释;
而是说:对于任何包含响应式数据的复杂逻辑，你都应该使用计算属性;
计算属性将被混入到组件实例中
所有 getter 和 setter 的 this 上下文自动地绑定 ...
