Нещодавно, коли я імпортував довгі пости з X у свій WeChat Official Account, я не міг знайти інструмент форматування, який би мені підійшов. Створивши кілька IP-орієнтованих навичок (Skills) останнім часом, я подумав: чому б не створити для себе інструмент форматування з відтінком ексклюзивності IP?
Спочатку я просто хотів вирішити власні проблеми з форматуванням, але в процесі роботи приходило все більше ідей: чи може колірна схема відповідати IP? Чи можна розмістити персонажів у розділах? Чи можна одночасно обробляти Markdown, TXT, блоки коду та таблиці? Чи можна використовувати його безпосередньо на мобільному?
Оскільки я вже зайшов так далеко, не варто тримати це при собі; я маю дати всім ще один варіант форматування для Official Account. Так народився Punk Weipai.
Ефект, якого я хотів досягти, був простим: помістити дещо неохайний оригінал Markdown ліворуч, натиснути кнопку, і праворуч з'являється стаття WeChat із впорядкованими заголовками, цитатами, блоками коду та зображеннями, що задають ритм.
Вебсайт готовий до використання:
https://weipai.iamadrianpunk.com
Коли ви вперше відкриваєте сайт, ви бачите "лист", надісланий Punk. Підручник для новачків послідовно ознайомить вас із колірними схемами, імпортом чернеток, попереднім переглядом копіювання та фіксованими кінцівками; якщо ви вже знайомі з процесом, можете пропустити його.
1. Спочатку вирішує найдратівливіше
Робочий процес Punk Weipai дуже прямий: помістіть оригінал Markdown або TXT ліворуч, а форматування WeChat генерується в реальному часі праворуч. Підтвердивши ефект, натисніть "Копіювати в Official Account" і вставте у веб-редактор WeChat Official Account.
Вміст, над яким я витратив час на обробку — частини, найбільш схильні до проблем у довгих статтях — включає:
- Заголовки статей, заголовки розділів та підзаголовки;
- Впорядковані списки, невпорядковані списки та багаторівневі вкладені списки;
- Цитати, роздільники, жирний текст та вбудований код;
- Локальні зображення, таблиці та кілька послідовних блоків коду;
- Міжрядкові інтервали, міжрядкові відступи та шрифти, придатні для читання в Official Account.
Якщо чернетка має чіткі рівні заголовків, вона визначатиме розділи на основі розмірів заголовків Markdown. Підзаголовки другого рівня з номерами зберігають їх, а без них використовують товсту вертикальну лінію; загальні пункти використовують суцільні точки, які змінюються відповідно до тематичного кольору.
Блоки коду зберігатимуть панель вікна macOS, а таблиці використовують трилінійні таблиці.
2. Весь процес займає лише три кроки
1. Вставте чернетку
Ви можете вставити Markdown безпосередньо або імпортувати файли .md, .txt або пакети статей із локальними зображеннями. Сторінка відкривається з повнофункціональним прикладом, що включає заголовки, цитати, списки, зображення, таблиці та блоки коду, щоб ви могли одразу побачити, як виглядає кожен синтаксис.
2. Виберіть колірну схему та стиль розділу
Інструмент має попередньо встановлені схеми, такі як Punk Color, Retro Trend, Red-Blue CP та Vitality Orange. Кожна схема включає тематичний колір, акцентний колір та майже білий світлий колір; фон тіла за замовчуванням білий.
Ви також можете завантажити власне зображення IP. Система витягне характерні кольори із зображення та згенерує три схеми: "Колір імені IP 1, 2 та 3." Виберіть найближчу до вашого стилю, а потім продовжуйте точне налаштування.
Color Lab перетворює це на візуальний процес: витягніть характерні кольори з IP, розширте їх до трьох різних схем і, нарешті, залиште чотири колірні ролі, які можна фактично використовувати для форматування.
Після вибору колірної схеми ви можете продовжити налаштування по частинах. Кожен колірний блок може відкрити "Вибір функції", щоб визначити, чи використовується він для фону тіла, заголовків, жирного виділення, оформлення заголовків, роздільників, маркерів списків, блоків коду, таблиць, вбудованого тексту коду, фону вбудованого коду або цитат; один і той самий колір також може виконувати кілька функцій. Наприклад, я дозволяю синєму обробляти заголовки та блоки коду, жовтому — жирний текст, списки та роздільники, а майже білий світлий колір залишаю для цитат і фону вбудованого коду.
Якщо у вас немає IP, ви також можете ввести "Користувацький колір", щоб змінити HEX коди кольорів, назви колірних схем та призначення кольорів. Цей пункт призначений для тих, хто готовий самостійно налаштовувати кольори, і не змушує всіх спочатку завантажувати аватар.
Стилі розділів також можна перемикати безпосередньо. Наразі доступно 9 варіантів: товсте підкреслення, коса риска, ліва вертикальна лінія, рамка, квадратні дужки, подвійні кола, точкова матриця, номер зверху та лапки. Меню спочатку показує фактичний ефект, тому вам не доведеться вгадувати за назвою. Після перемикання розділи всієї статті оновляться разом, не потрібно повертатися до Markdown, щоб змінювати їх один за одним.
Якщо увімкнено "IP розділу", персонаж стоятиме на горизонтальній лінії заголовка для коротких заголовків;
Для довших заголовків, які можуть переноситися, IP автоматично переміститься в центр над заголовком, щоб не захаращувати основний текст.
Колірні схеми, стилі розділів та відображення IP є незалежними і можуть вільно комбінуватися відповідно до вашого вмісту.
3. Попередній перегляд, потім копіювання в Official Account
Область написання та область попереднього перегляду синхронізуються. Коли ви хочете зосередитися на перевірці статті, ви можете відкрити "Фокусний попередній перегляд", щоб залишити лише остаточну чернетку WeChat; його можна використовувати як на комп'ютері, так і на мобільному.
4. Адаптація для мобільних
Для мобільної версії було зроблено окремий набір адаптацій, тому весь процес не вимагає повернення до комп'ютера:
- Інструменти форматування заховані в меню-гамбургер у верхньому правому куті, щоб уникнути горизонтального прокручування та перекриття основного тексту;
- Ширина статті, відступи та методи попереднього перегляду автоматично налаштовуються під екран мобільного.
Таким чином, ви можете виконати весь робочий процес "Імпорт чернетки — Налаштування стилю — Перевірка попереднього перегляду — Копіювання в Official Account" на телефоні. Коли вам потрібно тимчасово змінити статтю, вам не потрібно відкривати комп'ютер лише для форматування.
Нарешті, натисніть "Копіювати в Official Account", щоб вставити повний форматований текст у веб-редактор WeChat Official Account. Заголовки, цитати, списки, таблиці та блоки коду будуть перенесені, не потрібно налаштовувати їх абзац за абзацом.
3. Кілька деталей, які я використовую постійно
Перше — це Фіксована кінцівка.
Вміст, як-от представлення автора, позиціонування акаунту та заклики до підписки, потрібно писати для кожної статті, і його легко пропустити. Тепер ви можете заздалегідь зберегти та ввімкнути фіксовану кінцівку; незалежно від того, чи є цей текст у чернетці, він буде автоматично доданий в кінець відформатованого результату, відокремлений роздільником.
Фіксована кінцівка успадкує шрифт та колірну схему поточної статті. Вміст зберігається в поточному браузері, і його потрібно налаштовувати заново при зміні пристрою.
Друге — це Часткова зміна кольору. Ви можете вибрати автоматичний, чорний, білий або користувацький колір для основного тексту, або безпосередньо вибрати певний фрагмент тексту в попередньому перегляді, щоб змінити лише його колір. Це дуже зручно для виділення команд у посібниках або ключових чисел в оглядах.
Третє — це IP, що слідує за розділами. Після завантаження зображення персонажа ви можете вирішити, чи відображати його поруч із заголовком кожного розділу. Колірні схеми та відображення IP є двома незалежними перемикачами: ви можете використовувати власну колірну схему без показу персонажа або переключитися на рекомендовану колірну схему, зберігши персонажа.
4. Кому це буде корисно?
Якщо ваші статті в основному завершуються в Word, і ви рідко використовуєте код, таблиці або Markdown, цей інструмент може бути не обов'язковим.
Наступні сценарії більш підходять:
- Часте перетворення довгих постів X, нотаток або Markdown у статті WeChat;
- Використання AI для написання чернеток, але небажання переформатовувати в бекенді WeChat;
- Написання посібників з інструментів AI з великою кількістю блоків коду та вбудованого коду;
- Одночасне ведення особистого акаунту, студії або кількох різних IP;
- Бажання підтримувати узгоджений візуальний стиль Official Account без необхідності щоразу налаштовувати формати з нуля.
Punk Weipai наразі зосереджується на форматуванні. Він не переписуватиме за вас статті, а також не має обкладинок, згенерованих AI. Сфера застосування вузька, тому після відкриття сторінки просто вставте чернетку, налаштуйте стиль і скопіюйте для публікації.
5. Ви можете спочатку запустити цей мінімальний робочий процес
При першому використанні не поспішайте вивчати всі налаштування. Дотримуйтесь цих трьох кроків:
- Відкрийте вебсайт і подивіться на попередній перегляд прикладу за замовчуванням праворуч;
- Вставте свій Markdown ліворуч і виберіть готову колірну схему;
- Натисніть "Копіювати в Official Account" і вставте в поле чернетки, щоб перевірити один раз.
Коли цей шлях стане зрозумілим, сміливо завантажуйте свій IP, налаштовуйте коди кольорів, перемикайте стилі розділів і зберігайте фіксовані кінцівки.
Фраза, яку я встановив для цього інструменту:
Нехай кожен якісний контент має гарне оформлення.
Якщо ви теж часто застрягаєте на етапі "стаття готова, але форматування Official Account — ні", ви можете спробувати безпосередньо:
https://weipai.iamadrianpunk.com
Про автора
Punk｜Магістр менеджменту, USTC｜AI Prompts, Посібники для початківців з AI｜Автор навичок серії Punk｜Заробив 8 фігур за 3 місяці｜Навчаюся публічно｜Перегляди статей FDE 2.4 млн｜@AdrianPunk115
