Ubuntu部署hexo记录
首先庆祝一下~~吼姆小行星终于有了自己的域名!不需要再翻墙访问原地址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 其他配置(如二级域名)
...
TypeScript-interface
接口的作用面向对象的编程中,接口是一种规范的定义,定义了行为和动作的规范,在程序设计中,接口起到限制和规范的作用接口定义了某一批类说需要遵守的规范,接口不关心这些类的内部数据状态,也不关心类里面方法的实现细节,他只规定了这批内里面必须提供的某些方法提供这些方法的类就可以满足实际需要
属性类型接口
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
封装 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 ...
简单理解JavaScript中的new
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 的函数体 ...
JavaScript继承
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
缺点:
实例无法向父类构造函数传参
继承单一
所有新实例都会共享父类实例的属性(原型上的属性共享,一个 ...
JavaScript基础--BOM
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() 弹出一个表单框,返回用户输 ...
JavaScript防抖与节流
用一张图片来解释
防抖 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 ...
记录一份Reset.css
关于 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;}
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 ...