CDN入门配置
CDN配置原理：在第一次使用CDN服务时，往往会遇到一些问题，比如不知道回源HOST是干什么的，该不该配置？HOST 在计算机网络是主机、服务机的意思。顾明思议，回源HOST也就是客户访问CDN节点时，如果节点没有缓存这个资源，要在指定的主机寻找客户想要的目标资源。
源站和回源HOST的区别：
源站：源站决定了回源时请求到的具体IP地址。
回源HOST：回源HOST决定了回源请求访问到该IP地址上的具体站点。
举个例子：您要去某单位找张三办事，如果告诉您某单位在 XX路XX号，这就相当于源站。到单位后您需要找张三，就还需要知道张三的房间号，XX楼XX层XX号办公室，这就相当于回源HOST。
不需要设置回源HOST的应用场景以下两种应用场景下，可以不设置回源HOST，或者设置回源HOST为加速域名。
在您源站地址是加速域名服务器IP的情况下，您的回源HOST类型应为加速域名。
在您源站地址是OSS域名的情况下，您的回源HOST类型应为源站域名。
需要设置回源HOST的应用场景当您的服务器有多个站点，需要回源的站点不是加速域名对应的站点时，设置回源HOST。设置回源HOST要明白以 ...
hexo小标题旋转风车
前言如果不喜欢Butterfly主题自带的曲别针图标，可以换一种风格。（比如我现在使用的旋转风车）
操作打开主题配置文件_config.butterfly.yml
把beautify的title-prefix-icon选项设置为'\f863'
（如果没有开启图标功能则需要将enable设置为true）
beautify: enable: true title-prefix-icon: '\f863'
在inject的head引入:
inject: head: <style>#article-container.post-content h1: before, h2: before, h3: before, h4: before, h5: before, h6: before { -webkit-animation: avatar_turn_around 1s linear infinite; -moz-animation: avatar_turn_around 1s linear infinite; -o-animati ...
gulp压缩博客资源
前言gulp 能够帮助用户自动压缩静态资源，配合各类下属插件，能够压缩包括 css、js、html 乃至各类格式的图片文件。（图片文件的压缩往往只能节省几十 KB，效果远远不如 imagine、tinypng 等压缩方式，所以此处不再写使用 gulp 压缩图片的内容）。
如果需要压缩图片的话推荐使用图片在线压缩工具，将图像转换为WebP格式。WebP这是支持在互联网上无损和有损图像质量压缩的新格式。谷歌公司开发这种格式专为在网上迅速和方便地做好工作。其主要优点是，相对于其他图像格式，文件小，但图像质量相似。
配置教程
安装 Gulp 插件：在博客根目录 [Blogroot] 打开终端，输入：
npm install gulp #安装gulp插件
安装各个下属插件以实现对各类静态资源的压缩。
压缩 HTML：
npm install gulp-htmlclean # 清理htmlnpm install gulp-htmlmin # 压缩html
压缩 CSS：
npm install gulp-minify-css # 压缩css
压缩JS
npm install gulp ...
vue引入网络图片跨域问题
vue请求网络接口中图片报错403解决办法造成原因：网络接口都是有请求限制的，特别是图片字段值是绝对路径的情况，请求的时候就会报错403 forbidden。
解决办法：方法一：这个时候应该使用缓存的方式拿到请求图片的地址进行缓存，只要在请求到的图片链接前面加上https://images.weserv.nl/?url=即可（这是一个专门缓存图片的网址）
getImages( _url ){ if( _url !== undefined ){ let _u = _url.substring( 7 ); return 'https://images.weserv.nl/?url=' + _u; } }123456
_u：提取http://后面的部分_url：是请求接口后返回的图片字段
方法二：在index.html 中增加一个meta标签，不发送HTTP Referer首部
<meta name="referrer" conten ...
Node.js
文章转载自 Kerwin，如有侵权，请联系作者，本站仅当学习使用。
一、Node.js基础1. 认识Node.js
Node.js是一个javascript运行环境。它让javascript可以开发后端程序，实现几乎其他后端语言实现的所有功能，可以与PHP、Java、Python、.NET、Ruby等后端语言平起平坐。
Nodejs是基于V8引擎，V8是Google发布的开源JavaScript引擎，本身就是用于Chrome浏览器的js解释部分，但是Ryan Dahl 这哥们，鬼才般的，把这个V8搬到了服务器上，用于做服务器的软件。
01 nodejs的特性
Nodejs语法完全是js语法，只要你懂js基础就可以学会Nodejs后端开发
NodeJs超强的高并发能力,实现高性能服务器
开发周期短、开发成本低、学习成本低
02 浏览器环境vs node环境
Node.js 可以解析JS代码（没有浏览器安全级别的限制）提供很多系统级别的API，如：
文件的读写 (File System)
const fs = require('fs')fs.readFile(& ...
hexo图片引入
source 文件夹中除了文章以外还可能需要引入其它文件，例如图片、CSS、JS 文件等。如果Hexo项目中只有少量图片，那最简单的方法就是将它们放在 source/images 文件夹中。然后通过类似于  的方法访问它们。
如果需要更有规律地提供图片和其他资源以及想要将资源分布在各个文章上，可以通过将 config.yml 文件中的 post_asset_folder 选项设为 true 来打开。
_config.ymlpost_asset_folder: truemarked: prependRoot: true postAsset: true
安装插件hexo图片管理插件：npm i hexo-asset-image
启用后，资源图片将会被自动解析为其对应文章的路径。例如： image.jpg 位置为 /2022/09/01/Hello world/image.jpg ，这表示它是 /2022/09/01/Hello world/ 文章的一张资源图片，  将会被解析为 <img src=&quo ...
hexo提交报错
解决hexo报错spwan failedFATAL Something's wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.htmlError: Spawn failed at ChildProcess.<anonymous> (D:\Blog\node_modules\hexo-util\lib\spawn.js:51:21) at ChildProcess.emit (node:events:527:28) at ChildProcess.cp.emit (D:\Blog\node_modules\cross-spawn\lib\enoent.js:34:29) at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)
解决方案
进行以下处理
##进入博客根目录(以我的为例)cd D:\Blog##删除git提交文件夹rm - ...
深拷贝和浅拷贝
深拷贝和浅拷贝的区别假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。
深拷贝，是拷贝对象各个层级的属性，拷贝对象的地址。例如：JSON.parse(JSON.stringify())(如果变量中含有Promise对象，则不可以使用该方法)
浅拷贝，指针指向堆中相同的地址，所有会改变原来的数据。例如：Object.assign() Array.prototype.slice()
对象的扩展运算符（…）深拷贝还是浅拷贝
如果只是一层数组或是对象，其元素只是简单类型的元素，那么属于深拷贝（即只有一层拷贝）
let a = { age: 22, name: 'abc'}let b = {...a};b.age = 18;console.log(a.age); // 22console.log(b.age); // 18
如果数组或对象中的元素是引用类型的元素，那么就是浅拷贝
let a = { age: 22, name: 'ab ...
动态星空Sky粒子特效背景
[Blogroot]\_config.butterfly.yml 找到 index_img 设置为空：
# The banner image of home pageindex_img:
[Blogroot]\_config.butterfly.yml 找到 background 设置渐变色：
# Website Background (設置網站背景)# can set it to color or image (可設置圖片 或者 顔色)background: 'linear-gradient(to right top, #009fff, #ec2f4b)'
[Blogroot]\themes\butterfly\source\css\_global\index.styl 找到 #web_bg 设置渐变动画：
#web_bg { position: fixed; z-index: -999; width: 100%; height: 100%; background: $web-bg; background-at ...
命名规范
一、导航类导航：nav 主导航：mainbav 子导航：subnav 顶导航：topnav
边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：menu
子菜单：submenu 标题：title 摘要：summary
二、页面结构容器：container 页头：header 内容：content/container 页面主体：main
页尾：footer 导航：nav 侧栏：sidebar 栏目：column
页面外围控制整体布局宽度：wrapper 左右中：left right center
三、功能标志：logo 滚动：scroll 广告：banner 标签页：tab
登录：login 文章列表：list 登录条：loginbar 提示信息：msg
注册：regsiter ...