Вики или модуль Обучения? Ведем и настраиваем базу знаний для разработчиков

Антон Долганин 3 Марта 2015 13:20 9073

Вроде бы несравнимые вещи? Но если посмотреть внимательнее на задачу, то в разрезе Битрикс модуль Обучения гораздо круче (привет и спасибо Роберту Басырову).

Собственно, какая задача встала. Наконец-то вести базу знаний для разработчиков проекта. Какие классы допиливались, как устроена база данных, и прочее. Казалось бы, Вики — идеальный вариант (слева дерево категорий, справа контент). Ну, естественно, если у вас сайт на Битрикс, и редакция позволяет. Но нет, модуль Обучения оказался более удобен и быстроразворачиваем, чтобы не тратить время еще и на разработку самой базы знаний.

Итак, что было сделано, чтобы получить озвученный функционал.

1. Просто установил модуль Обучение, при установке приказав установить публичную часть.

2. Установил бесплатные дополнительные шаблоны модуля. Не знаю, мне темный более по душе.

По сути, на этом все, можно создать курс, и дальше работать в публичной части, оперируя только уроками и главами:

В виз.редакторе также предусмотрены стили для удобной вставки определенных блоков:

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

Возможные классы, предусмотренные шаблоном: warning, note, tip, hint. (вставлять заместо hint на скрине, по названиям понятно, что они значат)

Код оформляется через pre class="syntax":

Ну и последний штрих. Подсветка кода. Воспользуемся тем же, чем Битрикс пользуется в своей базе знаний. Скриптом highlightjs.

Открываем шаблон обучения сайта и в самый конец вставляем такой код:

      <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/default.min.css">
      <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
      <script type="text/javascript">
         BX.ready(function(){
            hljs.configure({tabReplace: '    '});
            hljs.initHighlightingOnLoad();
            var elements = BX.findChildren(document, {tag: 'pre'}, true);
            if (elements != null)
            {
               for (var j = 0; j < elements.length; j++)
               {
                  hljs.highlightBlock(elements[j]);
               }
            }
         });
      </script>

Живой пример описанного вы можете видеть здесь.

Файлы:

styles.css (1.18 КБ)

Комментариев: 6