主题主题是butterfly 持续更新自定义博客样式是一个渐进的过程…这篇文章主要用来记录美化网站样式的过程有好的建议欢迎留言~ 修改主题源文件修改卡片颜色theme/butterfly/source/css/var.styl 12- $card-bg = $white+ $card-bg = rgba(255, 255, 255, .75) 修改 hover 颜色12- $text-bg-hover = $theme-color+ $text-bg-hover = #00c4b6 修改夜间模式卡片颜色theme/butterfly/source/css/_mode/darkmode.styl 12- --card-bg: alpha(#121212, .7)+ --card-bg: alpha(#121212, .7) 自定义 CSS自定义 css 的方法 123456789# _config.butterfly.yml# Inject# Insert the code to head (before '</head>' tag) and the ...

首先庆祝一下~~吼姆小行星终于有了自己的域名！不需要再翻墙访问原地址GitHub Page 的项目会同步更新… 所以哪个都一样啦国内的话还是推荐访问https://space.shirofune.cn/哦 记录 hexo 部署流程github.io 访问起来很慢…所以萌生了想要把博客放在国内服务器上的想法购买服务器…购买域名…备案…尤其是备案，真的好麻烦但是以上都是很简单的接下来的部署充满了摸索的过程…我不怎么会 Nginx 和 Linux…这些基本都是我通过搜索引擎得到的这个过程学到了很多东西，更重要的是利用 git 上线项目的简单流程做的配置都是最低需要的（大概）毕竟用的是 root 权限…如果有错误..欢迎指出，在留言板或者评论区都可以~感激不尽！ Ubuntu-Git 项目部署流程 更新系统 安装 nginx 网页服务器 安装 git 版本控制 安装 node（通过 nvm） nginx 配置监听文件目录 创建一个 git 空仓库 配置 git 空仓库（远程仓库） 配置 git/hook 配置 ssh 免密提交 nginx 配置 Https nginx 其他配置（如二级域名） ...

接口的作用面向对象的编程中，接口是一种规范的定义，定义了行为和动作的规范，在程序设计中，接口起到限制和规范的作用接口定义了某一批类说需要遵守的规范，接口不关心这些类的内部数据状态，也不关心类里面方法的实现细节，他只规定了这批内里面必须提供的某些方法提供这些方法的类就可以满足实际需要 属性类型接口 ts 接口对方法的参数进行约束 1234567// 要求info必须包含label属性function printLabel(info: { label: string }): void { console.log(info);}printLabel("xxx"); // errorprintlabel({ name: "xxx" }); // errorprintLabel({ label: "xxx" }); // right 对批量方法进行约束 12345678910111213141516171819202122// 定义接口inte ...

封装 Axios基本使用12345678910axios('url', { method: 'get', timeout: 3000, headers: {...} // ...}).then((res) => { // ...}, (err) => { // 错误处理}) 封装12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455// 自定义axios实例const service = axios.create({ // 设置baseUrl node环境下的地址 baseURL: process.env.VUE_APP_BASE_API, timeout: 3000, headers: { "X-Requested-With": "XML ...

new 和直接执行函数的区别，new 如何实现this 指向不同123456创建一个Test构造函数，打印thisfunction Test() { console.log(this)}var test = new Test() // Test {}var t = Test() // Window { ... } 对 return 的处理1如果一个构造函数return了一个引用类型的数据，那么使用new创建它的实例时，将会返回return的内容，当返回的值是基本类型时，将会正常创建实例 new 操作符都做了什么12var Fn = function () {};var fn = new Fn(); 创建一个空对象 1var obj = new Object(); 设置原型链（调用一个构造函数创建一个新实例后，该实例的内部将包含一个指针，只想构造函数的原型对象） 1obj.__proto__ = Fn.prototype; 让 Fn 中的 this 指向 obj，并执行 Fn 的函数体 ...

ES5 继承、ES6 class 继承原型链继承123456789101112131415function SuperType() { this.property = true;}SuperType.prototype.getSuperValue = function () { return this.property;};function SubType() { this.subproperty = false;}SubType.prototype = new SuperType(); // 原型链继承SubType.prototype.getSubValue = function () { return this.subproperty;};let instance = new SubType();console.log(instance.getSuperValue()); // true 缺点： 实例无法向父类构造函数传参 继承单一 所有新实例都会共享父类实例的属性（原型上的属性共享，一个 ...

BOM浏览器对象模型 Browser Object Model window 对象视口大小，视口位置视口位置 123456789// 整个窗口的大小window.outerWidth;window.outerHeight;// 视口大小window.innerWidth;window.innerHeight;// 视口中页面大小（不包含auto的滚动条）document.documentElement.clientWidth;document.documentElement.clientHeight; 滚动视口 1234567window.scrollTo(x, y);window.scrollTo({ left: 0, top: 100, // behavior属性设置是否平滑滚动 behavior: "auto", // 'smooth'}); alert confirm promtalert() 弹出一个警告框confirm() 弹出一个确认框，用户选择后返回布尔值prompt() 弹出一个表单框，返回用户输 ...

用一张图片来解释 防抖 debounce在第一次触发函数时，不立刻触发函数，而是给一个时间，如果在这个时间内多次触发函数，只执行一次 12345678910111213141516function debounce(fn, delay) { // 需要在return外部声明timer // 多次触发debounce的时候，return的函数共享一个timer变量 let timer; return function () { // 保存this let context = this; // 保存传入的参数 let args = arguments; clearTimeout(timer); timer = setTimeout(function () { // 改变this指向，并传入参数 fn.apply(context, args); }, delay); };} 防止重复发送请求 1234567891011121314151617181920212 ...

关于 Normalize.cssnormalize.css确实是很好用的，它主要的作用是统一各个浏览器之间的差异性 Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.附上谷歌翻译:Normalize.css 使浏览器更一致地呈现所有元素并符合现代标准。它仅针对需要标准化的样式。reset.css 可以和 normalize 一起使用,但没必要… reset.css我用 reset.css 主要是为了全局擦除 a 标签的下划线还有 p 标签的 margin怎么舒服怎么来, 合适自己的才是最好的 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061 ...

图片加载防抖且宽高适应父元素的一个思路父元素高度设置为 0，使用 padding 撑起高度，利用绝对定位让图片定位在父元素的内边距上 123<div class="image-box"> <img src="picture/url" /></div> 1234567891011.image-box { width: 100px; height: 0; position: relative;}.image-box img { width: 100%; height: 100%; display: block; position: absolute;}