Confluence как сделать раскрывающийся текст

Как использовать макросы в Confluence, чтобы систематизировать и оформить техническую документацию?

Частая проблема в работе с документацией заключается в том, что команды оформляют и хранят данные как хотят. В тексте рассказываем, как навести порядок и использовать 7 полезных макросов.

Меня зовут Таня Дудо, и я уже 6 лет помогаю людям и командам обмениваться знаниями внутри компаний. Для этого использую Confluence. Да-да, ту самую wiki-систему, которую часто называют неудобной и несовременной. Сегодня выступлю ее адвокатом-обозревателем: расскажу про 7 полезных макросов для систематизации и оформления контента и наглядно покажу, как они работают.

Дисклеймер: с марта Atlassian не продают лицензии в Россию напрямую. Но если у вас уже есть, никто не запрещает ей пользоваться. На сайте Atlassian есть развернутая документация по установке Confluence и Jira. Она охватывает практически все аспекты. Вот, например, одна из статей.

В чем проблема с Confluence или почему я решила написать этот текст

Часто вижу в разных компаниях, что документация в Confluence живет своей жизнью: команды оформляют и хранят данные как хотят, никто сильно не погружается в работу этой системы. Из-за этого она кажется неповоротливой, вызывает раздражение и жаркие споры о том, какой инструмент лучше подойдет для накопления и передачи знаний.

Не буду утверждать, что Confluence — самый лучший в мире инструмент для работы с документацией. Все-таки, это дело привычки, вкуса и корпоративных ограничений. Наоборот, в тексте сосредоточусь на прикладных знаниях о том, как ласково приручить этого непростого зверя и покажу, как документация может преобразиться с использованием конкретных макросов.

Рекомендую к прочтению тем, кто:

• недавно начал с ней работать,
• уже использует и ищет способы сделать работу с Confluence более комфортной.

Что такое макросы и зачем они нужны

Макросы — это программные алгоритмы действий, «упакованные»‎ в понятный графический интерфейс. Если проще, это внутренние инструменты Confluence, которые помогают делать документацию понятнее и удобнее.

Чем макросы круче текстовых редакторов?

Базовая комплектация текстового редактора выполняет простые операции по редактированию. Например, там можно выделить текст жирным или курсивом, изменить цвет символов, выровнять столбцы по середине или по краю.

Макросы эти возможности расширяют: интегрируют контент из внешних источников, помогают настроить навигацию внутри большой базы знаний или сформировать единый тон визуального оформления документации.

В Confluence макросов много — больше 5 тысяч , но я сосредоточусь на трех группах. Это:

• форматирование контента,
• интеграция внутреннего контента,
• интеграция внешнего контента.

Их можно называть «группами быстрого улучшения»‎ — они помогут сделать вашу доку читабельнее всего в пару кликов.

Где находятся макросы

Макросы можно добавить в статью в режиме редактирования. Они прячутся в верхней панели инструментов, за кнопкой с названием «Вставить прочий контент»‎.

Самые популярные макросы — например, «Оглавление»‎ и «Галерея»‎ — лежат в выпадающем меню. Больше возможностей скрываются за строчкой «Другие макросы»‎.

В библиотеке макросы рассортированы по группам. В левой части интерфейса можно сразу перейти к нужной группе.

Если подходящего макроса не нашлось, через кнопку «Найти еще макросы…»‎ можно перейти в Atlassian Market и изучить платные и бесплатные дополнения, совместимые с вашей версией Confluence.

Макросы-блоки и макросы-рамки

Макрос может быть самодостаточным и не требовать вставки чего-то (например, текста, изображений или ссылок) внутри себя. В таком случае он выглядят как блок.

Если для работы макроса что-то нужно поместить внутрь, он выглядит как рамка.

Представьте: вам нужно спрятать под кат какой-то текст. Тогда можно использовать макрос «Раскрыть»‎: внутрь рамки помещаем текст, а после сохранения ок окажется внутри раскрывающегося меню.

Внутрь одного макроса-рамки можно помещать сколько угодно других макросов. Главное, чтобы в пирамиде была логика. Так, например, можно сделать пирамиду из раскрывающихся пунктов, или спрятать содержание статьи, если оно слишком объемное. Или добавить макрос форматирования текста.

Макросы форматирования: подсказка, предупреждение, примечание и блок кода

Зачем нужны:

• делают важные текстовые вставки заметными,
• задают единый тон визуального оформления,
• позволяют вставить код в статью и подсветить синтаксис.

В работе с документацией в разных компаниях я часто замечала одну и ту же деталь: для внутренней продуктовой документации нет единых правил форматирования. В пространствах может быть отлично настроено дерево страниц, для доки созданы отдельные разделы, могут быть даже ключевые вопросы или примерный план-содержание, но внутри тексты разных статей на одну и ту же тему будут отличаться.

Пожалуй, самый распространенный пример разноформатного подхода — это выделение подсказки, предупреждения и примечания.

Наверняка вы видели, как в самом начале текста капслоком написано «ВНИМАНИЕ»‎, и после этого идет абзац красного текста. Или подсказка отмечена звездочкой, а пояснение дано внизу страницы курсивом, как в печатных книгах.

Опасность разного оформления в том, что при беглом прочтении такие акценты могут проскользнуть мимо внимания читателя. А еще к ним будет сложно вернуться и придется перечитывать текст заново.

Как использовать

В Confluence нашли изящное решение: унифицировали макросы «Подсказка»‎, «Предупреждение»‎, «Примечание»‎ и «Информация»‎.

В режиме редактирования они выглядят как макросы-рамки, внутри которых можно разместить текст.

После публикации блоки с выделенной информацией становятся заметнее, и, главное, выглядят однообразно в разных статьях.

Еще один классный макрос, который поможет сделать доку более удобной и читаемой — блок кода. Он не только форматирует текст, но и подсвечивает синтаксис языка, на котором код написан. Кроме того, подходит для размещения небольших отрывков кода внутри статьи. Например, если пишете инструкцию по созданию формы обратной связи.

Макросы для интеграции внутреннего контента

Зачем нужны:

• создают «зеркало»‎ статьи или ее отрывка в другом пространстве,
• поддерживают автообновление: достаточно внести правки в оригинал, и все интеграции обновятся сами,
• помогают быстро перейти из «зеркала»‎ в оригинальную статью и углубиться в нужный материал.

Бывает, что одна статья полезна для нескольких команд. Чтобы не дублировать ее в разных пространствах, можно использовать макросы «Включить выборку»‎ и «Включить страницу»‎.

Выборка — это небольшой отрывок из исходной статьи, а страница — полное «зеркало»‎ всего текста.

Главный профит этого макроса в обновлении: если в исходной статье что-то поменяется, цитата или страница-зеркало изменится вместе с ней. Это намного эффективнее ручного обновления скопипащенного отрывка.

Чтобы включить цитату из одной статьи в другую, нужно:

• перейти в режим редактирования на той странице, где содержится необходимая информация,
• выделить предложение, абзац или несколько абзацев, которые надо процитировать,
• вставить макрос «Выборка»‎.

Выделенный текст окажется внутри рамки макроса. После сохранения страница в режиме просмотра будет выглядеть так, будто ничего не произошло, но мы-то знаем, что внутри нее есть цитата.

Теперь открываем ту статью, которая будет содержать эту цитату и вставляем макрос «Включить выборку»‎. Вуаля — цитата появилась на странице. Если исходный текст цитаты поменяется, он обновится автоматически во всех статьях, где будет включена эта выборка.

Если нужно процитировать статью целиком, то на помощь придет макрос «Включить страницу»‎. Здесь после выбора макроса нужно ввести название статьи, которую будем транслировать на этой странице. Дополнительно включать выборку на исходной не нужно.

Макросы интеграции внешнего контента

Зачем нужны:

• позволяют размещать контент из внешних источников без дополнительных авторизаций,
• можно вставить задачи из Jira и видеть актуальный статус, не переходя в таск трекер,
• взаимодействие с интерактивным виджетом происходит прямо в Confluence.

В Confluence можно интегрировать контент из внешних источников. Это очень выручает, когда не вся документация хранится в одном месте и есть разница в форматах.

Самый простой пример такой внешней интеграции — добавление на страницу задач из Jira.

Представьте: проводите встречу, записываете meeting notes в Confluence и по итогам определяете задачи. Как их записать, чтобы исполнители точно знали, что нужно сделать и к какому сроку? Завести их в таск-трекер, а потом привязать к странице с результатами встречи.

Таски добавляются через макрос «Фильтр\проблема Jira»‎ — достаточно ввести код проекта и номер задачи. В Confluence подтянется ее название и актуальный статус.

Еще один полезный макрос интеграции внешнего контента — «Коннектор виджета»‎. С его помощью на страницу можно добавить любой контент из интернета, будь то видео с YouTube, Google-документ или таблица. Все будет отображаться прямо в Confluence без дополнительных авторизаций.

Например, можно собрать галерею из выступлений коллег. На скриншоте — наша подборка докладов сотрудников Selectel.

Где больше узнать про макросы

У Confluence есть много возможностей для работы с контентом. И этот текст, конечно же, не является исчерпывающим руководством.

Если макросов «базовой комплектации»‎ не хватает, то на помощь придет Atlassian Market. В нем можно выбрать из тысячи решений именно то, которое подойдет под потребности вашего проекта. Среди дополнений есть предложения и самого Atlassian, и сторонних разработчиков, которые делали макросы для себя, а после удачного запуска представили их широкой аудитории.

Больше полезной информации по работе с Confluence можно найти в корпоративном университете Atlassian Univercity или на ютуб-канале Atlassian.

Поле с выпадающим списком

Одним из способов контролировать правильность ввода данных является использование поля с выбором из фиксированного списка:

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

Если поле с выпадающим списком находится в фокусе, содержимое поля выделяется цветом. При выходе из поля выделение цветом пропадает.

С помощью клавиатуры список выбора может быть раскрыт с помощью клавиш [Alt]+вниз. Перемещение по списку происходит с помощью клавиш вверх и вниз, нужный элемент выбирается клавишей [Enter].Нажатие клавиши вниз вместо [Alt]+вниз будет последовательно перебирать возможные значения без раскрытия выпадающего списка, что может быть удобно для небольших списков выбора.

В полях типа «Дата» данная кнопка открывает элемент управления «Календарь», описанный ниже.

• Нет меток

Как создать подвижное оглавление в статье Confluence

В последние пол года я активно работаю с документацией в Confluence — пишу полезные статьи, целью которых является облегчение работы команды тестирования. По ходу дела поняла, что некоторые тексты получаются настолько объёмными, что возникла потребность в структурировании таких массивов, поэтому научилась делать оглавление, которое передвигается рядом с текстом при пролистывании страницы. О том как создать такое оглавление хочу поделиться в своей первой статье для «Хабр».

1. Создание разметки страницы
   
   В первую очередь необходимо определиться где будет находиться оглавление и сделать с помощью инструмента «Разметка страницы», собственно, эту разметку. Вариантов здесь может быть несколько, на мой взгляд, лучше всего подходит такая разметка страницы, где основной массив текста находится слева, а оглавление — справа «Блок с двумя колонками с правой боковой панелью»:

Разметка появится на странице в виде двух блоков, обозначенных пунктирными линиями:

1. Важные нюансы в структуре текста
   
   При заполнении текста в блоке слева важно соблюдать правила:
   1. текст располагать только внутри блока (все символы, которые будут размещены вне этого блока, не попадут в оглавление);
   2. оглавление формируется автоматически с помощью макроса (подключается на самом последнем этапе, об этом ниже), логика этого макроса настроена следующим образом — он триггерится на разный формат текста, например: заголовок (формат текста «Заголовок 3») и подробное описание (формат текста «Абзац»), поэтому важно разбить объёмный массив текста на части, и у каждой такой части сделать заголовок и подробное описание разными форматами текста;
   3. формат текста можно регулировать с помощью раскрывающегося списка «Абзац» на панели инструментов «Confluence» слева:
   4. после того как написан заголовок, необходимо нажать «Enter», таким образом Confluence автоматически отделит заголовок от блока описания, после нажатия «Enter» происходит сброс настроек формата заголовка и блок подробного описания уже строится в формате «Абзац» — эта разница и позволит автоматически сформировать оглавление:
   5. после того как описан первый блок, необходимо вновь нажать «Enter»
      *каждый заголовок и каждый подробный блок описания должен заканчиваться нажатием «Enter» — это и позволит сформировать правильную структуру массива статьи:
2. Создание оглавления
   
   1. Кликнуть по блоку, обозначенному пунктирной линией справа, чтобы в этом блоке появился курсор:
   2. На панели инструментов Confluence выбрать инструмент «+» («Вставить прочий контент») и выбрать строку с макросом «Оглавление»:
   3. В предварительном просмотре уже видно как будет выглядеть оглавление — оно состоит из тех частей текста, к которым применён формат текста «Заголовок 3»:
      
   4. Если нажать на кнопку «Вставить» оглавление появится в блоке справа, но будет статичным, т.е. не будет передвигаться вслед за текстом при пролистывании страницы. Чтобы оглавление стало подвижным, нужно завершить настройки, для этого необходимо пролистать настройки макроса справа до пункта «Имя класса CSS» и ввести в строку значение «floating-block» (без кавычек):
      
   5. После нажатия кнопки «Вставить», подвижное оглавление появилось в блоке справа от статьи:
   6. После нажатия кнопки «Опубликовать», статья сохраняется, оглавление отображается справа от статьи, при этом блоки разделения с пунктирными линиями не отображаются. При клике на любой пункт оглавления, статья автоматически пролистывается до выбранного заголовка:

   

   У раскрывающегося списка с форматами текста «Абзац» есть иерархия значений списка — те значения, которые находятся вверху списка, имеют приоритет над теми, которые находятся под ними. Используя это знание, можно делать многоуровневое оглавление с подпунктами, если внутри одного текстового блока сделать несколько подзаголовков в разных форматах текста:
   

• Подготовка технической документации
• CSS

Конструктор формы

На второй вкладке » Конструктор » происходит настройка структуры формы и ее полей.

В правой части экрана отображаются страницы формы и ее элементы. Работа в конструкторе начинается с создания страницы — нажмите «Добавить страницу»:

В левом столбце показаны типы элементов, которые могут быть добавлены в форму.

Элементы и их описание

Заголовок — текстовый элемент, где вы можете указать основную тему своей формы.

Параграф — текстовый элемент. В нем может быть размещена какая-либо информация, которая должна отображаться в форме.

Короткий текст — текстовое поле, в котором может быть задан вопрос с коротким ответом. Например, имя или фамилия клиента.

Для данного поля может быть задан заголовок, значение по умолчанию, а также можно настроить видимость элемента и валидацию данных.

Email — поле, в котором необходимо указать email.

Для данного поля может быть задан заголовок, значение по умолчанию, а также можно настроить видимость элемента и валидацию данных.

Номер телефона — поле, в котором можно указать номер телефона.

Для данного поля может быть задан заголовок, значение по умолчанию, а также можно настроить видимость элемента и валидацию.

Длинный текст — текстовое поле, в котором может быть задан вопрос с длинным ответом, например, отзыв о продукте или мероприятии.

Для данного поля может быть задан заголовок, значение по умолчанию, а также можно настроить видимость элемента и валидацию данных.

Число — поле, в котором может быть задан вопрос с ответом в виде целого или дробного числа, например, возраст.

Для данного поля может быть задан заголовок, значение по умолчанию, а также можно настроить видимость элемента и валидацию данных.

Да/Нет — поле, в котором может быть задан вопрос с целью получения согласия, например, на получение почтовой рассылки.

Для данного поля может быть задан заголовок, значение по умолчанию, а также можно настроить видимость элемента.

Если вы поставите галочку в поле «Значение по умолчанию«, то в форме по умолчанию будет ответ «да».

Один вариант — поле, в котором может быть предложено выбрать один из нескольких вариантов ответа. Например, цвет товара — красный или синий.

Для данного поля может быть задан заголовок, варианты ответов, а также можно настроить видимость элемента и валидацию данных.

Нажмите на кнопку «Добавить вариант» и введите значение. Количество вариантов не ограничено.

Вы можете разрешить пользователю ввести свой вариант ответа, нажав на кнопку «Разрешить свой вариант«.

Элемент позволяет выбрать несколько вариантов ответа из предложенных. С помощью кнопки «Добавить вариант» добавьте возможные ответы.

Элемент можно сделать обязательным, а также ограничить количество выбираемых вариантов:

Выпадающий список — поле, в котором пользователю надо выбрать один вариант из выпадающего списка.

Для данного поля необходимо задать заголовок и варианты ответов. Нажмите на кнопку «Добавить вариант» и введите значение. Количество вариантов не ограничено.

Вы можете разрешить пользователю ввести свой вариант ответа, нажав на кнопку «Разрешить свой вариант«. При выборе этого варианта откроется поле для текста.

Кроме того, есть возможность подставить первый вариант ответа в поле, нажав на соответствующую кнопку.

Также можно настроить видимость элемента и валидацию данных.

Если вы хотите предоставить пользователю возможность выбрать несколько вариантов ответа, кликните «Добавить множественный выбор«.

Обратите внимания, что при множественном выборе появляется новый тип валидации — «Ограничить количество выбираемых вариантов«.

Дата — поле, в котором предлагается указать дату, например, день рождения клиента.

Для данного поля может быть задан заголовок, а также можно настроить видимость элемента и валидацию данных.

Файл — поле, в котором к форме могут быть прикреплены файлы, например, фото. Максимальный размер файла – 20 мб.

Для данного поля может быть задан заголовок, а также можно настроить видимость элемента и валидацию данных.

Диапазон — диапазон выбора оценки. Для данного поля может быть задан заголовок, а также можно настроить видимость элемента и валидацию данных.

Кроме того, вы можете выбрать тип диапазона: в виде звезд или в виде чисел.

Вы также можете указать количество элементов (например, 5 звезд или 10 чисел).

Если в качестве типа диапазона вы выбираете числа, то обратите внимание, что отсчет начинается с 0.

Вы можете перетаскивать элементы формы, без особого труда располагая их в том порядке, который вам нужен. При наведении на элемент в верхней части появляется скопление точек. Наведите на них курсор, зажмите левую кнопку мыши и перетащите элемент, куда пожелаете.

Условие

Вы можете показывать некоторые элементы в зависимости от того, какой ответ пользователь дал на предыдущий вопрос. Для этого при настройке элемента нажмите на кнопку «Добавить условие» — откроются дополнительные поля (При каких условиях показывать следующее скрытое поле).

Укажите условие и значение, которое должен выбрать пользователь.

Далее добавьте элемент, который хотите показать, если пользователь выберет определенное значение в вопросе выше. Активируйте опцию «Скрытый элемент формы«:

Теперь если пользователь выбрал определенный вариант ответа, для него будет показан скрытый элемент. В противном случае, он перейдет сразу к следующему вопросу.

Для добавления более сложных условий, например, переход между страницами формы в зависимости от ответов, настройте блок «Логика».

Валидация полей формы

У большинства полей доступен один или несколько типов валидации:

Проверить наличие в базе данных

Валидация через перечень телефонных кодов

(перечислите через символ «+» телефонные коды, которые разрешено указывать в форме)

Ограничить количество выбираемых элементов

(укажите минимальное и максимальное количество элементов, которые может выбрать пользователь)

Типы валидации «Проверить наличие в базе данных» и «Проверить наличие подписки» позволяют вам ограничивать отправку формы для некоторых пользователей. Например, вы можете разрешить отправку только зарегистрированным пользователям или запретить повторную отправку формы одним и тем же пользователем.

Проверить наличие в базе данных

В момент отправки формы платформа проверит, существует ли профиль человека, заполнившего форму, в базе данных.

При настройке формы необходимо выбрать:

• статус, который вы хотите проверять (существует или не существует),
• базу данных, в которой следует искать профиль,
• конкретное поле в базе данных.

Проверить наличие подписки

В момент отправки формы платформа проверит, подписан ли профиль, заполнивший форму, на определенный ресурс.

При настройке формы необходимо выбрать:

• статус, который вы хотите проверять (подписан, существует, не подписан),
• ресурс, подписку на который следует искать

Комментарий

Для каждого элемента можно добавить комментарий, который будет отображаться под полем формы.