最新文章Acrylic安装文档（一）
本教程更新与 2023 年 3 月 26 日，教程的内容针对最新的 anzhiyu 分支安知鱼版本（如果你是稳定版或开发版，教程会有出入，请留意） 基本认识Front-matter 为 页面或文章顶部配置与使用，此处不再赘述，具体配置请参考Butterfly 安装文档(二) 主题页面 主题新增了部分字段: 首页轮播图配置: swiper_index, 数字越小越靠前 首页卡片配置: top_group_index, 数字越小越靠前 page 中background, 可配置为 16 进制颜色值 --- title: Hello World swiper_index: 1 top_group_index: 1 background: #fff --- 只需要在你的文章顶部的Front-matter配置这两个字段即可显示轮播图和推荐卡片 图标配置博客根目录执行以下命令 npm install hexo-butterfly-tag-plugins-plus 首页技能点配置[blog]代表你的博客根目录。示例数据中的图片链接为本人图床，请自行上传至您自己的图床，（不保证永久可用性） ...
Acrylic主题快速开始
本教程更新与 2023 年 3 月 26 日，教程的内容针对最新的 anzhiyu 分支安知鱼版本（如果你是稳定版或开发版，教程会有出入，请留意） hexo-theme-Acrylic 是基于 hexo-theme-butterfly 的基础上进行开发的。 💻 安裝git安装(github)git安装(gitee)npm安装在博客根目录里安装最新版【推荐】 git clone -b anzhiyu https://github.com/hexo-theme-Acrylic/hexo-theme-Acrylic.git themes/Acrylic暂未开放.暂未开放. ⚙ 应用主题修改 hexo 配置文件_config.yml，把主题改为Acrylic theme: acrylic 安装插件npm install hexo-renderer-pug hexo-renderer-stylus --save 更好的配置 macos/linux在博客根目录运行 cp -rf ./themes/acrylic/_config.yml ./_config.acrylic. ...
hexo博客工作流CI（一键部署的快乐）
在日常写博客的过程中我常常使用CI部署，一开始我是使用Jenkins，后来觉得很丑且经常拉库失败（设置的cron是半小时拉取一次，然而常常4-5小时才能更新） 就转向了阿里的工作流，好看很多且界面操作也简单了许多，缺点就是个人使用实在是没必要，企业的话用起来还是很爽的。 再后来看到店长的文章以后就开始使用Github Action，具体可以去看这篇文章 站内地址 使用 Github Action 自动部署 使用 Github Action 自动部署 Github Action 优点 可以多域名多站点部署 不会出现从服务器去连接github连接不上的情况 可以一键多处全部部署完成✅ 不再需要使用繁杂的前置命令 hexo cleanhexo bangumi -u #bilibili番剧更新hexo generatehexo algoliagulp 比如我自己是在vercel, netlify, 服务器多吉云加速，三处部署 ...
给你的博客加一个优雅的音乐界面
很久之前就想把整个音乐界面好好写一写，不过一直迫于咕咕咕的属性没有去做这件事，以至于悔之不及，没有早点做，对我这种重度音乐控来说真的是太爽了，很快啊，马上就听了一下午。 前两天看到 叶子 重做了音乐界面于是马上就搞过来了啊，很快啊哈哈哈哈哈，谢谢大叶子的投喂！ 博主思路和叶子有所不同，每个人都有每个人的实现方法，本文仅做分享博主自己的实现思路。 在线体验一个优雅的音乐界面 效果图整体效果我还是非常满意的hhh 魔改步骤博主使用的meting2的版本，修改主题配置文件 _config.butterfly.yml 最下面 CDN.option.meting_js，有能力的建议自己下载下来并传到自己的oss或直接使用本地路径引用。 meting_js: https://npm.elemecdn.com/hexo-anzhiyu-music@1.0.1/assets/js/Meting2.min.js 创建页面, 新建 source/music/index.md 文件 --- title: 音乐馆 date: 2021-04-24 21:41:30 type: music aplaye ...
操作系统复习题
操作系统 选择题 操作系统的最主要设计目标是（ ）。A．方便性和有效性 B．方便性和可扩展性C．有效性和可扩展性 D．有效性和开放性答：A有甲、乙两道算题，每道需执行 1 小时（其中处理器的工作时间为 12 分钟）。若它们在多道系统中执行，甲、乙两道题总共需执行 80 分钟，则处理器的利用率为（ ）。A．50% B．40% C．30% D．20%答：C从下面对临界区的论述中，选出一条正确的论述。（ ）A.临界区是指进程中用于实现进程同步的那段代码B.临界区是指进程中用于实现进程通信的那段代码C.临界区是指进程中用于访问共享资源的那段代码D.临界区是指进程中访问临界资源的那段代码答：D操作系统提供一组特殊的程序，它们不能被系统中断，在操作系统中称为（ ）。A.初始化程序 B.原语 C.子程序 D.控制模块答：B一种既有利于短小作业又兼顾到长作业的作业调度算法是（ ）。A．先来先服务 B．轮转 C．最高响应比优先 D．均衡调度答：C操作系统中，资源分配的基本单位是（ ）。A．进程 B．线程 C．作业 D．程序答：A进程之间的制 ...
2022年度总结
眨眼之间一年就过去了，这一年发生了好多好多的事情呐。多图流量警告。 在这一年里有试过在杭州剪过一次新发型。 关于工作今年年初继续上年在一家很棒的公司做着前端实习工作，虽然工资不高，只有 5k，不过在这里认识的人都特别好，以至于到现在也常有联系。 工位也很喜欢，每天来到办公室的第一件事就是开中央空调。因为是直播公司的缘故，在这里从来没有缺过零食，除了一开始的单休不太美丽以外，后续也改为了双休（打工人高呼） 临近春节以后给住了半年的小区最后拍了一张清晨的拱墅区。 在杭州的日子里，这座城市给我感觉很棒，很魔幻，可惜第一次来到一个陌生的城市，租到了一个离工作地点通勤需要地铁 1 个半小时 ➕ 公交半小时才能抵达滨江实在是令人窒息。也曾试过 6 点半起来然后骑自行车只需要 1 个小时多到达公司楼下，这样 8 点多到，然后吃个早餐就差不多正好（9 点考勤），不过实在是太累了（也有过买小电驴的想法 💡），但是杭州的小电驴管的特别严，给我印象最深刻的就是过斑马线的时候一大堆人和电瓶车一起等红绿灯 🚥 的场景，然后几个人开始抢跑 hhh，这是湘潭这种小县城所不具备的。 再后来过完年本来打 ...
![[转载]还在用 JS 做节流吗？CSS 也可以防止按钮重复点击](https://img02.anzhiy.cn/adminuploads/1/2022/09/05/6315e1487d0f0.webp!cover)
[转载]还在用 JS 做节流吗？CSS 也可以防止按钮重复点击
引用站外地址 还在用 JS 做节流吗？CSS 也可以防止按钮重复点击 https://juejin.cn/post/7165828047520661534 众所周知，函数节流（throttle）是 JS 中一个非常常见的优化手段，可以有效的避免函数过于频繁的执行。 举个例子：一个保存按钮，为了避免重复提交或者服务器考虑，往往需要对点击行为做一定的限制，比如只允许每300ms提交一次，这时候我想大部分同学都会到网上直接拷贝一段throttle函数，或者直接引用lodash工具库 btn.addEventListener("click", _.throttle(save, 300)); 其实除了 JS 方式， CSS 也可以非常轻易的实现这样一个功能，无需任何框架库，一起看看吧 一、CSS 实现思路分析CSS 实现和 JS 的思维不同，需要从另一个角度去看待这个问题。 比如这里的需要对点击事件进行限制，也就是禁用点击事件，想想 ...
transform 支持单独赋值改变
在掘金看到一篇文章 引用站外地址 解放生产力！transform 支持单独赋值改变 https://juejin.cn/post/7152331836578856967 看完以后有感而发transform在制作动画时经常被占用，因为一个元素只能使用一个 transform，所以当我有多属性值需要设置时，我通常的做法是通过添加一个父元素来给它设置 transform 属性。 比如在魔改博客的过程中希望改变transform中的某一部分, 我必须把前面的部分也照抄一遍才能达到覆盖修改的目的 header.nav { transform: scale(1.5); /*这样不行，会丢失translate*/ } /*必须写完整*/ header.nav { transform: translate(-50%, -50%) scale(1.5); } 所以transform很需要能够像b ...
css模糊羽化
在逛 codepen 的时候发现一个有意思的 css 羽化项目 引用站外地址 css羽化 css 羽化 原理是使用了 svg 中的 foreignObject 将 dom 转化为图片来创建一个边缘模糊的遮罩 让原本有backdrop-filter: blur(10px);的元素产生了羽化的效果 核心代码 .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%3CforeignObject width='100%25' ...
butterfly文章顶部添加波浪效果
预览效果 魔改修改 themes/butterfly/layout/includes/header/index.pug 大概第 33 行左右 if 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 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z') + g.p ...
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.pug.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') div img(src='https://npm.elemecdn.co ...
