transform 支持单独赋值改变
在掘金看到一篇文章 引用站外地址 解放生产力！transform 支持单独赋值改变 https://juejin.cn/post/7152331836578856967 看完以后有感而发transform在制作动画时经常被占用，因为一个元素只能使用一个 transform，所以当我有多属性值需要设置时，我通常的做法是通过添加一个父元素来给它设置 transform 属性。 比如在魔改博客的过程中希望改变transform中的某一部分, 我必须把前面的部分也照抄一遍才能达到覆盖修改的目的 1234567header.nav { transform: scale(1.5); /*这样不行，会丢失translate*/}/*必须写完整*/header.nav { transform: translate(-50%, -50%) scale(1.5);} 所以transform很需要能够像 ...
css模糊羽化
在逛 codepen 的时候发现一个有意思的 css 羽化项目 引用站外地址 css羽化 css 羽化 原理是使用了 svg 中的 foreignObject 将 dom 转化为图片来创建一个边缘模糊的遮罩 让原本有backdrop-filter: blur(10px);的元素产生了羽化的效果 核心代码 12345678910.name { position: absolute; bottom: 30px; font-size: 50px; padding: 5px 15px; margin: 0; color: #fff; backdrop-filter: blur(10px); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObje ...
未读
butterfly文章顶部添加波浪效果
预览效果 魔改修改 themes/butterfly/layout/includes/header/index.pug 大概第 33 行左右 123456789101112131415161718if top_img !== false if is_post() include ./post-info.pug+ section.main-hero-waves-area.waves-area+ svg.waves-svg(xmlns='http://www.w3.org/2000/svg', xlink='http://www.w3.org/1999/xlink', viewBox='0 24 150 28', preserveAspectRatio='none', shape-rendering='auto')+ defs+ path#gentle-wave(d='M -160 44 c 30 0 58 -18 88 ...
Chrome 发布新的 CSS 视口单位：svh、lvh、dvh！！！
引用站外地址 原文链接 The large， small， and dynamic viewport units 引用站外地址 原文翻译 Chrome 发布新的 CSS 视口单位：svh、lvh、dvh！！！ CSS 的 Viewport单位听起来很棒。 如果你想将一个元素设置成全屏高度，你可以设置高度:100vh，这样你就有了一个完美的全屏元素，它会随着视口的改变而改变大小！！！! 遗憾的是，事实并非如此！！！ vw、vh 的问题要调整视口大小，可以使用 vw 和 vh 单位。vw=视口大小宽度的 1%。vh=视口大小高度的 1%。给一个元素 100vw的宽度和 100vh 的高度，它将完全覆盖视口。 虽然现有的设备在桌面上运行良好，但在移动设备上则不同。在 ...
未读
bilibili动态背景
bilibili 动态背景 winter || autumn || spring，刷新随机顶部 cover，本篇不做教程，仅作为记录艰辛的过程 📝 本来集成成了好几个 pug 结果发现并不能结构化引入，最后还是变成了 js 操作，难受难受，果然写习惯了 vue， react 再回来就不熟练了 坎坷的失败品 本来拆分出来了了以下几个 pug，结果发现完全用不了autumn.pug12345678910111213141516.blqbanner.mobile-hidden div img(src='https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/autumn/bilibili-autumn-1.webp') div img(src='https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/autumn/bilibili-autumn-2.png') di ...
React组件之间的通信
React 的组件相对于 Vue 更加的灵活和多样，按照不同的方式可以分成很多类组件： 根据组件的定义方式，可以分为：函数组件(Functional Component )和类组件(Class Component)； 根据组件内部是否有状态需要维护，可以分成：无状态组件(Stateless Component )和有状态组件(Stateful Component)； 根据组件的不同职责，可以分成：展示型组件(Presentational Component)和容器型组件(Container Component)； React 中的组件之间的通信方法。 父子组件通信 下面这个案例演示了子传父与父传子通过 props 传递。 父组件 12345678910111213141516171819202122232425262728293031import React, { Component } from "react";import Header from "./Header";import Footer from &quo ...
为什么 react 的 setState 要设计成异步的
在使用 React 的类组件时候我们常常会使用 setState 来更新状态，那么 setState 到底是同步的还是异步的呢？ 1234changeMessage() { this.setState({message: "你好哇, 安知鱼"}) console.log(this.state.message); // hello world} 这段代码最终打印结果是 hello world，可见 setState 是异步的操作，我们并不能在执行完 setState 之后立马拿到最新的 state 的结果，那么 setState 一定是异步的吗？ 实践那么 setState 一定是异步的吗？实际上在 React18 之前分为两种情况 在组件生命周期或者 React合成事件中，setState 是异步的。 在 setTimeout 或者原生 dom 事件中（promise 之类的），setState 是同步的。 React18 之前的同步情况 123456changeMessage() { setTime ...
未读
butterfly控制特定图片懒加载
经常看我博客的同学应该不难发现我的文章顶图偶尔进来以后还要等一会才能出现，还有加载动画的图片偶尔加载不出来，后来经过我一系列的排查发现居然是懒加载的缘故。 观察 network 选项卡可以发现我们需要让启动器改变，不让lazyload.iife.min.js来加载我们的顶图与加载动画的头像。 方案一可以使用 css 的background属性而不使用 img 标签，就可以做到启动器变成对应的 css，从此排除懒加载的影响。 1234.loading-img { background: url("") no-repeat center center; background-size: cover;} 方案二（推荐）虽然 css 的方式可以做到排除但是这并不是我们所预期的，部分情况为了 seo 我们需要 img 标签且如果有多个特定图片需要指定不太好写 css，于是就产生了方案二。 我们观察butterfly对懒加载的实现可以发现，在themes/butterfly/scripts/filters/post_lazyload.js中第11行左 ...
未读
为你的博客安装上便携小空调
star 了 2 年 云游君 的小空调项目 我终于在两年后习得真传归来花费了 大概一个下午的时间完成 ✅ 了该项目的 VUE3 重构。 引用站外地址 云空调，便携小空调 云空调，便携小空调 项目地址，欢迎大家 Star 引用站外地址 云空调，便携小空调项目地址 云空调，便携小空调项目地址 相对原项目比起来优势大概就是没有使用任何 UI 框架, 极少的依赖, 这能够让我打包后的体积也仅只有84kb的js, 做到了all in js，且兼容至 ie8。 部署方案如果你和我一样是使用 hexo 的话，那么将变的极其简单。 在你的博客根目录执行以下命令: 1hexo new page air-conditioner 然后在会生成source/air-conditioner/ ...
未读
我的图床方案
自从写博客以来就一直面临着图床问题，各种各样的图片该存放在哪里，又该如何管理，在我经过不断的探索以后写下了这篇博客 初识图床图床图床，就是用来存放图片的温床，博客内有大量的图片，大量的地方需要使用到图片，优化博客加载方便管理的除了压缩图片的大小之外，首选就是多处使用图片链接，到不同的资源地址去进行加载来完成图片的加载。 网络免费图床可以通过百度图床搜索 🔍 到很多很多各种各样的图床, 在此不做介绍如 SMMS 等图床. 特点 无配置，仅需注册，有些甚至不用注册 ✅ 方便上传，方便管理 ✅ 免费 ✅ 容易跑路 ❌ 图像处理：如裁剪，压缩等 ❌ 图片加载速度不够快 ❌ 稳定性差 ❌ Github 图床大部分同学是没有服务器的，那么就很需要图床来优化自己的仓库内容，毕竟 github 一个仓库大小只能在 1G 左右，一个比较成熟的方案是使用 github + jsd + PicGo 特点 配置较为简单 ✅ 方便上传 ✅ 免费 ✅ 多个仓库可无限容量 ✅ 图像处理：如裁剪，压缩等 ❌ 一个仓库只能 1G❌ 图片加 ...
未读
butterfly魔改本地搜索预览图
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模块化打包
在 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 loaders like RequireJ ...
