awesome-skeleton
Advanced tools
$ npm i awesome-skeleton -g
skeleton.config.json:
{
"pageName": "baidu",
"pageUrl": "https://www.baidu.com",
"openRepeatList": false,
"device": "iPhone X",
"minGrayBlockWidth": 80,
"minGrayPseudoWidth": 10,
"debug": true,
"delayTime": 0,
"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 文件。
其中 html 文件可以直接拿来用，复制下面位置：
<html>
<head>
<!--- 骨架屏代码 -->
</head>
</html>
如果页面需要登录，则需要下载 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 | 是否开启调试开关 |
| delayTime | 否 | 0 | 延迟打开页面时间，用户处理登录等操作 |
| debugTime | 否 | 0 | 调试模式下，页面停留在骨架图的时间 |
| minGrayBlockWidth | 否 | 0 | 最小处理灰色块的宽度 |
| minGrayPseudoWidth | 否 | 0 | 最小处理伪类宽 |
这是获取优质骨架图的要点，通过设置以下几个 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>
$ 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
生成的结果在 demo/output 中，包括
将 demo/output/base64-test.html 的内容复制到目标页面模版的 中。
注意：
window.SKELETON && SKELETON.destroy();
当然，你也可以在项目中直接使用生成的 Base64 图片
FAQs
We found that awesome-skeleton demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.