@killblanks/skeleton-chrome-ext

背景

预渲染提供的功能仅仅只能解决白屏问题，但是这个内容实际上仅仅是 css 和 html 生成的框架，存在页面的结构和实际不符合，空白过多等问题

中文 | English

原理

基于一种自动化生成骨架屏的方案，我魔改了skeleton代码，当谷歌插件加载后，注入页面中，选中当前元素，运行outputSkeleton，即可拿到骨架屏的 html&css

框架

快速开始

1. 安装

目前推荐两种方式安装

1.1 谷歌商店(暂未上架)

1.2 本地安装

• git clonekillblanks源码

  git clone https://github.com/warpcgd/killblanks.git

• 打开chrome:extensions，勾选开发者模式，点击加载已解压的拓展程序,选择 clone 源码中killblanks/packages/skeleton-chrome-ext/dist文件夹

• 视频教程

skeleton-install

2. 使用

• 打开dev-tools

• 切换到Elementtab

• 点击选择元素按钮，选择任意元素

• 在sidebar中找到SKELETON

• 点击 render 即可

• 视频教程

skeleton-use