[Инструменты] Быстро создайте собственный веб-сайт с документацией за 10 минут.

внешний интерфейс Git
[Инструменты] Быстро создайте собственный веб-сайт с документацией за 10 минут.

предисловие

Многие студенты надеются иметь свою собственную систему документов для записи/обобщения того, что они узнали.

Эта статья познакомитDocsify+ Метод Github Page, предназначенный для быстрого создания собственного веб-сайта с документацией.

Доступ к демонстрационному коду этой статьи можно получить черезGithubпросмотр, демоздесь

Готов к работе

Установить глобальноdocsify-cliинструменты и создайте каталог проекта документации

npm i docsify-cli -g
mkdir my-docs
cd my-docs

Инициализировать проект

docsify init ./docs

После успеха аdocsпапка с тремя файлами в ней

  • index.htmlвходной файл. Многие из наших конфигураций настроены здесь
  • README.mdбудет отображаться как содержимое главной страницы
  • .nojekyllдля блокировкиGitHub PagesИгнорировать файлы, начинающиеся с подчеркивания

Стартовый проект

docsify serve docs

запустивdocsify serveЗапустите локальный сервер, вы можете легко просмотреть эффект в режиме реального времени. адрес доступа по умолчаниюhttp://localhost:3000. Следующее содержание временноREADME.mdсодержание в

простая конфигурация

Следующим шагом будет настройка нашего документа

Настроить боковую панель

В index.html добавьте конфигурациюloadSidebar: true

window.$docsify = {
  name: '',
  repo: '',
+  loadSidebar: true
}

существуетdocsсоздать новый файл в_sidebar.md, записывать

- JavaScript
  - [闭包](closure.md)
  - [原型](prototype.md)

- CSS
  - [布局](layout.md)

в то же времяdocsЧжунсинclosure.md,prototype.mdа такжеlayout.mdТри файла Markdown

допустимыйclosure.mdНапишите следующее, чтобы увидеть эффект

# 介绍闭包
## 什么是闭包
哈哈哈哈

## 闭包的作用是什么

автоматически сгенерированный каталог

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

window.$docsify = {
  name: '',
  repo: '',
  loadSidebar: true,
+ subMaxLevel: 2
}

Использование плагинов

Базовая конфигурация завершена, конечно, есть и другие более функциональные комплектации, которые здесь подробно описываться не будут.DocsifyТакже предоставляет множество плагинов, давайте посмотрим

исследовать все

Конфигурация очень проста

<script>
  window.$docsify = {
    name: '',
    repo: '',
    loadSidebar: true,
    subMaxLevel: 2,
+   search: 'auto'
  }
</script>
<!-- Docsify v4 -->
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
+  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>

Посмотреть эффект

Увеличение изображения

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

    <script>
      window.$docsify = {
        name: '',
        repo: '',
        loadSidebar: true,
        subMaxLevel: 2,
        search: 'auto'
      }
    </script>
    <!-- Docsify v4 -->
    <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
    <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
+   <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>

Поддержка вставки CodePen

найти любойCodePen, открыть, найтиEmbedнажмите, чтобы войти

image.png

нажмитеiframe,copyкод внутри. вставить в свойmarkdownв файле

вы можете просмотретьCodePenда

Дополнительные реализации плагинов

Docsifyтакже обеспечиваетGitalkПлагины комментариев и т. д. узнать большеофициальная документация, которые здесь повторяться не будут.

развертывать

Вам не нужен сервер (конечно можно), мы разворачиваем прямо наGithub Pageсередина. Сначала загрузите наш код вGithub. Этот шаг не будет здесь демонстрироваться, и читателям предлагается выполнить его самостоятельно.

оказатьсяSettings

оказатьсяGitHub Pages,выберитеmainа такжеdocsпапка, нажмитеsave

Через некоторое время будет сгенерирован адрес нашего документа, можно нажатьздесьПосмотреть демонстрацию этой статьи

Суммировать

В этой статье представлены от 0 до 1Docsify + Github Pageспособ быстро создать собственную систему документов и развернуть ее в Интернете. Конечно, упомянутая статья — это лишь малая часть функций Docsify, если вам интересно, вы можете перейти наофициальныйПроверить

Категории