Как настроить портал Docsie с помощью внедрения кода Docsie в Visual Studio Code.
Docsie предлагает множество возможностей для настройки. В этой статье я расскажу о шагах, которые нужно предпринять, чтобы начать персонализацию вашего портала Docsie. Сразу отмечу, что я не профессиональный разработчик или дизайнер, и ваша техническая команда сможет использовать эти инструменты гораздо эффективнее. Это просто пошаговое руководство, которое поможет им начать!
ШАГ 1
Первый шаг — получить строку кода. Найдите свою учетную запись в правом верхнем углу, где расположены три точки, и нажмите на них. Это приведет вас к панели настроек Docsie.
ШАГ 2
Далее нажмите на кнопку «Deployment» (Развертывание) в левой части экрана.
Оказавшись в настройках развертывания, вы получите возможность создать портал знаний через облако Docsie или через сайт вашей компании, используя строку кода, которую можно добавить в HTML и начать процесс стилизации. Для этого просто нажмите «Configure a new deployment +» (Настроить новое развертывание +).
ШАГ 3
Теперь перейдите на вкладку «Custom deployment» (Пользовательское развертывание), введите адрес вашего сайта в поле «Deployment URL» и нажмите «Create web portal» (Создать веб-портал).
После этого прокрутите вниз, найдите свой портал в конце списка порталов и нажмите «Get deployment script» (Получить скрипт развертывания).
ШАГ 4
Теперь скопируйте скрипт и перейдем в Visual Studio Code!
Если вам нужна дополнительная информация о получении кода для встраивания из Docsie, ознакомьтесь с моей статьей о публикации документации с помощью встраиваемого кода здесь.
Создайте в Visual Studio Code файлы index.html, index.css и index.js (если у вас их еще нет). Откройте ваш HTML и вставьте код в тело HTML (под тегом </head>).
ШАГ 5
Теперь создадим «Базовый стиль».
Дополнительную информацию о применении базовых стилей к порталам Docsie можно найти по ссылке https://help.docsie.io/?doc=/publish-documentation-portal/docsie-styling-guide/base-style/
В моем примере я добавил следующее в HTML. Как видите, я добавил ссылку с названием компании и немного изменил стили с помощью CSS.
Мои результаты выглядят довольно просто, но я хотел показать вам потенциал, который ваша техническая команда может использовать для улучшения порталов знаний Docsie и создания порталов, соответствующих стилю вашего бренда. Имейте в виду, что у вас может быть другой стиль и цвета. На практике большинство пользователей добавляют свой логотип со ссылками на свой сайт, панели навигации сверху, чтобы их портал знаний Docsie органично вписывался в дизайн их корпоративных сайтов и соответствовал стилю CSS их текущих ресурсов.
ШАГ 6
Последним шагом я добавил несколько изменений стиля с помощью следующего кода:
<style>
:root {
--docsie-font-family: garamond;
--docsie-font-family-head: inherit;
--docsie-font-family-mono: monospace;
--docsie-hue-primary: 200;
--docsie-hue-gray: var(--docsie-hue-primary);
--docsie-sat-primary: 100%;
--docsie-page-width: 1800px;
--docsie-notice-background: var(--docsie-color-primary-darker);
}
</style>
Я вставил его после последнего div-тега «базового стиля».
Результаты моих простых изменений стиля выглядят так:
Теперь, когда у вас есть все необходимые инструменты, попробуйте сами изменить настройки и создать красивый портал знаний, которым вы будете гордиться! Я уверен на 100%, что ваши порталы знаний будут выглядеть намного лучше, чем мой! :) Так что пробуйте и, главное, получайте удовольствие от процесса!