CSS可视化编辑 yellowpencil（脱离wordpress）

yellowpencil官网

https://yellowpencil.waspthemes.com/

tips: 在官网中的Docs中，已经简短的不能再简短了（不详细）。

原生的限制[弱]

yellowpencil原版有几点限制：

1、平台依赖。yellowpencil是在wordpress平台下部署的，而wordpress是基于php的。我们也可以在后台看到yellowpencil的源码（php版的）。免费版yellowpencil部署步骤见： https://yellowpencil.waspthemes.com/docs/how-to-install-yellowpencil-lite/ 。

2、对同源网站存在稍许的bug,在customize another page中，有时候同源网站被判断为无效url。

蛋哥的贡献[强]

1、解放了yellowpencil对平台的依赖，使其能自由部署。

2、修复了customize another page中的一些bug，消除对同源站点的限制。

install(部署)

文件资源见：https://download.csdn.net/download/qqhanhan/12082916

把文件解压后，直接部署在网站后端即可，因为整套文件只包含js、css等静态文件。

快速上手

比如，我把yellowpenci直接部署在wamp服务器的yellowpencil目录下。并在模板之间下载了一个模板例子，部署在loot-4-Nava文件夹下。

访问链接：http://localhost/yellowpencil/index.html?href=localhost/loot-4-Nava 即可对loot-4-Nava进行编辑。

其中http://localhost/yellowpencil/index.html是整个编辑器的入口网址（需要根据自己的需要进行相应的修改）。localhost/loot-4-Nava是需要编辑css的目标文件。

由于同源安全问题，蛋哥在这个版本暂未对异源网址开放权限。

页面效果

 如何使用生成的css文件

编辑得到到满意效果后，如何使用生成的css。

1. css中 .yp_onscreen删掉；
2. 如果对页面的animation进行了一些编辑操作，除了需要在目标页面中写入上面生成的css，还需要引入上面压缩包中library/css/animate.css 。如上图在css中的L2~L6行是对动画效果的描述。由于它使用了animation-name的自定义的‘“pop”名字，而此animation的描述效果在library/css/animate.css中。

注意

实际操作中需要对选择的element进行点击操作，才会出现右侧的panel内容。此时可以对element进行拖拽调整位置和边距。

详细的操作（举一个例子）

持续更新中。。。[奋斗]