Инструкция по запуску Apps Script скрипта для вёрстки статей в HTML из Google Docs

• Описание
• Документация

Как запустить скрипт в документе Google Docs ¶

1. Открыть документ в Google Docs;

2. В меню «Расширения» → выбрать пункт «Apps Script»:

   

3. В открывшийся редактор скопировать всё содержимое скрипта и настроить параметры;

   Менять название проекта совершенно не обязательно.

4. Нажать на иконку сохранения и после → «Выполнить»:

   

   Apps Script сам выберет и запустит функцию ConvertGoogleDocToCleanHtml().

5. Пройти все этапы подтверждения;

6. Получить письмо на почту с ZIP-архивом.

   

Шаг № 5: «пройти все этапы подтверждения» в Google Docs ¶

Этот шаг самый многоступенчатый и важный. Хочется как-то наглядно показать этот пункт, чтобы было на что ссылаться.

1. После клика на «Выполнить» в окне «Требуется авторизация», где нужно выбрать кнопку «Проверить разрешения»:

   

2. Выбор аккаунта:

   

3. Далее, поскольку «приложение» неизвестное, то, например, Google Chrome будет пугать окном безопасности:

   

   В нём нужно выбрать «Дополнительные настройки» и в раскрывшимся тексте нажать на серую ссылку «Перейти на страницу „Проект без названия“ (небезопасно)»:

   

4. Далее нужно получить доступ к почте, куда будет отправлен результат с архивом:

   

5. И подтвердить права доступа из двух галочек и нажать «Продолжить»:

   

6. После этого скрипт сделает свою работу и отправить письмо с результатом на почту вашего аккаунта:

   

Что настроить ¶

После копирования кода скрипта в редактор внутри Apps Script можно настроить переменные в его начале, выглядит это так:

// URL вашего сайта (без последнего слеша!)
const BLOG_URL = "https://your-site.com";

// Глобальный alt-атрибут для картинок
const GLOBAL_ALT = "Изображение из статьи";

// Префикс для имен файлов картинок
const IMAGE_PREFIX = "image_";

// Дата для папки загрузок (формат: год/месяц)
const UPLOADS_DATE = (() => {/* тут функция для формирования даты */});

Рекомендуется UPLOADS_DATE указывать как полный slug поста, а GLOBAL_ALT, как полный заголовок (title) поста.

Для настройки базового пути к картинкам в WordPress, если вы используете конвертер не для WordPress, то переменную UPLOADS_DATE можно отредактировать блок формирования разметки картинок и их href и src:

// Создаем HTML разметку для изображения
output.push(`
  <a 
    class="link-image"
    href="${BLOG_URL}/wp-content/uploads/${UPLOADS_DATE}/${name}"
  >
    <img 
      src="${BLOG_URL}/wp-content/uploads/${UPLOADS_DATE}/${name}" 
      alt="${GLOBAL_ALT}" 
      width="${width}" 
      height="${height}" 
      draggable="false" 
    />
  </a>
`);

Стилизация и CSS-классы ¶

В разметке есть несколько элементов с базовыми CSS-классами.

Картинки-ссылки ¶

Все картинки-ссылки имеют класс link-image:

<a 
  href="/wp-content/uploads/2025/08/image_2.png" 
  class="link-image"
>
  <img 
    src="/wp-content/uploads/2025/08/image_2.png" 
    alt="Изображение из статьи" 
    width="601" 
    height="497" 
    draggable="false"
  />
</a>

Таблицы ¶

Каждая таблица будет обёрнута в <div class="table-responsive">, а на самом теге <table> будет класс table:

<div class="table-responsive">
   <table class="table">
      <thead>
         <tr>
            <th scope="col">...</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>...</td>
         </tr>
      </tbody>
   </table>
</div>

Оглавление ¶

Оглавление формируется под спойлером через тег details и вложенный список ul и имеет в итоге такую разметку и классы для применения стилей:

<details class="table-of-contents">
    <summary>Оглавление</summary>
    <ul>
      <li><a class="pseudolink" href='#id'>Заголовок</a></li>
    </ul>
</details>

Известные проблемы и их решения ¶

Ошибка The JavaScript runtime exited unexpectedly из-за тяжёлых картинок в исходном документе ¶

Если размер отдельной картинки в самом документе >≈2Мб, то скрипт не будет работать из-за ограничений Apps Script. Нужно сжать картинку и заменить.

Понять где и какие самые тяжёлые картинки можно через стандартный путь «Файл» → «Сохранить как» → «Веб-страница (HTML, ZIP-архив)» и посмотреть в содержимое архива.

История изменений — Changelog ¶

30 июля 2025 ¶

• Для числа месяца в src для картинок по файловой структуре WordPress добавлен ведущий 0

25 июля 2025 ¶

• Не выводит теги <u> в разметке

11 ноября 2024 ¶

• Добавляет формирование оглавление в спойлере через <details>

28 октября 2024 ¶

• Добавляет формирование таблиц

22 октября 2024 ¶

• Добавляет разметку для картинок-ссылок