wjnba的博客

前面在图片懒加载一文中讲到什么是图片懒加载和用js怎么实现懒加载，本文记录一下图片懒加载插件 vue-lazyload的使用。 一、安装依赖包npm1npm i vue-lazyload -S yarn1yarn add vue-lazyload 二、全局注册插件1234567891011// 引入插件import VueLazyload from 'vue-lazyload'// 注册插件const loadimage = require('./assets/loading.gif')const errorimage = require('./assets/error.gif')Vue.use(VueLazyload, { preLoad: 1.3, error: errorimage, loading: loadimage, attempt: 1}) 配置项参数说明： 键 描述 默认值 选项 preLoad 表示lazyload的元素,距离页面底部距离的百分比.计算值为(p ...

js命名应遵循 简洁、语义化 的原则 一、变量命名方法: 小驼峰式命名法命名规范：前缀为形容词 （函数前缀为动词, 以此来区分函数和变量） 123456//好的命名方式let maxCount = 10;let tableTitle = '啦啦啦';//不好的命名方式let setConut = 10;let getTitle = '啦啦啦'; 临时变量1：作用域不大临时变量可以简写，比如：str，num，bol，obj，fun，arr。2：循环变量可以简写，比如：i，j，k等。 s：表示字符串。例如：sName，sHtml； n：表示数字。例如：nPage，nTotal； b：表示逻辑。例如：bChecked，bHasLogin； a：表示数组。例如：aList，aGroup； r：表示正则表达式。例如：rDomain，rEmail； f：表示函数。例如：fGetHtml，fInit； o：表示以上未涉及到的其他对象，例如：oButton，oDate； g：表示全局变量，例如：gUserName，gLoginTime； 二、常量 某 ...

媒体查询（Media Queries） 媒体查询（Media Queries）是 CSS3 中的一个特性，它允许你根据设备的特性（如宽度、高度、颜色等）来应用不同的 CSS 样式。这使得开发者能够为不同的设备（如桌面电脑、平板电脑、手机等）或同一设备的不同状态（如横屏或竖屏）创建特定的布局和样式。 媒体查询由两部分组成：媒体类型（Media Type）和媒体特性（Media Features）。 媒体类型：描述了设备的一般类别，如 all（所有设备）、screen（电脑屏幕、平板电脑、智能手机等）、print（打印机和打印预览）等。 媒体特性：描述了设备的具体特性，如 width（视口宽度）、height（视口高度）、color（设备颜色位数）等。 媒体查询的基本语法如下： 1234css@media mediaType and (mediaFeature1: value1) and (mediaFeature2: value2) { /* CSS 规则 */ } 例如，如果你想为宽度小于 768px 的设备设置特定的样式，你可以这样写： 12345 ...

从 Android 11 开始USB调试新增了无线调试功能，需要搭配 adb 30.0.0 及以上版本使用，请确认你的系统和adb是否符合要求。 一、下载adbadb下载地址： SDK Platform Tools版本说明 选择对应的系统版本，我是windows系统，所以选择如下： 下载解压完之后放到HBuilderX的adbs文件夹里 重命名为34.0.0 二、在手机上打开无线调试手机连上wifi，保证手机和电脑在同一局域网，进入开发者选项开启无线调试 三、使用配对码配对1、手机上点击使用配对码配对设备，查看配对码和ip地址： 2、进入34.0.0 文件夹，并打开cmd窗口： 使用adb pair命令和手机配对 继续使用adb connect命令连接设备 四、验证

前段时间因为jsdelivr挂掉，无法访问第三方文件，导致我的博客长时间出现资源加载问题，后面更换了cdn，但有时候还是会无法加载，未从根本上解决问题。 于是今天决定，把第三方文件放在本地加载，查看butterfly官网，看到了两种方案可供选择。 1、修改third_party_provider①.找到/butterfly/_comfig.yml文件，找到下面部分，把标注的部分改为local ②.安装hexo-butterfly-extjs依赖，执行 1npm install hexo-butterfly-extjs@1.3.4 *注意：hexo-butterfly-extjs的版本要和butterfly对应，如果版本不对应的话，可能会导致这个主题需要的第三方依赖无法完全下载到node_modules，导致后面出错。当然也可以直接执行npm i 依赖@版本号，第三方依赖和版本号在/butterfly/plugins.yml。 2、下载第三方文件到本地，修改option文件地址，覆盖原有的配置 参数 解释 internal_provider 主题内部文件可选 ...

页面布局是样式开发的第一步，也是 CSS 最重要的功能之一。 常用的页面布局，其实就那么几个。下面我会介绍5个经典布局，只要掌握了它们，就能应对绝大多数常规页面。 一、空间居中布局空间居中布局指的是，不管容器的大小，项目总是占据中心点。 CSS 代码如下。 1234.container { display: grid; place-items: center;} 上面代码需要写在容器上，指定为 Grid 布局。核心代码是place-items属性那一行，它是一个简写形式。 1place-items: <align-items> <justify-items>; align-items属性控制垂直位置，justify-items属性控制水平位置。这两个属性的值一致时，就可以合并写成一个值。所以，place-items: center;等同于place-items: center center;。 同理，左上角布局可以写成下面这样。 1place-items: start; 右下角布局。 1place-items ...

在我们更换电脑、或者重新安装谷歌浏览器的情况下，如果书签没有备份，原来收藏的网页就找不到了，我们需要一种手段来保存、同步书签，这时我们可以通过浏览器扩展程序配合码云来实现这个功能。 准备一、在码云上创建一个仓库，用来保存书签。 二、在仓库里新建一个名为bookmarks.html的空文件。 必须要创建bookmarks.html文件，不然推送到仓库的时候会失败。 三、创建私人令牌，用来推送书签文件到仓库。 四、下载使用扩展程序。 下载扩展程序 下载扩展程序后解压，导入到谷歌浏览器扩展程序里。 点击程序，向下依次填入私人令牌、用户名、仓库名、文件路径（bookmarks.html）、分支（master）,如下图所示： 填完后，我们就可以通过点击Upload按钮把书签同步到码云上，当更换电脑、重新安装浏览器后可通过点击Download按钮同步书签到本地了。

patch-package的使用在vue实际项目中,有时候会涉及到修改node_modules里面的代码，但是如果直接在本地修改node_modules里面的代码，会带来很大的麻烦，比如更换电脑拉取项目后，执行npm install安装项目依赖，会恢复到没改之前的代码，这时我们可以使用patch-package这个库来解决这类问题。 1、安装patch-package1npm i patch-package --save-dev 2、修改完依赖后，运行patch-package创建patch文件12npx patch-package 依赖名称例子： npx patch-package wangeditor 3、修改package.json的内容，在scripts中加入"postinstall": "patch-package"，这个是为了npm install的时候自动为依赖包打上我们改过的依赖1234"scripts": {　　...　　"postinstall": "patch- ...

Front-matterFront-matter 是 markdown 文件最上方以 —- 分隔的区域，用于指定个别档案的变数。 Page Front-matter 用于页面配置Post Front-matter 用于文章页配置 如果标注可选的参数，可根据自己需要添加，不用全部都写在markdown里 Page Front-matter123456789101112131415---title:date:updated:type:comments:description:keywords:top_img:mathjax:katex:aside:aplayer:highlight_shrink:--- 写法 解释 title 【必需】页面标题 date 【必需】页面创建日期 type 【必需】标籤、分类和友情链接三个页面需要配置 updated 【可选】页面更新日期 description 【可选】页面描述 keywords 【可选】页面关键字 comments 【可选】显示页面评论模块(默认 true) top_img 【可选】页面顶部 ...

键盘事件包含onkeypress onkeydown和onkeyup事件，其中onkeypress事件是在键盘上的某个键被按下并且释放时触发此事件的处理程序，一般用于 键盘上的单键操作。onkeydown事件是在键盘上的某个键被按下时触发此事件的处理程序，一般用于快捷键的操作。onkeyup事件是在键盘上的某个键被按下后松开时触发此事件的处理程序，一般用于快捷键的操作。 字母和数字键的键码值(keyCode) 按键 键码 按键 键码 按键 键码 按键 键码 A 65 J 74 S 83 1 49 B 66 K 75 T 84 2 50 C 67 L 76 U 85 3 51 D 68 M 77 V 86 4 52 E 69 N 78 W 87 5 53 F 70 O 79 X 88 6 54 G 71 P 80 Y 89 7 55 H 72 Q 81 Z 90 8 56 I 73 R 82 0 48 9 57 数字键盘上的键的键码值(keyCode) 按键 键码 按键 键码 0 96 8 104 1 97 9 ...