# web-skeleton-node
> web骨架图生成器
Latest version **1.1.0** (published 2023-09-12) · 0 weekly downloads
## Install
```sh
npm install web-skeleton-node
pnpm add web-skeleton-node
yarn add web-skeleton-node
bun add web-skeleton-node
```
Provides the command `skeleton`.
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.1.0 |
| Published | 2023-09-12 |
| First published | 2023-09-12 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=8.9.0 |
| Dependencies | 8 |
| Unpacked size | 61.9 KB |
| Known vulnerabilities | 0 (+2 in 2 direct dependencies) |
| Install scripts | no |
| Maintainers | guanhaiyunyuan |
## Links
- npm: https://www.npmjs.com/package/web-skeleton-node
- npm.io page: https://npm.io/package/web-skeleton-node
## Dependencies (8)
- [xutil](https://npm.io/package/xutil.md) ^1.0.11
- [images](https://npm.io/package/images.md) ^3.0.2
- [commander](https://npm.io/package/commander.md) ^3.0.1
- [puppeteer](https://npm.io/package/puppeteer.md) ^21.1.0
- [base64-img](https://npm.io/package/base64-img.md) ^1.0.4
- [oxipng-node](https://npm.io/package/oxipng-node.md) ^1.1.1
- [html-minifier](https://npm.io/package/html-minifier.md) ^4.0.0
- [update-notifier](https://npm.io/package/update-notifier.md) ^3.0.1
## Recent versions
- 1.1.0 (latest) — 2023-09-12
## README
# web-skeleton-node
> 骨架屏生成工具
## 说明
* 骨架图生成组件，在node端使用。该组件提供骨架图生成和骨架图模板能力。
* 骨架图生成逻辑：通过传入页面地址，使用 Puppeteer 无头浏览器打开页面地址，对页面首屏图片和文本等节点进行灰色背景处理，然后对页面首屏进行截图，生成压缩后的 base64 png 图片和加入动画的代码片段。
## 安装
### 全局安装
```bash
$ npm i web-skeleton-node -g
```
### 项目中安装
```bash
$ npm i web-skeleton-node -D
```
## 使用方法
### 添加配置文件
skeleton.config.json:
```json
{
"pageName": "baidu",
"pageUrl": [
"https://baidu.com",
"http://localhost:3000/mine"
],
"device": "iPhone X",
"minGrayBlockWidth": 50,
"minGrayPseudoWidth": 10,
"outputPath": "./demo",
"debug": false,
"debugTime": 3000,
"loading": "shine",
"scripts": "sessionStorage.setItem('userInfo', '1111')",
"cookies": [
{
"domain": ".x.com",
"expirationDate": 1568267131.555328,
"hostOnly": false,
"httpOnly": false,
"name": "tt",
"path": "/",
"sameSite": "unspecified",
"secure": false,
"session": false,
"storeId": "0",
"value": "yyyyyyyyy",
"id": 2
}
]
}
```
### 全局生成骨架屏
```bash
$ skeleton -c ./skeleton.config.json
```
页面 DomReady 之后，会在页面顶部出现红色按钮：开始生成骨架屏。
支持多个页面截屏的操作(pageUrl传入数组)
生成完成后，会在运行目录生成 skeleton-output 文件件，里面包括骨架屏 png 图片、base64 文本、html 文件：
- skeleton-baidu-xxx.png # 骨架图图片
- base64-baidu-xxx.txt # 骨架图 Base64 编码
- skeleton-baidu-xxx.html # 最终生成 HTML
其中 html 文件可以直接拿来用，复制下面位置：
```html
```
注意：
- 骨架图默认在 onload 事件后销毁。
- 手动销毁方式：
```js
window.SKELETON && SKELETON.destroy();
```
**当然，你也可以在项目中直接使用生成的 Base64 图片**
### 项目中生成骨架屏
在 package.json 中添加脚本：
```json
"scripts": {
"skeleton": "skeleton -c ./skeleton.config.json"
}
```
生成骨架屏：
```bash
$ npm run skeleton
```
## 参数
| 参数名称 | 必填 | 默认值 | 说明 |
| --- | --- | --- | --- |
| pageUrl | 是 | - | 页面地址-数组或字符串（此地址必须可访问） |
| pageName | 否 | output | 页面名称（仅限英文） |
| cookies | 否 | | 页面 Cookies，用来解决登录态问题 |
| scripts | 否 | - | 注入的js |
| loading | 否 | shine | 三种动画样式 blink loading shine |
| outputPath | 否 | skeleton-output | 骨架图文件输出文件夹路径，默认到项目 skeleton-output 中 |
| openRepeatList | 否 | true | 默认会将每个列表的第一项进行复制 |
| device | 否 | 空为PC | 参考 puppeteer/DeviceDescriptors.js，可以设置为 'iPhone X' |
| 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置为空字符串 |
示例：
```html
abc
abc
abc
abc
```
参考： [awesome-skeleton](git@github.com:kaola-fed/awesome-skeleton.git)
---
_Source: https://npm.io/package/web-skeleton-node · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._