Egret社区

Egret Wing插件Demo之主题制作

2016-4-14 11:52
745214

回帖奖励 75 银子回复本帖可获得 5 银子奖励! 每人限 1 次(中奖概率 50%)

注:在学习本教程钱,请仔细学习【Egret Wing插件开发入门】。
什么是主题?如下图:

我们可以根据个人的喜好选择不同的主题。那么今天我就跟大家一起学习如何制作一款属于自己的主题。
一、创建插件


首先打开Wing创建名称为MarkdownTheme的主题插件
当然因为插件模板是从国外的npm远程下载的可能会有些慢,也有可能创建不成功(重试即可),我们会继续优化业务逻辑。
二、创建项目成功


三、首先我们先修改package.json文件


1、修改插件名称、描述2、修改分类为theme"categories": [    "Themes"  ],
3、删除触发事件,因为不需要出发都会集中到这里
在主题中选择需要的主题即可。

4、修改激活点类型为themes<pre><code>"contributes": {    "themes": [        {            "label": "Markdown Editor",            "uiTheme": "vs",            "path": "./themes/Markdown.tmTheme"        }    ]},</code></pre>
这个时候我们命名的主题文件名称为Markdown Editor,稍后生成的主题文件名称就是他
四、新建主题文件1、我们打开这个网站
我们发现他是一个可以在线编辑主题文件的网站。如图右下角我们选择JavaScript文件格式。
2、修改配置文件
我们修改comment也就是注释的字体颜色为红色,右侧会动态的更改为红色,以此类推,其它的关键字也可以修改颜色或者背景色。
3、修改编辑器配置
我们可以修改编辑器背景颜色、前景色、选中色等等配置,并且是实时预览的。
4、我们修改主题信息
比如主题名称叫做:Markdown
5、保存后下载即可五、在插件项目文件夹下新建themes文件夹
将生成的文件复制到themes下即可

六、调试主题插件1、点击调试按钮或者F5调试2、打开一个js文件
3、选择主题中的Markdown Editer插件4、查看主题是否生效七、打包项目1、使用按钮打包
2、或者使用命令行打包
八、本地安装调试
将打包的wext文件拖入到Wing中就可以安装插件。同时在命令行extension中显示插件也可以卸载。
九、提交插件

在当前插件界面提交插件的时候,会自动补充内容。
十、更新插件
如果你的插件需要更新的话就点击插件商城的右上角用户名,就可以看到你的插件有个编辑作品的按钮,点击编辑更新信息即可。
总结:虽然看起来图片很多,但是其实很简单,大家可以发挥自己的创造力,打造属于自己的主题!!!
有问题在官方群@dily或者@张晨
官方群:469310443
插件大赛:传送门


分享到 :
0 人收藏

14 个回复

倒序浏览
xsstomy  斑竹 | 2016-4-14 19:36:19
好教程
smxy  初窥堂奥 | 2016-4-15 08:58:35
顶一个
smxy  初窥堂奥 | 2016-4-15 08:58:56
银子不足,再顶一个

回帖奖励 +5 银子

cfcf  初窥堂奥 | 2016-4-15 11:02:50
牛x
sxtaosdo  自成一派 | 2016-4-15 13:38:55
好功能
sxtaosdo  自成一派 | 2016-4-15 13:39:15
好功能
sxtaosdo  自成一派 | 2016-4-15 13:39:31
好功能
为什么不给我积分
sxtaosdo  自成一派 | 2016-4-15 13:40:10
好功能,要给分

回帖奖励 +5 银子

瑞雪_Ruixuese  渐入佳境 | 2016-8-12 11:55:21
不错不错
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号 )

Powered by Discuz! X3.4 © 2001-2019 Comsenz Inc.

返回顶部