Hexo Butterfly主题加入PWA(Progressive Web Apps)
介绍:PWA的全称是Progressive Web Apps,译为渐进式网络应用程序。装配了PWA以后,用户可以将网站作为WEB APP安装到自己的设备上,以原生应用般的方式浏览博客,同时借助PWA的缓存机制,能够更快速的浏览。本文讨论的是使用两种方案实现PWA。最终效果不尽相同,但是都可以实现原生应用体验和更新弹窗提示。 图标设计:在使用PWA之前,我们最好先行设计一个符合网站主题的图标。可以使用brandmark图标设计网站,访问 brandmark进行图标设计。下载需要收费,不过可以截图。建议截图的时候截成正方形。 生成图标包及manifest因为我们最终目的是要制作一个全平台的WEB APP,所以对于图标的大小、类型适配显得格外重要。可以访问realfavicongenerator进行图标制作及manifest的生成。 选择图片 创建所有图标 调整Windows磁贴图标配色 设置图片相对于source目录的存放路径 设置Web App名称 生成README.md 选择生成 下载资源包 获取图标文件和manifest 配置PWA实现 ...
hexo 博客 一张图背景设置
blogroot\themes\butterfly\source\css新建toututouming.css 1234/* 头图透明 */#page-header{ background: transparent!important;} 主题配置文件_config.butterfly.yml插入CSS文件 123inject: head: - <link rel="stylesheet" href="/css/toututouming.css?1">
hexo 博客导航栏居中,搜索图标靠右边
blogroot\themes\butterfly\source\css新建nav_middle.css 12345678/* 导航栏做居中处理 */#nav-right{ flex:1 1 auto; justify-content: flex-end; margin-left: auto; display: flex; flex-wrap:nowrap;} 主题配置文件_config.butterfly.yml插入CSS文件 123inject: head: - <link rel="stylesheet" href="/css/nav_middle.css?1">
hexo 博客底色透明,夜间模式遮罩,阅读模式优化
blogroot\themes\butterfly\source\css新建night.css 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778:root { --trans-light: rgba(255, 255, 255, 0.9); --trans-dark: rgba(25, 25, 25, 0.9); --border-style: 1px solid rgb(169, 169, 169); --backdrop-filter: blur(5px) saturate(150%); } /* 首页文章卡片 */ #recent-posts > .recent-post-item { background: var(--trans-light); border-radius: 2 ...
gulp 压缩 hexo 博客的静态资源(css、js、html)
写在最前gulp能够帮助用户自动压缩静态资源,配合各类下属插件,能够压缩包括css、js、html乃至各类格式的图片文件。(图片文件的压缩往往只能节省几十KB,效果远远不如imagine、tinypng等压缩方式,所以此处不再写使用gulp压缩图片的内容)。 配置教程安装Gulp插件:在博客根目录[Blogroot]打开终端,输入:1234#全局安装gulp指令集npm install --global gulp-cli#安装gulp插件npm install gulp --save 安装各个下属插件以实现对各类静态资源的压缩。压缩HTML: 12npm install gulp-htmlclean --save-devnpm install gulp-html-minifier-terser --save-dev 用gulp-html-minifier-terser可以压缩HTML中的ES6语法压缩CSS: 1npm install gulp-clean-css --save-dev 压缩JSButterfly主题文档提供了两种压缩JS的插件方案。两者的差别在于terser是ES6+ ...
hexo 博客星空背景和流星特效
1. 插入Canvas标签首先打开Butterfly主题的_config.yml文件或者使用HTML直接插入,找到配置文件对应的inject部分,插入 1<canvas id="universe"></canvas> 2. 创建JS文件在butterfly/source/js/创建一个universe.js文件,或者添加到自己的js文件中 12function dark() {window.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame;var n,e,i,h,t=.05,s=document.getElementById("universe"),o=!0,a="180,184,240",r="226, ...
js-正则替换字符串 replace() 方法
replace()方法介绍replace()方法执行搜索替换操作。它接收一个正则表达式作为第一个参数, 接收一个替换字符串作为第二个参数。它搜索调用它的字符串, 寻找与指定模式匹配的文本。如果正则表达式带g标志, replace()方法会替换字符串中的所有匹配项; 否则, 它只替换第一个匹配项。如果replace()方法的第一个参数是一个字符串而非正则表达式, 这个方法会按照字面值进行搜索。 简单用法 123456let text = 'my name is hu,you NAME is zhang';// 因为字符串是不可修改的对象所以要赋值给一个新变量, 也可以对其重新赋值text = text.replace(/name/gi,'like'); // 标志g表示全局匹配,标志i表示不区分大小写console.log(text); // my like is hu,you like is zhang 不过replace()方法的能力远不止这些。比如在正则表达式中用括号()分组的子表达式是从左到右编号的, 而且正则表达式能记住每个子表达式匹 ...
javascript/js 关于时间函数的学习,并结合实际业务例子进入加强记忆,附快速获取当天时间函数
JavaScript Date(日期) 对象今天我们重点学习JavaScript中的Date对象。 Date对象用于处理日期和时间。可以通过new关键词来定义Date对象。 获取时间如获取当前系统时间。 12var now = new Date();console.log(now); //控制台的输出结果为Mon May 09 2022 13:48:39 GMT+0800 (中国标准时间) 也可以获取指定参数的时间。 1234567891011//参数1:年份//参数2:月份 (注意从0开始)//参数3:日//参数4:小时//参数5:分钟//参数6:秒var date1 = new Date(new Date(2022,0,1,09,30,00));console.log(date1);//控制台的输出结果为Sat Jan 01 2022 09:30:00 GMT+0800 (中国标准时间)//参数非必填,可按需省略,不填默认为0var date2 = new Date(2022,0,9);console.log(date2);//控制台的输出结果为Sun Jan 09 2022 0 ...
centos 更换内核,提示[错误] /boot/grub2/grub.cfg 找不到,请检查
提示/boot/grub/grub.conf 找不到 123yum install -y grubgrub-mkconfig -o /boot/grub/grub.conf 提示/boot/grub2/grub.cfg 找不到 123yum install -y grub2grub2-mkconfig -o /boot/grub2/grub.cfg 文章内容和代码来源于 Centos更换内核,提示[错误] /boot/grub2/grub.cfg 找不到,请检查 ,如有侵权请联系站长立即删除。
mikrotik routeros/ros 系统下载/自动更新升级包/刷机固件
1.升级:RouterOS升级的2种方式: 1.1.在ROS中自动下载并升级:打开Winbox,打开system-packages,然后点击左上角“Check For Updates”: download-先下载好,等下次重启系统时升级系统downlad&install-现在下载并重启安装更新包 1.2.下载离线包升级*我应该怎么选择适合我的升级包打开Winbox,标题栏括号中会显示你机器的类型,在下载页选择对应的包就行了*离线更新包如何使用?将下载的.npk文件,通过Winbox上传到files,重启系统即可升级。 MikroTik官方下载页面 文章内容和代码来源于 MikroTik Routeros/ROS系统下载/自动更新升级包/刷机固件 ,如有侵权请联系站长立即删除。



![centos 更换内核,提示[错误] /boot/grub2/grub.cfg 找不到,请检查](/img/centos.webp)


