px2rem的原理
根据设计图尺寸自动计算 rem—px2remscss 函数的应用点
@function 和@return 是定义 scss 函数，用法看起来和 JS 函数差不多
#{}代表插值，可以在#{}里计算 scss 变量
px2rem 函数代码123456789101112// $px 设计图上元件的尺寸// $design-width 设计图尺寸// $block 视口宽度被html的font-size切分的块数$design-width: 375;$blocks: 10;@function px2rem($px) { @return #{$px / $design-width * $block}rem;}html { font-size: 10vw;}
理解计算逻辑1234567计算出设计图上元件的宽度相对于设计图尺寸的宽度比值： $px / $design-width假设设计图尺寸==视口宽度：假设设计图为375px 视口为100vw 那么让375px == 100vw 然后通过rem单位去实现这个换算↓↓↓html ...
给伪元素添加点击事件
给伪元素添加点击事件的方法1伪元素应该是没办法直接添加点击事件的...但是可以利用css的pointer-events属性去控制父元素不响应鼠标事件
123<div class="app"> <div class="app-content"></div></div>
123456789101112131415161718192021222324252627282930313233.app { width: 100px; height: 100px; margin: 50px auto; border-radius: 2px; background-color: palegreen; position: relative; /* 关闭父元素的点击事件 */ pointer-events: none;}.app * { /* 父元素下的元素重新开启点击事件 */ pointer-events: auto;}.app-content ...
git查看文件差异：diff
使用 git diff 查看 pull 之后的文件有哪些修改git pull 对于拉下来的修改文件自动对其进行 git add /rm 及 git commit 操作。所以拉下来的文件有那些修改，查看的方式可把它们归结于上一次提交的比较。
git diff HEAD 显示工作目录与 git 仓库之间的差异，而 git diff HEAD^ 则显示上一次提交之前工作目录与 git 仓库之间的差异。所以我们在 git pull 后，可以通过 git diff HEAD^ 来查看拉下来的文件有那些具体的修改。
12345git diff 显示工作目录与索引文件之间的差异git diff –cached显示索引文件与git仓库之间的差异git diff HEAD 显示工作目录与git仓库之间的差异
图片懒加载的实现
一个简单的图片懒加载
主要用来讲 lazyload 的大概原理生产环境建议使用插件，或者基于这个思路再优化加工jQuery-lazyloadvue-lazyloadreact-lazyload另外，许多 UI 框架都自带有 lazyload 插件，如layui-flow和Element等，往往不需要重复引用
Code1234567891011121314151617181920var imgs = document.querySelectorAll('img')function lazyload() { // 获取滚动高度 var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 获取视口高度 var viewPortSize = window.innerHeight || document.documentElement.clientHeight || document.body.clientHei ...
Cropper实现图片裁剪上传
引用
layui-layer(弹窗)cropper.jscropper-demo
HTML1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>cropper</title> <script src="https://cdnjs.cloudflare.com/ajax/ ...
qq机器人框架--mirai
在自己的电脑上搭建一个 qq 机器人使用框架miraiMirai 文档Mirai 官方论坛
环境准备： JVM 环境要求
手动安装 AdoptOpenJDK jdk-v11 以上
用到的插件：
mcl-install
mirai-console
mirai-api-http
chat-command
通过 mirai-console 进行其他语言开发node-mirai社区
官方维护的项目
Mirai 官方论坛
awesome-mirai
社区项目发布
插件中心（在建）
安装过程在这里下载 mcl-installer新建一个文件夹，把 mcl-installer 放进去并执行运行mcl.cmd成功启动会看到绿色的mirai-console started successfully
MCL 详细用法MCL 的 README.MD
开始使用前的准备工作刚刚安装好的 mirai-console 时没有任何功能的，所有功能将由插件提供
可以通过 mcl 进行安装MCL 文档：mirai-console-loader/scripts/README.md安装 mirai-api-htt ...
使用PicGo搭建图床（阿里云OSS）
前言因为Hexo 的图片管理方式非常不尽人意（也可能是我不习惯吧），所以产生了使用外部链接解决静态资源的问题。萌生出了搭建图床的想法，在 GitHub 上找到了Picgo这个软件Picgo 官网
这篇文章主要有以下几个步骤：
开通购买阿里云对象存储服务
配置对象存储 OSS
域名购买和备案
OSS 绑定自定义域名
Picgo 配置
SSL 证书（HTTPS）
开通购买阿里云对象存储服务注册登录阿里云，搜索并找到对象存储 OSS点击购买，选 40G 的就够了，很便宜 一年才九块钱买好了之后进入控制台，开始进行配置
配置对象存储 OSS进入OSS 控制台点击 Bucket 列表，创建 Bucket页面里会出现一个表单，根据需求自己填一下，注意设置公共读创建好之后，点击 bucket 名字进入存储空间在这里自己看着摸索啦…
域名购买和备案域名购买就不用说了…备案是个无比烦人的事情…….
购买服务器由于 OSS 设置自定义域名需要已备案的域名，域名需要有一个服务器载体所以再买个服务器吧…反正以后也是有用的…买完之后，可以在服务器的控制台找到公网 IP
解析域名记住公网 IP，去域名的服务 ...
使用nvm-windows管理node版本
使用 nvm 管理 node 版本最近频繁地被 node 版本伤脑筋…
起因是 slidev，这个库看起来很好玩，事实上确实挺好玩的，但是需要 node 版本>=14
在学习 node.js 的时候，我想安装最新的 v16 版本
需要用 node-mirai 开发 qq 机器人的 canvas 功能的时候，安装 node-canvas 疯狂报错，最后去 issue 里找到了一种降低 node 版本的解决办法…
好烦啊
于是开始寻找管理 node 版本的东西
n 和 nvm最常用的两个工具，很遗憾，不支持 windows 系统nvm 好像是支持的，在 gitbash 的环境下可以使用
1234567Note: nvm also support Windows in some cases. It should work through WSL (Windows Subsystem for Linux) depending on the version of WSL. It should also work with GitBash (MSYS) or Cygwin. Otherw ...
在Blade模板中使用vue
blade 中操作 vue 组件blade 中使用 vue 组件12345678910111213window.Vue = require("vue");import promise from "es6-promise";promise.polyfill();// import Axios from '@/utils/request.js'// Vue.prototype.$ajax = Axios;// 注册全局组件Vue.component("dialog", require("./dialog.vue").default);const dialog = new Vue({ el: "#dialog",});// 实例化vue
在 blade 中
12345678910<section class="dialog-test"> <div id="dialog"> < ...
