Как хакнуть Sketch Content Generator для использования вашего контента

Мой самый часто используемый плагин для Sketch, Content Generator от Тимура Карпеева, является и одним из моих любимых. Он экономит мне уйму времени, когда необходимо наполнить дизайн в Sketch контентом. Но все же данные в Sketch Content Generator не настоящие, и иногда это не позволяет конкретно показать, как должен выглядеть конечный результат. Так что я решил покопаться в самом плагине и найти способ заменить данные настоящими. Вы убедитесь, что на деле все проще, чем кажется, и вы сможете использовать любые данные, какие только хотите. Перед тем, как мы начнем: используйте данные решения на свой страх и риск, и обязательно делайте резервную копию плагина перед любыми изменениями! Скачайте последнюю версию плагина. В Sketch 3.5 есть баг, который не позволит вам загружать изображения, так что если у вас более старая версия плагина, в начале нужно обновиться.

Итак, сначала нужно найти папку Sketch Plugins.

Перейдите в Plugins в панели инструментов > и из дропдауна кликните на ‘Manage Plugins…’. Manage plugins… В диалоговом окне кликните на иконку настроек в левом нижнем углу и затем выберите Show Plugins Folder. Show Plugins folder Откроется поисковик и отобразит все ваши плагины, включая Sketch Content Generator. Перейдите в папку Sketch Content Generator, в ней нужно найти папку ‘data’. В папке ‘data’ вы найдете данные (изображения и текст), используемые в плагине: имена, фотографии, персональные данные и так далее. Папка с данными в плагине контент-генератора

Скажем, вы хотите заменить картинки в папке ‘Music Artists’ новыми.

Вы получаете все изображения, кликая здесь. Просто перейдите на data > photos > music и заменяете, добавляете или удаляете изображения из папки: Затем перезапустите Sketch, и автоматически подтянутся новые фото в ‘Music Artists’.

Создайте вашу собственную папку с вашим собственным контентом.

Давайте в качестве примера возьмем Spotify и хакнем плагин, чтобы использовать его контент. В папке Sketch Content Generator создайте новую папку ‘Spotify’. (Причина, по которой она помещена в корень - более легкий доступ в Sketch). Создайте папку ‘Spotify’ Итак, мы создали папку. Spotify обычно состоит из:

• song titles (текст)
• artist names (текст)
• artist photos (изображения)
• album covers (изображения)

Как вы можете видеть в скобках, названия песен - это текст. Так что мы будем использовать один из выводов текста в плагине Sketch Content Generator. Вернитесь в корневую папку (где вы создали папку ‘Spotify’) и разместите там папку Persona (как мы знаем, в ней есть что-то, что генерирует вывод текста): Скопируйте и вставьте: Email.sketchplugin (который генерирует текст likerandom@emailaddress.com) в папку Spotify, созданную ранее и переименуйте файл на Songtitles.sketchplugin. Теперь правой кнопкой кликните на файл Songtitles.sketchplugin и откройте его в текстовом редакторе: Окей, конкретно songtitles.sketchplugin делает импорт набора файлов javascript, который может выводить данные из файла emails.js в папку с данными. Когда вы кликаете на ‘Email’ в плагине генератора контента в Sketch, он проходится по этому коду и заполняет имейл адресами из файла data/persona/email.js. Все, что вам теперь нужно, - заменить текст в строке 3 и 5: Как вы видите в строке 3, нужно создать папку spotify в папке data с файлом внутри под названием songtitles.js, чтобы при клике на songtitles в контент-генераторе, он знал, откуда брать названия песен. Снова перейдите в папку data и создайте папку spotify, как показано ниже: Создайте папку ‘spotify’ в папке data. Теперь нам нужно только поместить какие-то данные в эту папку. Перейдите в persona в папке data и скопируйте/вставьте файл emails.js в папку spotify, которую вы только что создали и переименуйте его на songtitles.js. Отлично, теперь все просто. Откройте файл songtitles.js в текстовом редакторе, и получится что-то вроде этого: Всюду электронная почта, естественно. Это все данные, которые Sketch выводит рандомно. Удалите все кроме data = [] и начните добавлять названия папок (или любой другой текст, который вам нужно) и не забудьте о запятых). Сохраните изменения. Теперь, если вы откроете заново Sketch, увидите новый пункт меню в плагине контент-генератора под названием ‘Spotify’, и там вы сможете сделать следующее: Почти также можно сделать и с картинками. Скажем, мы хотим добавить обложки альбомов в наш новый пункт меню Spotify. Просто скопируйте/вставьте Music artist.sketchplugin из папки Photos (как мы знаем, Music Artists генерирует изображения) в папку Spotify и переименуйте его в Album covers.sketchplugin. Скопируйте/вставьте Music artists.sketchplugin в папку Spotify и переименуйте ее. Редактируйте файл album covers.sketchplugin

1. Измените строку 4 на: loadImages(‘data/spotify/albumcovers/’, ‘album covers’)
2. Создайте папку в data > spotify под названием ‘albumcovers’ и скопируйте-вставьте изображения в эту папку, как показано ниже:

3. В sketch у вас появится опция “Album covers”. Ухты, здорово!

Перевод статьи Peter Assentorp