Технология верстки статьи для Infostart

12.08.24

Функциональные - Управление знаниями (Knowledge Base)

Делюсь лайфхаком по верстке статей для ИС. Исходный текст набираю в Obsidian, загружаю картинки списком, конвертирую исходный текст в HTML. Обратный реинжиниринг статьи на ИС в проект на GitHub.

Скачать файл

ВНИМАНИЕ: Файлы из Базы знаний - это исходный код разработки. Это примеры решения задач, шаблоны, заготовки, "строительные материалы" для учетной системы. Файлы ориентированы на специалистов 1С, которые могут разобраться в коде и оптимизировать программу для запуска в базе данных. Гарантии работоспособности нет. Возврата нет. Технической поддержки нет.

Наименование По подписке [?] Купить один файл
Автоматизация верстки статьи для Infostart
.epf 18,16Kb ver:1.0.0.1
0
0 Скачать (1 SM) Купить за 1 850 руб.

Оглавление:


Редактор для исходного текста


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

Традиционные текстовые процессоры, такие как Microsoft Word, значительно упрощают работу с текстом благодаря множеству функциональных возможностей. Однако при преобразовании документов в формат HTML могут возникать различные проблемы: нарушается форматирование, появляются мусорные теги, "якоря" и другие непонятные элементы форматирования. Все эти артефакты требуют дополнительной ручной доводки текста для приемлемого внешнего представления.

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

Одним из удачных решений для меня стал редактор Obsidian, использующий формат Markdown. Такой формат легко интегрируется с системами контроля версий, например, Git, и может редактироваться практически в любом доступном редакторе. Также, Visual Studio с соответствующим плагином является хорошей альтернативой благодаря широкому набору функций для работы с текстом и кодом.

 

Жизненный цикл статьи

Отношение и мотивация авторов к написанию статей варьируются. Одни пишут по вдохновению, другие следуют заранее составленному плану.

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

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

Шаги жизненного цикла статьи:

  1. Формулировка цели
  2. Составление плана
  3. Написание текста и создание иллюстраций
  4. Верстка и публикация
  5. Требуется исправление или обновление?
    1. Переход к 4.
  6. Архивация

 

Верстка

В жизненном цикле разработки наиболее технической задачей является верстка. Автоматизация этого шага является целью представленного процесса обработки.

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

Также возможен обратный реинжиниринг уже опубликованных статей. Для этого требуется использовать внешний сервис для конвертации текста статьи из HTML в формат Markdown. Затем с помощью встроенного процесса обработки выполняется обратная замена ссылок на изображения в локальный формат. Изображения должны быть сохранены в соответствующей папке проекта статьи, например, в директории images.

 

Каталог проекта и работа в Obsidian

Для написания статей предлагаю использовать проектный подход. Проект нужно связать с репозиторием git.

В состав проекта входят:

  • Изображения: images/
  • Файл анонса статьи: Название статьи.md
  • Файл статьи: README.md

Пример каталога проекта статьи "Абстрактные типы, множества, очереди":

abstract-types-doc/
|- .git/
|- images/
|- .gitignore
|- Абстрактные типы, множества, очереди.md
|- README.md
|- layout2is.json

Пример содержимого файла .gitignore:

# IDE
/.metadata/
/.settings/
/.obsidian/

# Binary
bin
InfoBases
tools
examples

При работе в Obsidian можно работать с файлами каталога. На картинке показаны возможные области отображения: каталог проекта, файл анонса, файл статьи, структура статьи.

 

Работа с проектом в Obsidian

Работа с проектом в Obsidian

 

Шаблоны для статьи и README проекта


Для быстрого старта приведу заготовки для статьи и для файла README проектного решения в формате Markdown. В обоих случаях используется файл README.md.

Шаблон для статьи

    <!-- { Область оглавления. Ключевое слово [TOC] используется для вставки автооглавления -->
    ***
    [TOC]
    ***
    <!-- } Область оглавления -->
    <!-- { Область тела статьи -->
    ## Заголовок 1
    ---
    
    ### Заголовок 1.1
    
    <!-- Текст -->
    
    ### Заголовок 2.2
    
    <!-- Текст -->
    
    <!-- } Область тела статьи -->
    
    <!-- { Область описания состава, установки и зависимостей -->
    ## Состав и установка
    
    <!-- Информация о составе решения: метаданные, подсистемы, обработки и т.д. Алгоритм установки решения. -->
    
    ## Зависимости
    
    <!-- Перечислены зависимости, указаны версии БСП, платформы и т.д. -->
    <!-- Ссылка на проект в GitHub -->
    <!-- } Область описания состава, установки и зависимостей -->

Шаблон README для проекта решения

    # Название проекта
    <!-- Область бейджиков -->
    [![OpenYellow](Ссылка на рейтинг) ![Версия](https://img.shields.io/badge/Версия_1С-8.3.24-yellow)
    
    <!-- Анонс -->
    
    <!-- Логотип Infostart и ссылка на статью -->
    [![Название статьи](//infostart.ru/bitrix/templates/sandbox_empty/assets/tpl/abo/img/logo.svg)](Ссылка на статью в ИС)
    
    ## Заголовок 1
    
    <!-- Описание и примеры работы -->
    
    ## Состав и установка
    
    <!-- Информация о составе решения: метаданные, подсистемы, обработки и т.д. Алгоритм установки решения. -->
    
    ## Зависимости
    
    <!-- Перечислены зависимости, указаны версии БСП, платформы и т.д. -->
    

 

Обработка "Верстка в Infostart"


Основной экран

Окно обработки делится на две области: верхнюю, где находится текст в формате Markdown, и нижнюю, где располагается список изображений.

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

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

 

Основной экран

Основной экран

 

Вставка оглавления

Для создания оглавления в тексте используется специальное ключевое слово "TOC", заключённое в квадратные скобки. Точное положение, где будет вставлено оглавление, определяется строкой, содержащей это ключевое слово. В сформированное оглавление включаются все заголовки, которые находятся в последующих строках текста.

[TOC]

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

Каждая строка в оглавлении включает название заголовка и внутреннюю ссылку на соответствующий раздел текста. Формат таких внутренних ссылок довольно прост: только буквы и пробелы, причем пробелы заменяются тире. Подобный формат ссылок поддерживается некоторыми редакторами Markdown. Кроме того, некоторые программы, преобразующие Markdown в HTML, также могут корректно обрабатывать такие внутренние ссылки.

Пример оглавления:

### Оглавление:
- [Введение](#введение)
    - [Работа с множеством](#работа-с-множеством)
        - [Основная задача](#основная-задача)
        - [Множество простых типов](#множество-простых-типов)
        - [Множество составных типов](#множество-составных-типов)
    - [Работа с очередью](#работа-с-очередью)
    - [Вычислитель](#вычислитель)
        - [Постановка задачи](#постановка-задачи)
        - [Топологическая сортировка графа зависимостей](#топологическая-сортировка-графа-зависимостей)
        - [Код "Вычислителя"](#код-вычислителя)
    - [Заключение](#заключение)
- [Поставка](#поставка)
- [Смотрите также](#смотрите-также)

Подписи

По команде "Подписи" в текст будут вставлены строки с наименованием изображений. Они будут располагаться сразу под картинкой. Формат подписи не поддерживается Markdown, однако Markdown вполне корректно позволяет использовать вставки в формате HTML.

Пример вставки подписи:

<p><span style="font-size:9pt; font-family:'Arial'; color:#5b9bd5"><b>Модель расчета без порядка</b></span></p>

Примеры подписей можно посмотреть к изображениям в этой статье.

 

Работа со ссылками на изображения

 

Таблица ссылок на изображения

По команде "Заполнить путь" будет заполнена таблица "Изображения" со списком найденных ссылок. Будут заполнены все ссылки, которые соответствуют формату: ![Наименование](/images/Локальный путь).

Пример ссылки в тексте:

![Модель расчета без порядка](/images/МодельРасчетаБезПорядка.png)

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

 

Сопоставление со ссылками из ИС

В опубликованной статье локальные ссылки на изображения работать не будут. Это связано с тем, что ИС самостоятельно генерирует ссылки на загруженные изображения. Чтобы изображения корректно отображались в статье, необходимо заменить локальные ссылки на ссылки, предоставленные ИС.

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

Для извлечения информации о внутренних ссылках на изображения можно воспользоваться командой обработки "Заполнить путь IS". По команде откроется диалоговое окно, в которое нужно вставить код страницы редактирования статьи. Не обязательно вставлять весь код, достаточно вставить код HTML элементы Изображения. Чтобы скопировать код отдельного элемента можно воспользоваться встроенными в браузер Chrome инструментами разработчика как показано на картинке ниже.

 

Копирование элемента Изображения с помощью DevTools

Копирование элемента Изображения с помощью DevTools

 

Добавление данных из элемента HTML "Изображения"

Добавление данных из элемента HTML "Изображения"

 

Результат вставки HTML элемента "Изображения"

Результат вставки HTML элемента "Изображения"

 

Замена локальных ссылок на ссылки ИС

После того, как локальные ссылки будут сопоставлены с внутренними можно выполнить их замену. Команда "Путь -> Путь IS" выполняет поиск и замену локальных ссылок на внутренние ссылки ИС.

Посмотреть результат замены можно проверить путем поиска ссылки в тексте по команде "Найти в тексте". Если текущая колонка в таблице Изображения "Путь IS", то поиск будет осуществлен по внутренней ссылке, иначе по локальной. Найденная ссылка выделяется в тексте.

Результат замены локальной ссылки на ссылку из ИС

Результат замены локальной ссылка на ссылку из ИС

 

Сохранение и восстановление настроек

По команде "Сохранить настройки" в каталоге проекта будет создан файл настроек layout2is.json . Команда "Восстановить настройки" восстановит настройки, сохраненные в файле ранее.

Конвертация в HTML

Конечный текст можно разместить на веб-сайте в формате HTML. Для преобразования из формата Markdown в HTML существует множество сервисов и библиотек. Важно, чтобы процесс конвертации корректно обрабатывал внутренние ссылки на русском языке.

Один из внешних сервисов, codebeautify.org, достаточно хорошо выполняет конвертацию. Однако стоит отметить, что он использует кодировку percent-encoding для внутренних ссылок на русском. Этот недостаток не влияет на визуальное представление, но затрудняет чтение кода.

В настоящее время я ищу подходящую библиотеку для интеграции процесса конвертации в систему обработки данных. На данный момент найдено решение на Python, но оно требует установленного интерпретатора Python. Подходящее решение на JS дополнительной настройки не потребует.

 

Публикация на сайте

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

Сначала откройте статью для редактирования. Найдите раздел обозначенный как "Основной текст", где будет размещен текст статьи. Далее, для вставки HTML-кода, нажмите кнопку "Источник" в редакторе. Это переключит режим редактирования на текстовый, где можно будет напрямую вставить HTML-код статьи в текстовое поле.

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

 

Вставка HTML в текст публикации на сайте

Вставка HTML в текст публикации на сайте

 

Состав и установка

  • Обработка layout2is.epf

Обработку можно открыть в любой конфигурации или при наличии БСП подключить как дополнительную внешнюю обработку.

 

Зависимости

Проект разрабатывается на EDT и выложен в общий доступ на GitHub. Текущая версия платформы 1С 8.3.24.

Проверено на следующих конфигурациях и релизах:

  • 1С:Библиотека стандартных подсистем, редакция 3.1, релизы 3.1.6.245

Верстка HTML markdown

См. также

Образование Управление знаниями (Knowledge Base) Пользователь Платформа 1С v8.3 Платные (руб)

Решение от фирмы «1С» для создания системы управления электронным и смешанным обучением в коммерческих и образовательных организациях. Решение создано для автоматизации основных бизнес-процессов очного (аудиторного) и дистанционного обучения.

400000 руб.

17.10.2023    1147    2    0    

1

Управление знаниями (Knowledge Base) Бесплатно (free)

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

14.11.2024    481    G_108132826933305236462    1    

2

Управление знаниями (Knowledge Base) Платформа 1С v8.3 Платформа 1C v8.2 Платформа 1С v8.1 Управляемые формы Конфигурации 1cv8 Абонемент ($m)

Данная конфигурация является заготовочной для построения базы знаний в компании на основе платформы 1С. Поддерживаются следующие технологические платформы: - 1С:Предприятие 8.0 (8.0.14.39) - более старые версии должны поддерживаться, но не гарантирую. - 1С Предприятие 8.1 - полная поддержка. - 1С Предприятие 8.2 - 8.2.9 и новее во всех режимах. - 1С Предприятие 8.3 - 8.3.5 и новее во всех режимах компьютерной платформы (мобильная пока не поддерживается).

2 стартмани

29.11.2023    1157    5    user1206119    8    

2

Подготовка к аттестации Управление знаниями (Knowledge Base) Платформа 1С v8.3 Абонемент ($m)

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

1 стартмани

14.09.2023    742    3    Dmitr033    0    

4

Документооборот и делопроизводство (СЭД) Управление знаниями (Knowledge Base) Управляемые формы 1С:Документооборот Россия Абонемент ($m)

Для удобства обучения и проверки знаний пользователей по системе 1С: Документооборот разработана внешняя обработка, представляющая из себя интерактивный тест с вопросами, ответами и подсказками.

3 стартмани

04.07.2023    2520    11    BigBon    3    

3

Управление знаниями (Knowledge Base) 1С:Франчайзи, автоматизация бизнеса Россия Бесплатно (free)

Фирма «1С» — лидер среди отечественных разработчиков ПО. Около 2 миллионов государственных учреждений и компаний различных отраслей работают с ПО фирмы «1С». Именно поэтому растет спрос на специалистов, умеющих работать с 1С. К таким специалистам относятся и аналитики 1С, популярность которых за последний год сильно возросла.

16.05.2023    3898    otkalo    2    

1

Управление знаниями (Knowledge Base) Бесплатно (free)

При организации корпоративной базы знаний нужно определиться со структурой разделов, организовать доступ, перенести старые заметки и замотивировать сотрудников туда писать. О том, как развивать базу знаний в маленькой компании, на конференции Infostart Event 2021 Post-Apocalypse рассказал руководитель «ПрогТехБизнес» Александр Анисков.

09.12.2022    2421    vandalsvq    5    

13
Оставьте свое сообщение