个人签名

281篇博客

编辑推荐

网易数帆开源API网关与容器云项目，让云原生生产落地“多快好

网易汪源：统一负载与多云环境的“开放姿态”，才是云原生

网易数帆如何用 Kubernetes“原语”搞定云原生中间件

快手打新挤爆券商系统，网易数帆推出券商稳定性保障方案

探索智慧校园新模式，网易有数在教育行业的实践分享

金融行业大数据治理之路——数据模型篇

玩转sketch 插件修改篇--[我的代码之旅]

猪小花1号2018-09-13 13:24

作者：马宝

本文适合sketch 重度用户阅览；作为一个小视觉很单纯的动机就是为了改善设计过程中的插件使用体验。

实验一、如何修改Measure 中的导出布局

国人自研的标注神器；超级智能的帮你在作品上添加图形尺寸、距离、颜色和文本属性的附注，方便快捷，而且成品整洁漂亮。导出标注为HTML 好用到心都要碎了

美中不足的是导出的HTML 顶部遮住 60PX高的黑条，预览时非常不方便，要调节画布...自行体会一下不带全频预览是多么的不人性化

不爽改之

解决方案
去掉顶部的黑色bar 遮挡，去除不常用功能，调整CSS 间距，画面更大

体验一下

步骤

1 找到对应plugins 插件目录，右键查看包内容

/Application Support/com.bohemiancoding.sketch3/Plugins/Sketch Measure.sketchplugin/Contents/Sketch/library

2 这里看到的template.html 就是Measure 导出的HTML 模版文件，里面基本上除了一大坨JS之外都看到懂，好在我只需修改HTML 结构，和微调一下CSS样式，将一些不需要的 “DIV”删除，或 display: none;
3 修改HTML代码找到对应文字修改

修改后的代码，很简单只是//注释掉，然再使用网页开发者工具找到对应的css修改掉

render: function () {
    $('#app').html([
        '<header>',
            '<div class="header-left">',
                '<ul class="tab">',
                    '<li class="icon-artboards current" >"artboards"></li>',
                    // '<li class="icon-slices" >"slices"></li>',
                    // '<li class="icon-colors" >"colors"></li>',
                '</ul>',
                '<div id="zoom" class="zoom-widget"></div>',
            '</div>',
                //'<div class="header-center">',
                // '<h1></h1>',
                //'</div>',
        '</header>',
            ...

4 不想体验无所不能的大前端神技可以下载，双击安装体验修改版样式规范导出.sketchplugin.zip

实验二、craft 自定义素材库

强力安利插件不解释

如何充分发挥craft 效能？苦于英语差到离谱，基本功能都是靠“联想”

演示如何自定义素材库，看GIF图

实验三、本土化填充文字内容

craft 也有强大的生成随机内容的功能，但是不接地气全是英文的，做文字占位时不适合，推荐用 Content Generator

我希望的是随机生成的是我自定义的本土化的有文艺气息的文字内容，而不是随机的无意义文字占位

如何高度自定义CG插件？

找到CG.sketchplugin 查看包内容

基本靠猜，我运气好猜得很准，目录结构说明

data       --用来放数据的
Geo
Images     --图模块
js
Numbers    --图模块
Persona
Text          --文本功能模块
manifest.json   --json 配置文件

我猜测插件是把各功能模块独立出来，靠JSON配置文件统一配置管理，首先研究它的结构打开JSON文件找到对应的名称结构化语义

准备一份文字内容，我准备鸡汤类的名人名言 my-text.js,为什么是js不是其它，因为sketch 插件写的是这个格式类型，我懒得改；

一、简单版修改，保留原始结构，我只做了一件事，找到/CG.sketchplugin/Contents/Sketch/data/text／fillerati.js 把JS内容换成中文，，实验成功

二、中度修改，我希望点击的内容事我自定义 my-text.js 非原始js文件，实验成功

@import '../../../js/utility.js'
@import '../../../js/loadText.js'
@import '../../../data/text/my-text.js' --修改的地方

function onRun(context){
    loadText(context, data, '自定义图层名称 text');  --修改的地方
}

三、高阶功能，我希望插件指示的是全中文；

    {
      "script" : "Text/Dummy text/Fillerati/Generate Fillerati.js",
      "handler" : "onRun",
      "shortcut" : "",
      "name" : "Generate Fillerati",
      "identifier" : "text-generate-fillerati"
    },
    {
      "script" : "Text/Dummy text/Fillerati/Replace Fillerati.js",
      "handler" : "onRun",
      "shortcut" : "",
      "name" : "Replace Fillerati",
      "identifier" : "text-replace-fillerati"
    },

    ----我按照他的结构复制了一份修改为我指定的内容-----

    {
      "script" : "Text/mabao/aaa.js",
      "handler" : "onRun",
      "shortcut" : "",
      "name" : "名人名言",
      "identifier" : "text-a"
    },
      {
      "script" : "Text/mabao/bbb.js",
      "handler" : "onRun",
      "shortcut" : "",
      "name" : "段子手",
      "identifier" : "text-b"
    },

    ----第二步，将我指定的内容显示到插件中-----

        {
            "title": "我的文字",
            "items": [
              "text-a", "text-b"   --引用项目  text-a、text-b
            ]
       },