Skip to content

Latest commit

 

History

History
201 lines (147 loc) · 5.63 KB

README-zh_CN.md

File metadata and controls

201 lines (147 loc) · 5.63 KB
Raw

awesome-skeleton

NPM version Build status Dependency status

骨架屏生成工具

English | 简体中文

Contributors


zivyangll

效果

查看线上效果：考拉购物车

kaola skeleton

说明

  • 骨架图生成组件，仅限node端使用。该组件提供骨架图生成和骨架图模板注入两个能力。
  • 骨架图生成逻辑：通过传入页面地址，使用 Puppeteer 无头浏览器打开页面地址，对页面首屏图片和文本等节点进行灰色背景处理，然后对页面首屏进行截图，生成压缩后的 base64 png 图片。

安装

全局安装

$ npm i awesome-skeleton -g

项目中安装

$ npm i awesome-skeleton -D

使用方法

添加配置文件

skeleton.config.json:

{
  "pageName": "baidu",
  "pageUrl": "https://www.baidu.com",
  "openRepeatList": false,
  "device": "iPhone X",
  "minGrayBlockWidth": 80,
  "minGrayPseudoWidth": 10,
  "debug": true,
  "debugTime": 3000,
  "cookies": [
    {
      "domain": ".baidu.com",
      "expirationDate": 1568267131.555328,
      "hostOnly": false,
      "httpOnly": false,
      "name": "BDORZ",
      "path": "/",
      "sameSite": "unspecified",
      "secure": false,
      "session": false,
      "storeId": "0",
      "value": "yyyyyyyyy",
      "id": 2
    }
  ]
}

全局生成骨架屏

$ skeleton -c ./skeleton.config.json

页面 DomReady 之后，会在页面顶部出现红色按钮：开始生成骨架屏。

生成完成后，会在运行目录生成 skeleton-output 文件件，里面包括骨架屏 png 图片、base64 文本、html 文件：

  • base64-baidu.png # 骨架图图片
  • base64-baidu.txt # 骨架图 Base64 编码
  • base64-baidu.html # 最终生成 HTML

其中 html 文件可以直接拿来用，复制下面位置：

<html>
  <head>
    <!--- 骨架屏代码 -->
  </head>
</html>

注意：

  • 骨架图默认在 onload 事件后销毁。
  • 手动销毁方式：
window.SKELETON && SKELETON.destroy();

当然，你也可以在项目中直接使用生成的 Base64 图片

项目中生成骨架屏

在 package.json 中添加脚本：

"scripts": {
  "skeleton": "skeleton -c ./skeleton.config.json"
}

生成骨架屏：

$ npm run skeleton

解决登录态

如果页面需要登录，则需要下载 Chrome 插件 EditThisCookie，将 Cookie 复制到配置参数中。

参数

参数名称 必填 默认值 说明
pageUrl 是 - 页面地址（此地址必须可访问）
pageName 否 output 页面名称（仅限英文）
cookies 否 页面 Cookies，用来解决登录态问题
outputPath 否 skeleton-output 骨架图文件输出文件夹路径，默认到项目 skeleton-output 中
openRepeatList 否 true 默认会将每个列表的第一项进行复制
device 否 空为PC 参考 puppeteer/DeviceDescriptors.js，可以设置为 'iPhone 6 Plus'
debug 否 false 是否开启调试开关
debugTime 否 0 调试模式下，页面停留在骨架图的时间
minGrayBlockWidth 否 0 最小处理灰色块的宽度
minGrayPseudoWidth 否 0 最小处理伪类宽

dom 节点属性

这是获取优质骨架图的要点，通过设置以下几个 dom 节点属性，在骨架图中对某些节点进行移除、忽略和指定背景色的操作，去除冗余节点的干扰，从而使得骨架图效果达到最佳。

参数名称 说明
data-skeleton-remove 指定进行移除的 dom 节点属性
data-skeleton-bgcolor 指定在某 dom 节点中添加的背景色
data-skeleton-ignore 指定忽略不进行任何处理的 dom 节点属性
data-skeleton-empty 将某dom的innerHTML置为空字符串

示例：

<div data-skeleton-remove><span>abc</span></div>
<div data-skeleton-bgcolor="#EE00EE"><span>abc</span></div>
<div data-skeleton-ignore><span>abc</span></div>
<div data-skeleton-empty><span>abc</span></div>

本地开发

安装依赖

$ git clone [email protected]:kaola-fed/awesome-skeleton.git
$ cd awesome-skeleton && npm i

运行项目

由于生成骨架图的代码是通过动态脚本插入的，所以需要通过 rollup 将 src/script 中的代码打包到 src/script/dist/index.js 中。首先启动 rollup 打包

$ npm run dev

修改 demo/index.js 中的配置，从而生成不同页面的骨架图：

$ cd demo
$ node index.js

感谢