Рубрики
Uncategorized

Реализация инструмента управления документами markdown в PHP

Автор оригинала: David Wong.

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

  1. Showdoc обладает комплексными и простыми функциями, включая функции управления пользователями и разрешениями, уценка поддержка, поддержка экспорта слов, несколько шаблонов документов, поддержка каталогов двухуровневое сворачивание
  2. Конференция, мощная (управление правами, напоминание по электронной почте, полнотекстовый поиск, управление плагинами и т.д.), управление документами тяжелой и зарядной системы
  3. Чванство, нужно написать много комментариев в коде, чтобы соответствовать
  4. Прочитайте мой, с богатыми функциями, похож на конференцию. Его документы сохраняются в формате txt, что позволяет отслеживать изменения и осуществлять полнотекстовый поиск. Однако немного болезненно писать документы, которые подходят для управления отслеживанием задач/ошибок и т. Д
  5. Gitbook, установка nodejs, поддержка уценки, поддержка подключаемых модулей NPM. Складное дерево каталогов слева должно быть установлено с помощью плагинов или плагинов поиска. Каталог представляет собой отдельный файл уценки. Когда я использую его, я чувствую, что компиляция из MD в HTML происходит слишком медленно (для более чем 600 документов компиляция занимает более 25 минут. Если есть плагин для инкрементной компиляции или для повышения скорости компиляции, пожалуйста, дайте мне несколько советов.)

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

основная цель

  1. Может редактироваться несколькими людьми
  2. Можно просмотреть в браузере
  3. Существует каталог, который может быть автоматически расширен и выделен
  4. Поддержка многоуровневых каталогов
  5. Поддержка уценки
  6. Быстро и удобно

Растворитель

  1. Это может быть реализовано путем объединения с git, а также с помощью функции управления правами GIT
  2. Нужно скомпилировать markdown в HTML-файл и развернуть его в Интрасети
  3. Потому что, чтобы просмотреть его в браузере, Наконец, dtree.js (независимо от jQuery) с простым доступом, чистым интерфейсом и отсутствием зависимости Вместо этого PHP используется для создания левого дерева каталогов, а CSS оптимизирован для поддержки отображения на ПК и мобильных устройствах
  4. Эта функция использует алгоритм обхода корневого порядка дерева для реализации чтения многоуровневых файлов (без рекурсии, беспокоясь о записи для обертывания), Dtree.js также поддерживает многоуровневое сворачивание каталогов
  5. Здесь я выбираю Официальный класс инструментов компиляции PHP segmentfault , вместо этого используйте синтаксический анализ (для классов SF проверка безопасности отсутствует, и поддерживается несколько разрывов строк в одной строке)
  6. Быстро: скомпилируйте более 600 файлов, PHP занимает около 1 секунды, приемлемо и поддерживает инкрементную компиляцию; удобно: каталог создается автоматически и его не нужно писать отдельно

Возникшие проблемы:

Инкрементная компиляция

В начале мы решаем, нужно ли скомпилировать MD-файл в HTML, сравнивая время создания и время последнего изменения MD-файла, Однако позже было обнаружено, что некоторые скопированные и переименованные файлы не работали с этим методом. Наконец, промежуточный файл используется для записи времени скомпилированного файла, а затем сравнивает его с max (время создания, время последнего изменения), чтобы определить, нужно ли его компилировать

Удаление избыточных файлов

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

Поддержка многоуровневых каталогов

Сначала я подумал, что иерархические отношения сохранения файлов должны быть спроектированы в соответствии с многоуровневым массивом, а затем каталог должен отображаться в соответствии с массивом. Позже я почувствовал, что это было слишком громоздко, чтобы реализовать многоуровневый каталог Позже, я изменил свое мышление. Фактически, при отображении файлов разных уровней они имеют только разные отступы: значение имени файла больше, чем имя каталога, а отступ нижнего каталога больше, чем у верхнего каталога; Поэтому: Сначала путь ко всем файлам в папке считывается в одномерный массив с помощью алгоритма обхода дерева; Затем пройдитесь по каждому пути к файлу, разделите имя каталога и имя файла, после удаления дублирования используйте метку p для отображения, в соответствии с различными уровнями, увеличьте или уменьшите отступ слева от метки P, чтобы добиться эффекта отступа.;

Эффект складывания и расширения каталога

Если имя каталога хранится в теге P, используйте путь к атрибутивным данным для записи значения хэша текущего пути (MD5 (A/B/C/), Если имя файла хранится в теге P, значение хэша верхнего каталога сохраняется в классе тега P, Таким образом, когда вы щелкаете по имени каталога, вы можете найти все теги P более низкого уровня с помощью метода getelementsbyclass() в соответствии с его хэш-значением, чтобы отобразить или скрыть их

Украсьте HTML и поддержите отзывчивость

Во-первых, используйте атрибут @ media в CSS для использования различных стилей в зависимости от ширины экрана, в том числе, когда ширина экрана превышает 800 пикселей, как на ПК, используйте CSS flex для отображения каталога и содержимого на экране одновременно, когда ширина экрана меньше 800 пикселей, как на мобильном терминале, каталог скрыт по умолчанию. Нажмите плавающую кнопку в правом нижнем углу, чтобы управлять отображением и скрытием каталога, и на экране отобразится скрытый каталог. Сначала установите ширину div каталога на ширину экрана (ширина: 100 вт), а затем с помощью js установите левое поле div каталога на отрицательное значение (боковая панель. Стиль. Поле слева = – окно. Клиент. Ширина) , чтобы скрыть каталог

Ручная компиляция слишком громоздка

Позже я обнаружил, что компилировать вручную было проблематично (компиляция PHP. PHP) в командной строке перед использованием git commit Добавьте хук в git и автоматически выполните команду компиляции перед отправкой, что гораздо удобнее

Наконец, приложите исходный код

Исходный код (code cloud GIT)

Использование (cnblog)

Пример

Эскизный проект