docsify this
v1.9.16: Merge pull request #161 from hibbitts-design
Это веб-приложение с открытым исходным кодом, созданное с помощью Magical Document Docsify, позволяет публиковать онлайн-файлы разметки в качестве веб-страниц без настройки собственного веб-сайта.
Посмотрите, что DocSify-Это может сделать, просмотрев этот файл README в качестве веб-страницы с дополнительной боковой панелью, которая включает заголовки до 4 уровней!
Рисунок 1. Docsify-This.net Web Page Builder.
Вы пробовали Docsify-это? Поделитесь своими отзывами о Docsify-это
Docsify-это обеспечивает простой способ отображения и обмена контентом разметки в различных контекстах, без необходимости настройки веб-сайта или процесса сборки. Разделяя свои файлы Markdown на GitHub или Codeberg, вы также можете использовать управление версиями (возможность отслеживать и обратить обратное изменения) и включить сотрудничество.
С Docsify-это вы можете:
Docsify-Это настраиваемый сайт DocSify Open Publishing Starter Kit, настроенный для отображения файлов удаленной маркировки с помощью параметров URL в следующем формате:
https://docsify-this.net?basePath=URLpath&homepage=filename.md
Параметр BasePath DocSify - это путь URL, содержащий файл разметки необработанного исходного источника для рендеринга. Если файл назван ожидаемым по умолчанию readme.md , то другой параметр не требуется, в противном случае параметр DocSify HomePage также должен быть включен также установлен на имя файла для рендеринга. Примером DocSify-This URL будет: https://docsify-this.net/?basepath=https://raw.githubusercontent.com/hibbitts-design/docsify-his-one-page-article/main&homepage=home.md
Docsify-Это может рендеринг файлов из любого места, где можно просматривать содержимое файла разметки в веб-браузере, включая:
Чтобы непосредственно отобразить файл, хранящийся в репозитории публичного GitHub, если не использовать приведенный выше Builder Web Page, вам необходимо использовать URL -адрес необработанного источника этого файла (IE RAW.GithubuserContent.com), нажав кнопку RAW при просмотре файла. Также можно отобрать файл, хранящийся в частном репозитории GitHub, активируя страницы GitHub в этом репозитории, а затем используя URL -адрес страниц GitHub этого файла (то есть username.github.io).
Появление визуализированных файлов разметки может быть настроено по необязательным параметрам URL и небольшим набором доступных классов CSS в файлах исходной маркировки. В дополнение к поддержке стандартной отметки, включены диаграммы Enced.ly, H5P, LaTex и русалки. Необязательно, аннотация страницы с гипотетами. Можно включить.
Ищете общее введение в публикацию с Docsify-это? Проверьте Markdown Publishing с DocSify-This.
Я поражен тем, что вы вкладываете (файл разметки) в Docsify-это, а затем вы получите URL обратно на веб-страницу ... сделано! Возьмите URL и уходите. Это так бесшовно.
-J. Groom, Reclaim Today Episode 39 (соучредитель, Reclaim Hosting)
Я использовал Docsify-это для моего выпускника, отчасти для изучения новых моделей в издательстве Markdown, но отчасти также для приручия Canvas, что я считаю неловким и громоздким. Держать все примечания моего курса в виде простых текстовых файлов и развертывание их через GitHub и Docsify-это легко и делает разработку моего курса. Кроме того, я держу все свои материалы на местном уровне и могу использовать их повторное использование, не полагаясь на холст.
- Дж. Максвелл (директор и доцент в программе издательства в Университете Саймона Фрейзер)
Лучший инструмент, который я нашел за последние годы - это одно из тех творений, которое только что сделано правильно, вплоть до глубины души.
- Д. Малави (координатор междисциплинарной лаборатории, Техасский университет A & M)
Docsify-Это значительно улучшило мои темы WordPress, будучи способным плавно встроить в интерфейс ту же документацию, которую я использую в репозитории GitHub. Это, в свою очередь, заставило меня написать лучшие документы! Я едва поцарапал поверхность того, что DocSify-это может сделать как простой в использовании инструмент веб-публикации.
- A. Levine Aka Cogdog (независимый образовательный технолог)
Docsify-Это было признано финалистом в категории открытой инфраструктуры для премии «Открытое образование» 2024 года за выдающиеся достижения-благодарим всех Docsify.js.org, а также участники, а также для других издателей, преподавателей и создателей, которые делятся своим открытым контентом с остальным миром через Docsify-this.
Визуальный внешний вид онлайн-файла разметки, отображаемого в качестве веб-страницы Docsify-это может быть изменено двумя способами:
Например, для отображения файла разметки, расположенного по адресу https://raw.githubusercontent.com/hibbitts-design/docsify-this-one-try-article/main/home.md с боковой панелью docsify, включая заголовки до 3 уровней, Docsify-This url-это: docsify, включая заголовки до 3 уровней, Docsify-This url::
https://docsify-this.net/?basePath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-one-page-article/main&homepage=home.md&sidebar=true&maxLevel=3И вот как Docsify-this.net отображает тот же URL:
Веб-страница, отображаемая Docsify-this.net, показывающая файл разметки с боковой панелью, которая включает заголовки до 3 уровней, как указано в URL DocSify-IT.
Узнайте больше о каждом из основных параметров DocSify-этих URL-адресов ниже, и выясните, что возможно при объединении параметров URL и онлайн-файлов разметки с помощью набора готовых к использованию шаблонов разметки.
Основные параметры URL (включены в стандартный строитель веб -страницы)
Установите пользовательский заголовок на вкладке браузера для ваших веб-страниц с помощью необязательного параметра Tab-Tab-Tab , например:
https://docsify-this.net?basepath=https://raw.githubusercontent.com/paulhibbitts/demo-grav-open-matter-course-hub/master/pages/04.resources&homepage=page.md---master/pages/04.resources&shomepage Страница "будет" My%20 страниц ".
Отобразить ссылку «Изменить эту страницу» (расположение по умолчанию находится внизу страницы) с дополнительным параметром редактирования Link , например:
https://docsify-this.net?basepath=https://raw.githubusercontent.com/hibbitts-design/docsify-open-course-starte r-kit/main & edit-link = https: //github.com/hibbitts-design/docsify-open-publishing-starter-kit/blob/main/readme.md
Измените текст по умолчанию для ссылки «Редактировать эту страницу» с необязательным параметром редактирования-линк-текста , например:
https://docsify-this.net?basepath=https://raw.githubusercontent.com/hibbitts-design/docsify-open-course-starter-kit/main&edit-li nk = https: //github.com/hibbitts-design/docsify-open-publishing-starter-kit/blob/main/readme.md&edit-link-text=view%20as%20markdown Обратите внимание, чтобы использовать текст с пробелами, которые они должны быть закодированы, поэтому «представление как отметка» будет «просмотреть%20AS%20markdown».
Измените местоположение ссылки «Изменить эту страницу» с нижней части страниц на верхнюю часть страниц с необязательным параметром «Редактировать лак» , например:
https://docsify-this.net?basepath=https://raw.githubusercontent.com/hibbitts-design/docsify-open-course-starter-kit/main&toc = true & edit-link = https: //github.com/hibbitts-design/docsify-open-publishing-starter-kit/blob/main/readme.md&edit-link-top=true
Установите пользовательский шрифт для ваших веб-страниц с помощью дополнительного параметра Font-Family , например:
https://docsify-this.net?basepath=https://raw.githubusercontent.com/hibbitts-design/docsify-open-course-starter-kit/main/docs&homepage=resources.md&font-family=helvetica, rails-srifsources.md&font-family=helvetica, Этот параметр может быть особенно ценным при попытке лучше соответствовать визуальному представлению встроенного контента с вашей платформой назначения. Обратите внимание, чтобы использовать шрифты с пробелами в их именах, которые они должны быть закодированы, поэтому «курьер -новый» будет «курьер%20new».
Установите пользовательский размер шрифта для ваших веб-страниц с помощью дополнительного параметра размера шрифта , например:
https://docsify-this.net?basepath=https://raw.githubusercontent.com/hibbitts-design/docsify-open-course-starter-kit/main/docs&homepage=resources.md&font-Size=1. Этот параметр может быть особенно ценным при попытке лучше соответствовать визуальному представлению встроенного контента с вашей платформой назначения. Обратите внимание, что размер шрифта установлен в единицах REM.
Установите пользовательский вес шрифта заголовка (по умолчанию 400 - регулярно) для ваших веб -страниц с помощью дополнительного параметра заголовка , например:
https://docsify-this.net?basepath=https://raw.githubusercontent.com/hibbitts-design/docsify-open-course-starter-kit/main/docs&homepage=resources.md&header-weight=600.
Скрыть кредиты, обычно показанные в нижней части каждой отображаемой DocSify-эта страница с необязательным параметром с прямыми криками , например:
https://docsify-this.net?basepath=https://raw.githubusercontent.com/hibbitts-design/docsify-open-course-starter-kit/main/docs&homepage=resources.md&hide-credits=true.
Включить аннотацию страницы с гипотевыми .
https://docsify-this.net?basepath=https://raw.githubusercontent.com/hibbitts-design/docsify-open-course-starter-kit/main/docs&homepage=resources.md&hypeshesis=true.
Установите пользовательскую высоту строки для ваших веб-страниц с помощью необязательного параметра высоты линии , например:
https://docsify-this.net?basepath=https://raw.githubusercontent.com/hibbitts-design/docsify-open-course-starter-kit/main/docs&homepage=resources.md&line-height=1.5.
Установите пользовательский цвет для всех ссылок, определяемый с использованием стандартного шестнадцатеричного формата без символа '#' с необязательным параметром Clink-Color , например:
https://docsify-this.net?basepath=https://raw.githubusercontent.com/hibbitts-design/docsify-open-course-starter-kit/main/docs&homepage=resources.md&link-clor=cc000000.
Установите максимальный уровень заголовка боковой панели DocSify с дополнительным параметром MaxLevel DocSify, например:
https://docsify-this.net?basepath=https://raw.githubusercontent.com/hibbitts-design/docsify-open-publishing-starter-kit/main/docs&homepage=introduction.md&sidebar=true&maxlevel=3
Отобразить боковую панель DocSify с дополнительным параметром боковой панели , например:
https://docsify-this.net?basepath=https://raw.githubusercontent.com/hibbitts-design/docsify-open-course-starter-kit/main&sidebar=true
Отображение таблицы таблицы страниц с помощью дополнительного параметра TOC , например:
https://docsify-this.net?basepath=https://raw.githubusercontent.com/hibbitts-design/docsify-open-publishing-starter-kit/main/docs&homepage=introduction.md&toc=true
Установите уровни заголовка страницы (т.е. H1, H2 и т. Д.), Чтобы быть включенным в содержимое страницы с дополнительным параметром TOC-заголовков , например:
https://docsify-this.net?basepath=https://raw.githubusercontent.com/hibbitts-design/docsify-open-publishing-starter-kit/main/docs&homepage=introduction.md&toc=true&toc-shipings=h1,h2,h3.
Используйте менее широкую таблицу страниц с дополнительным параметром TOC-Narrow , например:
https://docsify-this.net?basepath=https://raw.githubusercontent.com/hibbitts-design/docsify-open-publishing-starter-kit/main/docs&homepage=introduction.md&toc-narrow=true. Этот параметр может быть особенно ценным при внедрении контента, где вероятность меньшей области экрана.
Включите увеличение изображения (нажатие на изображения на страницах, чтобы увеличить их) с помощью дополнительного параметра DOCSIFY Zoom-Images , например:
https://docsify-this.net?basepath=https://raw.githubusercontent.com/paulhibbitts/docsify-this-markdown-content-demo/main&zoom-images=true. Чтобы исключить изображения, используйте  .
Следующие дополнительные параметры URL доступны для использования в Docsify-этих URL-адресах и включены в Advanced Web Page Builder, если не указано иное.
Дополнительные параметры URL (включены в Advanced Web Page Builder)
Отобразите DocSify пользовательскую покрыпу с необязательным параметром покрытия , например:
https://docsify-this.net?basepath=https://raw.githubusercontent.com/hibbitts-design/docsify-open-publishing-starter-kit/main/docs&homepage=home.md&coverpage=_coverpage.md
Установите пользовательский цвет для покрытия с необязательным параметром Cover Page-Color , например:
https://docsify-this.net?basepath=https://raw.githubusercontent.com/hibbitts-design/docsify-open-publishing-starter-kit/main/docs&homepage=home.md&coverpage=_coverpage.md&coverpage-colage-colage-colage-colage-colage-colage-colage-colage-colage-colage=home.md&coverpage=_coverpage.md&coverpage=home.md&coverpage
Установите пользовательский цвет для покрытия в режиме Dark с помощью дополнительного параметра Cover Page-Dark-Dark , например:
https://docsify-this.net?basepath=https://raw.githubusercontent.com/hibbitts-design/docsify-open-publishing-starter-kit/main/docs&homepage=home .md & Dark-Mode = true & link-color = cc0000 & link-color-dark-mode = ff9e9e & coverpage = _coverpage.md & coverpage-color = cc0000 & coverpage-color-dark-mode = 4d0000
Например, автоматически переключать свет/темную тему на основе предпочтения на уровне ОС:
https://docsify-this.net?basepath=https://raw.githubusercontent.com/hibbitts-design/docsify-open-publishing-starter-kit/main/docs&homepage=introduction.md&dark-mode=true
Измените эмодзи по умолчанию для ссылки «Изменить эту страницу» с параметром параметра редактирования-линк-эмоджи (не включенная в Advanced Web Page Builder), например:
https://docsify-this.net?basepath=https://raw.githubusercontent.com/hibbitts-design/docsify-open-course-starter-kit/main&edit-link=https://git hub.com/hibbitts-design/docsify-open-publishing-starter-kit/blob/main/readme.md&edit-link-text=view%20on%20github&edit-link-emoji=:file_folder:
Включите ленивую загрузку изображений браузерами с дополнительным параметром Lazy-Load-Images (не включенным в Advanced Web Page Builder), например:
https://docsify-this.net?basepath=https://raw.githubusercontent.com/hibbitts-design/docsify-open-publishing-starter-kit/main/docs&homepage=introduction.md&lazy-impreage-matrue. боковая панель DocSify и т. Д.
Установите пользовательский цвет для всех ссылок в темном режиме, определяемый с использованием стандартного шестнадцатеричного формата без символа '#' с необязательным параметром режима линга-цвета-темнота , например:
https://docsify-this.net?basepath=https://raw.githubusercontent.com/hibbitts-design/docsify-open-course-starter-kit/main/docs&homepage=resources.md&link-lorter=cc0000&dark-mode=true&link-cleor--modem.-modem.-modem.-modem.-modem.-modembers-cleors-cleors-cleors-cleors.mdks.-modem.-modepreorces.md.
Установите пользовательский цвет парящего для всех ссылок, определяемый с использованием стандартного шестнадцатеричного формата без символа «#» с необязательным параметром цвета связи , например:
https://docsify-this.net?basepath=https://raw.githubusercontent.com/hibbitts-design/docsify-open-course-starter-kit/main/docs&homepage=resources.md&link-hover-clor=cc0000.
Установите пользовательский цвет накаплива для всех ссылок в темном режиме, определяемый с использованием стандартного шестнадцатеричного формата без символа «#» с необязательным параметром в режиме «Соединение-темнот» , например:
https://docsify-this.net?basepath=https://raw.githubusercontent.com/hibbitts-design/docsify-open-course-sta rter-kit/main/docs & homepage = resources.md & link-color = cc0000 & dark-mode = true &-hover-hover-dark-mode = ff9e9e.
Установите пользовательское текстовое украшение для всех ссылок, например, с необязательным параметром по разработке текстового текста :
https://docsify-this.net?basepath=https://raw.githubusercontent.com/hibbitts-design/docsify-open-course-starter-kit/main/docs&homepage=resources.md&link-text-decoration=none
Установите пользовательское оформление текста Hover для всех ссылок, например, параметром Hover-Text-Text-Text-Decoration , например:
https://docsify-this.net?basepath=https://raw.githubusercontent.com/hibbitts-design/docsify-open-course-starter-kit/main/docs&homepage=resources.md&link-text-decoration-hover-honderline
Вы можете установить пользовательский Favicon из файла изображения, передаваемого из необязательного параметра LoadFavicon , например:
https://docsify-this.net?basepath=https://raw.githubusercontent.com/paulhibbitts/docsify-this-markdown-content-demo/main&loadfavicon=open-access.png
Загрузите нижний файл docsify из файла Markdown в текущем каталоге, пройденном с помощью дополнительного параметра DocSify DocSify LoadFooter , например: https://docsify-this.net?basepath=https://raw.githubusercontent.com/hibbitts-design/docsify-open-publishing-starter-kit/main/docs&homepage=introduction.md&gulter=_footer.md
Загрузите DocSify Custom Navbar из файла Markdown, переданного с помощью необязательного параметра DocSify DocSify LoadNavbar , например:
https://docsify-this.net?basepath=https://raw.githubusercontent.com/hibbitts-design/docsify-open-publishing-starter-kit/main/docs&homepage=introduction.md&luplishnavbar=_navbar.md
Загрузите DocSify Custom Sidebar из файла Markdown, пройденного с помощью необязательного параметра DocSify DocSify, например:
https://docsify-this.net/?basepath=https://raw.githubusercontent.com/paulhibbitts/docsify-this-cmpt-363-222-site/main&homepage=home.md&sidebar=true&gulitybar=_sidebar-home.md.md
Отобразить изображение логотипа для веб -сайта в пользовательской боковой панели DocSify (IE File 'Logo.png) с помощью дополнительного параметра DocSify Logosify , например:
https://docsify-this.net/?basepath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-multiple-page-course- site/main & homepage = home.md & sidebar = true & loadsidebar = _sidebar.md & loadnavbar = _navbar.md & name = cpt-363 & logo =/images/logo.png Полный путь папки и имя файла должны быть предоставлены. Название веб -сайта также должно быть предоставлено и будет использоваться в качестве альт -текста для логотипа.
Объедините элементы Navbar в верхнюю часть боковой панели на небольших экранах с дополнительным параметром Mergenavbar DocSify, например: https://docsify-this.net/?basepath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-multiple-page-cours e-site/main & homepage = home.md & sidebar = true & loadsidebar = _sidebar.md & loadnavbar = _navbar.md & mergenavbar = true & name = cpt-363
Отобразить имя для веб -сайта в пользовательской боковой панели DocSify (IE File '_SideBar.md) с помощью дополнительного параметра DocSify, например:
https://docsify-this.net/?basepath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-multiple-page-co urse-site/main & homepage = home.md & sidebar = true & loadsidebar = _sidebar.md & loadnavbar = _navbar.md & search = true & name = cpt-363 Когда этот параметр будет предоставлен, он также будет автоматически использован в качестве заголовка вкладки браузера.
Установите заголовок страницы пользовательского страницы в верхней части ваших веб-страниц с помощью дополнительного параметра страниц , например:
https://docsify-this.net?basepath=https://raw.githubusercontent.com/paulhibbitts/demo-grav-open-matter-course-hub/master/pages/04.resources&homepage=page.md&page-title/pages/04.resources&shomepage Будь "мой%20 страниц".
Отображать кнопки страниц в области содержимого страницы (например, на заказ на пользовательскую боковую панель) с помощью дополнительного параметра страниц , например:
https://docsify-this.net?basepath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-multiple-page-cour se-site/main & homepage = home.md & sidebar = true & loadsidebar = _sidebar.md & loadnavbar = _navbar.md & search = true & pagination = true
Включите плагин DocSify Search (который в настоящее время включает в себя совпадения для текста и разметки) на нескольких сайтах страниц, включая пользовательскую боковую панель с необязательным параметром DocSify Searchbox , например:
https://docsify-this.net?basepath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-multiple-pag E-Course-Site/Main & HomePage = home.md & sidebar = true & loadsidebar = _sidebar.md & loadnavbar = _navbar.md & searchbox = true
Установите максимальные уровни заголовка с огламлкой в DocSify Пользовательская боковая панель (то есть файл '_sidebar.md) с необязательным параметром DOCSIFY подводной линии , например:
https://docsify-this.net/?basepath=https://raw.githubusercontent.com/paulhibbitts/docsify-this-cmpt-363-222-site/main&homepage=home.md&sidebar=true&gulitybar=_sidebar-with.mdele.mdle---
Используйте версию SVG Awesome Awesome Icons вместо веб-шрифтов с необязательным параметром SVG-ICons (не включенным в Advanced Web Page Builder), например:
https://v2.preview.docsify-this.net/?basepath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-lms-content-pages/main&homepage=schedule.md&vg-icons=true
Встраивать контент в холст
Пример кода IFRAME, включая параметры URL для беспрепятственного сопоставления DocSify-этот контент с холстом:
< p > < iframe style =" overflow: hidden; border: 0px #ffffff none; background: #ffffff; " src =" https://docsify-this.net?basePath=https://raw.githubusercontent.com/paulhibbitts/cmpt-363-222-pages/main&homepage=home.md&font-family=Lato%20Extended,Lato,Helvetica%20Neue,Helvetica,Arial,sans-serif&font-size=1&hide-credits=true " width =" 800px " height =" 1400px " allowfullscreen =" allowfullscreen " > </ iframe > </ p >Если присутствует полоса прокрутки, вы можете переоценить свой код iframe и настроить значение «высота».
Как добавить внешний URL в качестве элемента модуля?
Пример внешней ссылки модуля с таблицей таблицы страниц:
https://docsify-this.net?basePath=https://raw.githubusercontent.com/paulhibbitts/cmpt-363/main/docs/222&homepage=week-02.md&toc-narrow=true&font-family=Lato%20Extended,Lato,Helvetica%20Neue,Helvetica,Arial,sans-serif&font-size=1&hide-credits=true Создание пользовательской ссылки в навигации вашего курса с помощью инструмента перенаправления
Перепроведите пример поля URL:
https://docsify-this.net/?basePath=https://raw.githubusercontent.com/paulhibbitts/cmpt-363-222-pages/main&homepage=resources.md&edit-link=https://github.com/paulhibbitts/cmpt-363-222-pages/blob/main/resources.md&font-family=Lato%20Extended,Lato,Helvetica%20Neue,Helvetica,Arial,sans-serif&font-size=1&hide-credits=trueiframe (для внедрения содержания в страницы)
Внешний инструмент (для добавления ссылки на навигацию или элементы курса)
Хотя все, что вам нужно, чтобы начать с Docsify-это базовый файл разметки, ниже приведены некоторые шаблоны, которые вы можете использовать, которые показывают, что возможно с помощью Markdown, изображений, параметров URL и даже нескольких фрагментов HTML!
Чтобы использовать эти шаблоны, вы обычно делаете следующие (специфичные для шаблона инструкции включены в каждый шаблон):
Войдите в GitHub или создайте учетную запись, если у вас ее еще нет.
Нажмите, используйте этот шаблон в выбранном репозитории шаблона (кнопка верхней правой зелени), а затем выберите «Создать новый репозиторий»
Выберите имя для вашего нового репозитория, чтобы сдержать файлы, а затем нажмите «Создать репозиторий» , чтобы скопировать файлы шаблона в свою учетную запись GitHub
Посмотрите включенный файл Markdown, например home.md и скопируйте его URL.
Перейдите по адресу https://docsify-this.net и вставьте копированный URL в поле URL-адреса Markdown
Выберите нужные параметры страницы (например, DocSify Sidebar) и нажмите кнопку «Опубликовать как веб -страница», чтобы просмотреть свой файл разметки в качестве веб -страницы для обмена или внедрения
Чтобы отредактировать файл в GitHub, нажмите значок карандаша (редактирование файла) в правом верхнем направлении при просмотре файла, внесите изменения, а затем нажмите кнопку «Изменения в коммите» , чтобы сохранить эти изменения.
Один страница статья home.md-файл, отображаемый Docsify-это как:
Файл курса на одну страницу home.md, отображаемый Docsify-это как:
Файл с несколькими страницами сайта home.md, включая использование Markdown CSS Class header-image-full-width , отображаемая DocSify-Это как:
Несколько страниц Открыть сайт публикации home.md, включая использование пользовательского файла DocSify пользовательской боковой панели, отображаемого DocSify-Это как:
Файл курса с несколькими страницами home.md, включая использование пользовательского файла боковой панели Docsify и DocSify пользовательский файл NAVBAR, отображаемый DocSify-Это как:
Примеры страниц, включая использование параметров URL-адреса font-family , font-size и hide-credits для бесшовного контента, встраиваемого в LMS LMS, как показано DocSify-Это:
Посмотреть пример сайта Canvas LMS с использованием DocSify- Это содержание по адресу https://canvas.sfu.ca/courses/76692.
Docsify-This.net открыть и совместный рабочий процесс с использованием файлов github markdown.
Docsify-this.net Рабочий процесс с использованием файлов webserver markdown.
При использовании DocSify-этих для отображения файлов разметки, расположенных в сервисах на основе GIT, таких как GitHub или Codeberg, вы можете загрузить файлы (клон) на свой рабочий стол для локального редактирования, а затем загрузить (push), обратно в онлайн-файлы.
Например, чтобы отредактировать файлы Mathub Markdown на своем рабочем столе, вы сделаете следующее:
Узнайте больше о начале работы с настольным компьютером GitHub.
Следующие классы CSS доступны при создании собственного контента разметки.
< div class =" accordion " >
< details >
< summary > Topic One </ summary >
Topic one details here.
</ details >
< details >
< summary > Topic Two </ summary >
Topic two details here.
</ details >
</ div > < span class =' badge ' > Tue Jun 12th 11:59pm PDT </ span > < span class =' badge ' style =' --badge-bg-color: #0164db; ' > Tue Jun 12th 11:59pm PDT </ span > < span class =' badge ' style =' --badge-bg-color: #e7c500; --badge-text-color: #000; ' > Tue Jun 12th 11:59pm PDT </ span > < span class =' badge ' > [Tue May 16 2:30pm PT](https://www.timeanddate.com/worldclock/fixedtime.html?msg=CMPT-363+Blackboard+Mini-lectures+and+Activities&iso=20220516T1430&p1=256&ah=1&am=50) </ span > Обрезается до высоты 250px на больших экранах, 125px на небольших экранах.
![ UX - User Experience ] ( images/12650723674_d5c85af332_k.jpg ' :class=banner-image ') Обрезается до высоты 350 пикселей на больших экранах, 175px на небольших экранах.
![ UX - User Experience ] ( images/12650723674_d5c85af332_k.jpg ' :class=banner-tall-image ') [ Required Reading Quiz due Jun 4th ] ( https://canvas.sfu.ca/courses/44038/quizzes/166553 ' :class=button ') [ : fa fa-download fa-fw : Download ] ( https://creativecommons.org/wp-content/uploads/2019/02/ccheart_black.svg_.zip ' :class=button ') < a class =" button " href =" https://creativecommons.org/wp-content/uploads/2019/02/ccheart_black.svg_.zip " target =" _blank " > < i class =" fa fa-download fa-fw " > </ i > Download </ a > [ Required Reading Quiz due Jun 4th ] ( https://canvas.sfu.ca/courses/44038/quizzes/166553 ' :class=button-rounded ') [ : fa fa-download fa-fw : Download ] ( https://creativecommons.org/wp-content/uploads/2019/02/ccheart_black.svg_.zip ' :class=button-rounded ') < a class =" button-rounded " href =" https://creativecommons.org/wp-content/uploads/2019/02/ccheart_black.svg_.zip " target =" _blank " > < i class =" fa fa-download fa-fw " > </ i > Download </ a > [ Required Reading Quiz due Jun 4th ] ( https://canvas.sfu.ca/courses/44038/quizzes/166553 ' :class=button-secondary ') [ : fa fa-download fa-fw : Download ] ( https://creativecommons.org/wp-content/uploads/2019/02/ccheart_black.svg_.zip ' :class=button ') < a class =" button-secondary " href =" https://creativecommons.org/wp-content/uploads/2019/02/ccheart_black.svg_.zip " target =" _blank " > < i class =" fa fa-download fa-fw " > </ i > Download </ a > [ Required Reading Quiz due Jun 4th ] ( https://canvas.sfu.ca/courses/44038/quizzes/166553 ' :class=button-secondary-rounded ') [ : fa fa-download fa-fw : Download ] ( https://creativecommons.org/wp-content/uploads/2019/02/ccheart_black.svg_.zip ' :class=button-secondary-rounded ') < a class =" button-secondary-rounded " href =" https://creativecommons.org/wp-content/uploads/2019/02/ccheart_black.svg_.zip " target =" _blank " > < i class =" fa fa-download fa-fw " > </ i > Download </ a > Для предварительных просмотров статьи, встроенных слайдов/видео и т. Д.
< a class =" embedly-card " data-card-controls =" 0 " data-card-align =" left " href =" https://blog.prototypr.io/defining-usability-e7bf42e8abd0 " > Defining usability </ a > Предлагаемая ширина 1200px до 2000px.
![ Photo of Mountain ] ( images/mountain.jpg ' :class=header-image-fade ') Предлагаемая ширина от 1200 пикселей до 2000px, а также отображение содержимого не доступно.
![ Photo of Mountain ] ( images/mountain.jpg ' :class=header-image-fade-full-width ') Предлагаемый размер от 1200 пикселей до ширины до 2000 % и высоты от 400 пикселей до 600 пикселей и отображение содержимого недоступно.
![ Photo of Mountain ] ( images/mountain.jpg ' :class=header-image ') Масштабные изображения до %.
![ Photo of Mountain ] ( images/mountain.jpg ' :class=image-75 ') Масштабные изображения с границей до %.
![ Photo of Mountain ] ( images/mountain.jpg ' :class=image-75-border ') ![ Photo of Mountain ] ( images/mountain.jpg ' :class=image-border ') ![ Photo of Mountain ] ( images/mountain.jpg ' :class=image-border-rounded ') [ GitHub ] ( https://github.com/hibbitts-design/docsify-this ' :class=navpill ') [ : fab fa-github fa-fw : GitHub ] ( https://github.com/hibbitts-design/docsify-this ' :class=navpill ') < a class =" navpill " href =" https://github.com " target =" _blank " > < i class =" fab fa-github fa-fw " > </ i > GitHub </ a > Сделайте необработанные HTML -изображения, которые включают в себя размерные размеры.
< img src =" https://raw.githubusercontent.com/hibbitts-design/publishing-with-docsify-this/main/images/docsify-this-web-page-builder.jpg " width =" 910 " height =" 682 " class =" responsive image-border " alt =" Docsify-This Web Page Builder " > < div class =" row " >
< div class =" column " >
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</ div >
< div class =" column " >
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</ div >
</ div > < div class =" row reverse-columns " >
< div class =" column " >
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</ div >
< div class =" column " >
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</ div >
</ div > < div class =" row " >
< div class =" column " >
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</ div >
< div class =" column-right " >
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</ div >
</ div > < div class =" video-container-4by3 " > < div class =" video-container-16by9 " > < iframe width =" 560 " height =" 315 " src =" https://www.youtube.com/embed/lJIrF4YjHfQ " > </ iframe > </ div > Автоматически добавлено ко всем iframes с исходными доменами «youtube.com» или «docs.google.com».
< div class =" video-container-16by9 " > < iframe width =" 560 " height =" 315 " src =" https://www.youtube.com/embed/lJIrF4YjHfQ " > </ iframe > </ div > В дополнение к классам Markdown CSS, поддерживаемым DocSify-This, вы также можете определить свои собственные классы в ваших отображаемых файлах разметки, например:
CSS в файле Markdown:
<style >
. markdown-section . mybutton , . markdown-section . mybutton : hover {
cursor : pointer;
color : # CC0000 ;
height : auto;
display : inline-block;
border : 2 px solid # CC0000 ;
border-radius : 4 rem ;
margin : 2 px 0 px 2 px 0 px ;
padding : 8 px 18 px 8 px 18 px ;
line-height : 1.2 rem ;
background-color : white;
font-family : -apple-system , "Segoe UI" , "Helvetica Neue" , sans-serif;
font-weight : bold;
text-decoration : none;
}
< / style >Markdown:
[ Required Reading Quiz due Jun 4th ] ( https://canvas.sfu.ca/courses/44038/quizzes/166553 ' :class=mybutton ') Docsify-Это было разработано для быстрого и легко отображения одного или нескольких дистанционно размещенных файлов разметки. Для большей настройки рендеринга файлов и для обеспечения последовательной доступности, даже если экземпляр Public Docsify-This.net больше не был доступен, вы можете размещать свой собственный экземпляр Docsify-This.
To host your own instance on GitHub Pages, which also supports the option of a custom domain, fork or clone the Docsify-This repository to your GitHub account. Then, enable GitHub Pages using the /docs folder.
You can also have an instance of Docsify-This run on Codeberg such as https://docsify-this.codeberg.page by creating a new repository called pages , then choosing paulhibbitts/docsify-this-app in the template dropdown menu, choosing the Git Content (Default Branch) option and then tapping the Create Repository button.
Alternatively, you can upload the files in the Docsify-This /docs folder into a newly created Codeberg repository and then manually enable Codeberg Pages. An example Docsify-This instance running on Codeberg is available at https://codeberg.org/paulhibbitts/docsify-this-app, which uses a Branch renamed to pages .
If you want to run Docsify-This on your own Websever, create a destination folder on your server and then copy the files within the Docsify-This folder /docs to your newly created server folder. You could also use this docs folder as a custom domain root.
A more future-friendly setup would be to fork the Docsify-This repository (to support getting upstream updates) and use a GitHub Action such as FTP-Deploy to deploy all changed repository files to a webserver.
You can limit the domains which remote files can be rendered from by locating the line var allowedDomains = ''; within the index.html file and include your list of allowed domains separated by commas, for example var allowedDomains = 'codeberg.org,raw.githubusercontent.com,hibbittsdesign.org'; Полем
If you want to further customize and control the presentation of your Markdown content, especially when rendering multiple page sites, you can install your own Docsify Open Publishing Starter Kit (that this hosted web app is based on) and store all Markdown files within that site. You can learn more about the capabilities of Docsify itself at Docsify.js.org.
Looking for some help with getting a Docsify custom-This instance up and running for your organization? Paul provides a range of professional services related to Docsify-This - contact him to learn more.
The display of Font Awesome Free icons within Markdown content is supported with the following format:
: fas fa-home fa-fw :
The above Markdown is equivalent to the HTML markup <i class="fas fa-home fa-fw" aria-hidden="true"></i> .
When using the above shortcode for Font Awesome icons, it is assumed to be for decorative purposes, and so for improved accessibility an aria-hidden="true" attribute is automatically added to the icon. For semantic purposes, it is recommended you refer to the Font Awesome Icons and Accessibility guidelines.
The following style prefixes are available with Docsify-This:
GitHub Training Manual Working Locally with Git Markdown file, displayed by Docsify-This as a:
Easy Markdown to Github Pages linked set of Markdown files, displayed by Docsify-This as:
A Collection of GitHub Markdown files used as course content within an SFU CMPT-363 Canvas LMS site.
A Collection of GitHub Markdown files with inline CSS used as a multiple page SFU CMPT-363 course site with SFU visual branding and the Docsify Search plugin enabled, multiple page SFU CMPT-363 course site with SFU visual branding and website logo, and an example single Markdown file with default visual styling for embeddeding.
GitHub Markdown Content Demo file, displayed by Docsify-This as a Web Page with 'Edit this Page' link using the new GitHub.dev web editor (currently in Beta).
GitHub Markdown Content Demo file, displayed by Docsify-This as a Web Page with 'View raw Markdown' link.
Codeberg Markdown Content Demo file, displayed by Docsify-This as a Web Page with 'View raw Markdown' link.
GitHub's LaTeX Support Examples Markdown file, displayed by Docsify-This as a Web Page with an 'Edit this Page' link.
Mermaid-Docsify Example GitHub Markdown file, displayed by Docsify-This as a Web Page with an 'Edit this Page' link.
Docsify-This Multi-language Site Template, displayed by Docsify-This as a:
Docsify-This Simple Visual Portfolio Template (based on Notion Portfolio Template), displayed by Docsify-This as a:
Docsify-This Visual Portfolio Template (based on Notion Portfolio Template), displayed by Docsify-This as a:
A simple Markdown Student Portfolio Starter Template (based on Markdown Student Portfolio Template by Justin Thoreson) which is viewable on both GitHub and with Docsify-This.net, displayed by Docsify-This as:
Introduction to Docsify–This
Introductory, beginner to intermediate.
An introduction of Markdown publishing using the open source project Docsify–This.
Self-Publishing with Docsify–This
Intermediate, with a mix of basic and advanced aspects.
An overview to self-publishing with Markdown using the open source project Docsify–This, with a focus on digital literacy.
Use a page inspector to identify the font family and font size used in the platform you are embedding Docsify-This content in, and then pass that font family using the font-family (encoded, where spaces are replaced with '%20') and font-size (REM units) URL parameters to Docsify-This. For example, to match fonts with the Canvas LMS:
https://docsify-this.net?basePath=https://raw.githubusercontent.com/paulhibbitts/cmpt-363-222-pages/main&homepage=topics.md&font-family=Lato%20Extended,Lato,Helvetica%20Neue,Helvetica,Arial,sans-serif&font-size=1
If you want to include a Page Table of Contents with embedded Docsify-This content, but the destination platform screen area is not very wide, you might want to try the optional toc-narrow display option. For example, to use a narrower Table of Contents area that includes a smaller screen breakpoint: https://docsify-this.net?basePath=https://raw.githubusercontent.com/paulhibbitts/cmpt-363/main/docs/222&homepage=week-01.md&toc-narrow=true
Using Prismjs code blocks with syntax highlighting is supported for the languages included with Docsify and as well Bash, Go, Java, Kotlin, PHP, Python and Swift. To embed a code block use the Markdown standard of triple backticks and start the block with the name of the language, for example to embed a block of Javascript code with syntax highlight the following would be used:
```javascript
function test() {
console.log("Hello world!");
}
`` `
Which would then appear as:
function test ( ) {
console . log ( "Hello world!" ) ;
} The content of external Markdown files can be embedded into Docisfy-This web pages with the following:
[ included Markdown from same source location ] ( example.md ' :include ') [ included Markdown from URL ] ( https://raw.githubusercontent.com/paulhibbitts/Markdown-File-Tests/main/itworks.md ' :include ')For additional examples of including external content, view Docsify Embeded Files.
WikiLinks format for links and images are supported, as also found in the desktop editor Obsidian and other platforms.
The display of AsciiDoc files ('.adoc' extension) via DownDoc is possible by manually passing the relevant filenames within a Docsify-This URL (not available in the Docisfy-This.net Web Page Builder), for example: https://docsify-this.net/?basePath=https://raw.githubusercontent.com/asciidoctor/asciidoctor-pdf/main/examples&homepage=basic-example.adoc&edit-link=https://github.com/asciidoctor/asciidoctor-pdf/blob/main/examples/basic-example.adoc
You can support the display of AsciiDoc files in the Web Page Builder of your own instance of Docsify-This by locating the function getAllowedFileExtensions() within the index.html file and add the file extension '.adoc' to the return statement, for example return ".md,.adoc"; Полем
The display of HedgeDoc files containing basic Markdown (as well as Mermaid and MathJax elements) is possible by manually using 'download' for the homepage URL parameter within a Docsify-This URL (not available in the Docisfy-This.net Web Page Builder), for example: https://docsify-this.net/?basePath=https://demo.hedgedoc.org/crN3ispNQdejWkUXXIXYQA&homepage=download
Here is an additional example, using the HedgeDoc file https://demo.hedgedoc.org/oisWMy9ZS36PE6TvYhJC4A?both (seen in split-screen view) and and rendered as a web page by Docsify-This https://docsify-this.net/?basePath=https://demo.hedgedoc.org&homepage=oisWMy9ZS36PE6TvYhJC4A/download&edit-link=https://demo.hedgedoc.org/oisWMy9ZS36PE6TvYhJC4A?both&toc=true&edit-link-text=Edit%20this%20Page%20in%20HedgeDoc
You can support HedgeDoc URLs (eg https://demo.hedgedoc.org/ip4SRxZYTEKa6JHr62XTiA) in the Web Page Builder of your own instance of Docsify-This by locating the line var hedgedocInstances = ''; within the index.html file and include your HedgeDoc instances separated by commas, for example var hedgedocInstances = 'demo.hedgedoc.org'; Полем Try out a demo instance of Docsify-This with support for demo.hedgedoc.org files at https://hibbitts-design.github.io/hedgedoc-docsify-this.
You can use camel case instead of hyphens for the names of Docsify-This URL parameters if prefered. Например, https://docsify-this.net?basePath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-one-page-article/main&homepage= home.md&toc=true&toc-headings=h2,h3&edit-link=https://github.com/hibbitts-design/docsify-this-one-page-article/blob/main/home.md и https://docsify-this.net?basePath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-one-page-article/main&homepage =home.md&toc=true&tocHeadings=h2,h3&editLink=https://github.com/hibbitts-design/docsify-this-one-page-article/blob/main/home.md are equilivent.
To use the new GitHub.dev web editor (currently in Beta) for 'Edit this Page' links, change github.com to github.dev for GitHub.com files entered into the Web Page Builder Markdown File URL field.
There are multiple ways to get a raw Markdown file available online, here are three options to help you get started:
GitHub or Codeberg:
Gist (GitHub Gists):
.md (eg myfile.md )Personal or Organizational Website:
Some text editors, such as Microsoft Visual Studio (including the online GitHub.dev web editor), have the ability to link your own CSS so Markdown previews are more visually accurate. If your editor supports this ability, the below CSS files can be used.
Docsify-This (based on the Docsify Open Publishing Starter Kit) CSS:
https://docsify-this.net/assets/css/editor.css
FontAwesome CSS:
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css
Enhanced Previews with Microsoft Visual Studio
For an even closer visual representation of your Docsify-This pages in Microsoft Visual Studio, do the following:
docs folderTIP: If you change the VSCode setting for Workbench › Editor: Show Tabs to single then the docsify preview area will remain in place as you edit multiple Markdown files.
You can load custom default settings in the Docsify-This Web Page Builder using URL parameters. This ability is especially helpful for Docsify-This online sessions, workshops, or when users collaborate and assist one another. Along with the standard Docsify-This URL parameters, the Web Page Builder also offers the following specific parameters:
https://docsify-this.net/?url-field=https://codeberg.org/paulhibbitts/docsify-this-one-page-course/src/branch/main/home.mdhttps://docsify-this.net/?url-field=empty You can even just type docsify-this.net? in front of an online Markdown file URL that you are viewing (such as files hosted on GitHub, Codeberg, or raw source files) to instantly set up the Docsify-This Web Page Builder with that file. Once the Web Page Builder loads, press the Return key — no need to leave the keyboard — to see Docsify-This display the Markdown file as a web page! For example, https://docsify-this.net?https://github.com/hibbitts-design/docsify-this-one-page-course/blob/main/home.md .
https://docsify-this.net/?url-field=https://codeberg.org/paulhibbitts/docsify-this-one-page-course/src/branch/main/home.md&edit-link-checkbox=truehttps://docsify-this.net/?show-page-options=truehttps://docsify-this.net/?advanced=true For example, the following URL will display the Advanced Web Page Builder, with the Markdown file URL set to https://github.com/hibbitts-design/docsify-this-multiple-page-course-site/blob/main/home.md , the site name 'CPT-363' along with a Docsify custom Sidebar and Navbar to be included: https://docsify-this.net/?url-field=https://github.com/hibbitts-design/docsify-this-multiple-page-course-site/blob/main/home.md&sidebar=true&loadSidebar=true&loadNavbar=true&name=CPT-363
The quickest way to create such a shareable URL is to use the Docsify-This Web Page Builder to generate a Docisfy-This web page URL, and then replace the URL parameter basepath with url-field using the full path of the source Markdown file URL. For example, the URL https://docsify-this.net/?basePath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-one-page-article/main&homepage=home.md&sidebar=true&maxLevel=3 would be changed to https://docsify-this.net/?url-field=https://github.com/hibbitts-design/docsify-this-one-page-article/blob/main/home.md&homepage=home.md&sidebar=true&maxLevel=3.
The provided basePath parameter and/or optional homepage parameter may not be correct, verify that these items lead to accessible content. This error message may also result from a Cross-Origin Resource Sharing (CORS) policy, which restricts resources on a web page to be requested from another domain. If possible, relocate files to a domain that supports cross-origin requests or alternatively if the domain in question is under your control explore re-configuring CORS related settings. You can confirm the cause of the 404 message by viewing the errors displayed in the Browser Javascript Console.
When displaying GitHub Markdown files, the branch name is assumed to be main , and other paths will likely cause a 404 file not found message. When displaying Codeberg Markdown files, the path is assumed to contain /src/branch/main and other paths will likely cause a 404 file not found message.
Due to not being able to update Navbar or custom Sidebar links before page rendering, 'Edit this Page' links cannot be automatically updated to their correct target pages. Manually pass a URL pointing to the Git Repository using the URL parameter edit-link as a workaround, for example https://docsify-this.net?basePath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-multiple-page-site/main&homepage=home .md&loadNavbar=_navbar&edit-link=https://github.com/hibbitts-design/docsify-this-multiple-page-site&edit-link-text=GitHub%20Repository и https://docsify-this.net/?basePath=https://raw.githubusercontent.com/paulhibbitts/docsify-this-cmpt-363-222-site/main&homepage=home.md&loadNavbar=_navbar.m d&sidebar=true&loadSidebar=_sidebar.md&edit-link=https://github.com/paulhibbitts/docsify-this-cmpt-363-222-site/tree/main&edit-link-text=GitHub%20Repository
Docsify is likely displaying the last cached version. To ensure the most recent version of a file is loaded, do a hard refresh of your Browser cache.
The most likely cause for embedded images in Markdown not being displayed as expected is the use of relative paths (ie  ) - review image paths and ensure the full path to each image is used (ie  ). Likewise, if images in HTML are not being displayed as expected the likely cause is again the use of relative paths (ie <img src="images/filename.jpg" alt="Alt Text"> ) - use absolute URLs for HTML image sources (ie <img src="https://raw.githubusercontent.com/user/repository/main/images/filename.jpg" alt="Alt Text"> ).
Due to iframe cross-domain issues embedded content may not be able to be displayed. Use the included rich media embed service embed.ly as a workaround.
For example, the following iFrame HTML:
< iframe src =" https://docs.google.com/presentation/d/e/2PACX-1vRnnRFelgw1ksq_p8Eryg3dnyLCRRLPf5fBgdwdv9p-tCIwcxqWvzDGrGbjxGHL7HqEJVpmV26ntk3a/embed?start=false&loop=false&delayms=3000 " frameborder =" 0 " width = 780 " height="585" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" > </ iframe >Would be changed to:
< a class =" embedly-card " data-card-controls =" 0 " data-card-align =" left " data-card-width =" 100% " href =" https://docs.google.com/presentation/d/1BLaaOTsGxDmNcAhg6pdx3hl9IvI8NErg8Oe5ceh83fw/edit?usp=sharing " > Grav and Docsify Slides Placeholder </ a > When displaying a Docsify Sidebar or custom Sidebar, it is expected that page header levels start with a H1 level header.
When the search field is enabled in a Docsify custom Sidebar, only pages listed and linked in the Sidebar will be indexed for the search. Any pages linked in an optional Navbar will not be included in searches.
Docsify-This (as with Docsify itself) will only execute the first script included in a Markdown page, as described in the Docsify documentation.
Have you tried out Docsify-This? Share your feedback about Docsify-This
By leveraging his extensive UX design expertise and systems-oriented approach, Paul helps teams and individuals utilize open content in a range of education and publication settings, especially in connection with his Markdown-based Docsify and Grav CMS open-source projects. Professional services include user experience and workflow consulting, premium support subscriptions, workshops, and custom development. Sound of interest? Send a note to [email protected].
This open source project is by Paul Hibbitts of HibbittsDesign.org.
??♂️Special Thanks
Beau Shaw for his Remote Docsify example.
Alan Levine for the inspiration of a consolidated ReadMe collection.
