参考文章： 保罗 云泥
AJAX AJAX = 异步 JavaScript 和 XML，是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。有很多使用 AJAX 的应用程序案例，最常见的就是页面拉到底时浏览器会自动加载下一页的内容。
PJAX PJAX = PushState + AJAX，当用户点击链接发起请求时，PJAX 会拦截请求，然后触发 Ajax 请求和 PushState。其中，Ajax 使你的页面局部刷新，pushState 用于修改 URL 而不跳转页面，从而实现不跳转页面局部刷新的功能。可以提高用户体验，同时极大的减少服务器和宽带消耗。
Butterfly + PJAX 开启PJAX 在Butterfly主题中已经集成了PJAX，在主题配置文件_config.butterfly.yml中找到Pjax将enable设置为true即可。
重载 JS 由于通过 PJAX 切换的页面并没有完全刷新，浏览器不会将网页从头执行一遍，因此有些 JS 将不会生效。为了保证功能不失效，需要重新再执行一次，即重载。
在Butterfly主题中已经集成了解决方法在pjax.pug中，每次使用时在引入这些文件的标签上添加 data-pjax 属性
1inject: 2 bottom: 3 - <script data-pjax src="/js/ripples.js"></script>
参考博客：花猪
在\themes\butterfly\source\js目录下创建一个readtime.js文件
1let oSpan = document.getElementsByTagName("readtime")[0]; 2let localhostTime = new Date(); //获取页面打开的时间 3function tow(n) { 4 return n >= 0 && n < 10 ? "0" + n : "" + n; 5} 6setInterval(function () { 7 let goTime = new Date(); //获取动态时间 8 let diffTime = goTime.getTime() - localhostTime.getTime(); 9 var second = Math.floor(diffTime / 1000); //未来时间距离现在的秒数 10 second = second % 86400; //余数代表剩下的秒数； 11 var hour = Math.
...
实习公司要求使用 Angular，学过 VUE，了解过 React，偏偏是没用过的 Angular，重头啃
安装 node 查看版本，之前都是在 cmd 窗口，今天学了个 powershell 窗口，感觉差不多，shift+win+右键
1$ node -v 2$ npm -v 安装 Angular 脚手架 1$ npm install -g @angular/cli@14.0.2 查看版本 1$ ng v # ng version 报错如下： 解决办法： 管理员运行 Aindows PowerShell
输入下面指令，并输入A更改权限
1$ set-ExecutionPolicy RemoteSigned 输入下面指令查看当前状态
1$ get-ExecutionPolicy 再次查看版本号，安装成功 卸载 Angular 1$ npm uninstall -g @angular/cli 创建项目 cd到存放项目的目录，输入命令
1$ ng new <项目名> 2$ yes 3$ css 安装依赖的时间略久，可以先跳过安装依赖的步骤，只是建项目，等项目建完后再安装依赖
1$ ng new <项目名> --skip-install 创建好之后的项目结构如下： cd到项目的目录地址，输入命令：
...
获取图标Unicide值 在 fontawesome上找到需要的图标，记录下Unicode值
配置文件 在主题配置文件_config.butterfly.yml的beautify处，修改标题图标
1beautify: 2 enable: true 3 field: post # site/post 4 # title-prefix-icon: '\f0c1' 原锁链标题 5 title-prefix-icon: '\f14e' 6 title-prefix-icon-color: '#F47466' 在\themes\butterfly\source\css目录下新建title_icon.css文件，添加：
1/* 文章页H1-H6图标样式效果 */ 2h1::before, h2::before, h3::before, h4::before, h5::before, h6::before { 3 -webkit-animation: ccc 1.6s linear infinite ; 4 animation: ccc 1.6s linear infinite ; 5} 6@-webkit-keyframes ccc { 7 0% { 8 -webkit-transform: rotate(0deg); 9 transform: rotate(0deg) 10 } 11 to { 12 -webkit-transform: rotate(-1turn); 13 transform: rotate(-1turn) 14 } 15} 16@keyframes ccc { 17 0% { 18 -webkit-transform: rotate(0deg); 19 transform: rotate(0deg) 20 } 21 to { 22 -webkit-transform: rotate(-1turn); 23 transform: rotate(-1turn) 24 } 25} 给 H1~H6 标题设置不同颜色，在title_icon.
...
在 \themes\butterfly\source\css目录下新建 article_transparent.css文件，添加：
1/* 首页文章栏背景透明 */ 2#recent-posts>.recent-post-item,.layout_page>div:first-child:not(.recent-posts),.layout_post>#page,.layout_post>#post,.read-mode .layout_post>#post { 3 background: var(--light_bg_color) 4} 5 6/* 侧边栏透明 */ 7#aside-content .card-widget { 8 background: var(--light_bg_color) 9} 在主题配置文件 _config.butterfly.yml的 inject，在 head直接引入 css文件
1- <script src="/css/article_transparent.js"></script>
在\themes\butterfly\source\js目录下新建funny_title.js文件，添加：
1var OriginTitle = document.title; 2var titleTime; 3document.addEventListener('visibilitychange', function () { 4 if (document.hidden) { 5 $('[rel="icon"]').attr('href', "/funny.ico"); 6 document.title = '╭(°A°`)╮ 怎么走了 ~'; 7 clearTimeout(titleTime); 8 } 9 else { 10 $('[rel="icon"]').attr('href', "/favicon.ico"); 11 document.title = '(ฅ>ω<*ฅ) 欢迎回来 ~' + OriginTitle; 12 titleTime = setTimeout(function () { 13 document.title = OriginTitle; 14 }, 2000); 15 } 16}); 在主题配置文件_config.butterfly.yml的inject，在bottom直接引入js文件
1- <script src="/js/funny_title.js"></script>
雪花 在\themes\butterfly\source\js目录下新建snow.js文件，添加：
1if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) { 2 // 移动端不显示 3 } 4else { 5 (function($){ 6 $.fn.snow = function(options){ 7 var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('❄'), 8 documentHeight = $(document).height(), 9 documentWidth = $(document).width(), 10 defaults = { 11 minSize : 10, 12 maxSize : 20, 13 newOn : 1000, 14 flakeColor : "#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */ 15 }, 16 options = $.extend({}, defaults, options); 17 var interval= setInterval( function(){ 18 var startPositionLeft = Math.
...
前言 虽然Hexo部署博客很方便，但是当我们更换电脑时呢，在github中的其实只是在我们本地目录里的.deploy_git里面的内容，显然我们需要把源文件备份push到github上，这样只需要克隆到本地，简单配置后就可以了。
备份 新建分支 在Github上的博客仓库下创建一个新的分支hexo，并且将这个分支设置为默认分支
克隆hexo分支 1$ git clone git@...git #(github page 的仓库地址) 把克隆下来的文件夹中的.git文件复制到博客根目录下，如果没有找到.git文件，其实是被隐藏了 开始备份 进入到博客的根目录下Git Bash
1$ git add . 2$ git commit -m "Backup" 3$ git push origin hexo 此时可以在Github上发现完成备份。 之后每次在更改后，可以执行以下命令：
1$ hexo clean 2$ git add . 3$ git commit -m "backup" 4$ git push 5$ hexo g -d 本地恢复 换一台电脑，配置好 Hexo 的环境，配置 Git SSH key，把博客源文件代码克隆下来:
1$ git clone git@...git # (github page 的仓库地址) 克隆后，默认分支是 master，需要切换到hexo分支（省略）
1$ git branch -a # 查看所有分支 2$ git checkout origin/hexo # 切换到xxx分支 执行如下命令
...
参考文章：https://blog.zhheo.com/p/32776e99.html
资源文件 CodePen
配置 在主题配置文件_config.butterfly.yml中，找到preloader并设置enable为true
在 \themes\butterfly\source\css目录下新建 loading_car.css文件，添加：
1/* loading背景 */ 2.loading-bg, #loading-box .loading-left-bg, #loading-box .loading-right-bg{ 3 background-color: #3f3f3f; 4} 5 6.carplay{ 7 box-sizing: border-box; 8 9 --black :#1a1c20 ; 10 --white : #fff ; 11 --green : #3f3f3f ; 12 --d-green : #1e1e1e ; 13 --gray : #c1c1c1 ; 14 --l-gray: #c4c4c4 ; 15 --m-gray : #373838 ; 16 --d-gray : #282724 ; 17 --d-blue: #202428 ; 18 --orange : #ef6206 ; 19 --yellow : #dfa500 ; 20 --l-yellow: #deb953; 21 --light: #fbfbfb ; 22 --n-road : -4em; 23 --p-road : 7em; 24 25 /* background-color: var(--green) ; */ 26 27 28} 29 30.
...
在/themes/butterfly/source/js文件夹中新建mouse_move.js文件
1(function () { 2 function t() { 3 i(), a(); 4 } 5 function i() { 6 document.addEventListener("mousemove", o), 7 document.addEventListener("touchmove", e), 8 document.addEventListener("touchstart", e), 9 window.addEventListener("resize", n); 10 } 11 function n(t) { 12 (d = window.innerWidth), window.innerHeight; 13 } 14 function e(t) { 15 if (t.touches.length > 0) 16 for (var i = 0; i < t.touches.length; i++) 17 s( 18 t.touches[i].clientX, 19 t.touches[i].clientY, 20 r[Math.floor(Math.random() * r.
...