Брат Гид - очень хороший молодой человек, которого я знаю. Его пухлое тело полно бесконечных талантов.JavaGuideЯ уже поставил 91K+ на GitHub. Я поднимусь и посмотрю, когда освобожусь. В конце концов, обучение делает меня счастливым, хе-хе.
Однажды я обнаружил, что онлайн-версия, которую он сделал, выглядит очень красиво. Я спросил его, что он использовал для этого, и он ответил мне и сказал: «документируйте, это очень удобно». онлайн-версия, которую удобно читать читателям.
01. Что такое документация
Волшебный генератор документов
Я не использовал редактор форматированного текста со времен Markdown, потому что при написании в Markdown создается ощущение потока. Многие блог-платформы поддерживают Markdown, даже если это не так, не беда, можно пройтиmdniceилиMd2AllПреобразование в формат расширенного текста.
docsify может автоматически генерировать каталог заголовков Markdown и может использоваться с облаком кода (внутренняя скорость доступа выше, чем у GitHub Pages) быстро создавать небольшие документы веб-сайта, цвет и макет всей страницы также очень удобны, так что опыт чтения неосознанно улучшается несколько классов.
В отличие от Gitbook, docsify не генерирует статические HTML-файлы, он интеллектуально загружает и анализирует файлы Markdown, что позволяет избежать «загрязнения» HTML-файлами всей библиотеки документации.
Вставьте его на официальный сайт docsify:
После того, как вы нажмете, вы почувствуете себя очень приятным для глаз и полным небольшой свежести. Должен признаться, мой взгляд был прикован к нему.
02. Войдите в яму
первый шаг, откройте командную строку и выполните следующую команду для установкиdocsify-cli, что удобно для локальной инициализации и предварительного просмотра в реальном времени.
npm i docsify-cli -g
Если этот шаг очень и очень медленный, вы можете принудительно завершить работу, потому что npm загружается с стороннего сервера и сильно зависит от сети.
Команда Taobao помогла нам решить эту проблему и создала домашнее зеркало npm. Вы можете заменить npm на cnpm, выполнив следующую команду.
npm install -g cnpm --registry=https://registry.npm.taobao.org
если он появитсяError: EACCES: permission denied, access '/usr/local/lib/node_modules'Если это неправильно, это потому, что у вас не было прав администратора при выполнении команды.Решение состоит в том, чтобы добавить sudo перед npm:
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
После ввода пароля его можно успешно выполнить. затем выполнитьcnpm i docsify-cli -gКоманда установлена. Если вы также подсказали правильную ошибку (Error: EACCES: permission denied), не забудьте добавить sudo.
PS: sudo — это команда управления системой Linux, которая позволяет системным администраторам разрешать обычным пользователям выполнять некоторые команды корневого уровня.
После успешной установки будет предложена следующая информация.
второй шаг, выполните следующие команды, чтобы создать и инициализировать каталог документов.
docsify init ./docs
После входа в каталог docs вы можете увидеть два файла: README.md (отображаемый как содержимое домашней страницы) и index.html (файл входа).
третий шагВернитесь к документам родительского каталога, выполните следующую команду, чтобы запустить локальные службы.
docsify serve docs
четвертый шаг, введите в адресную строку браузераhttp://localhost:3000для предварительного просмотра.
03. Настройте панель навигации
Откройте файл index.html и добавьте тег nav к тегу body следующим образом:
<body>
<nav>
<a href="www.itwanger.com">沉默王二个人博客</a>
</nav>
<div id="app"></div>
</body>
После сохранения вы можете просмотреть эффект в браузере.
04, Индивидуальные элементы конфигурации
Откройте файл index.html и в теге scriptwindow.$docsifyНастройте его следующим образом:
window.$docsify = {
name: '教妹学Java',
repo: 'https://github.com/itwanger/TechSisterLearnJava',
}
1) имя: Название документа, которое будет отображаться в верхней части боковой панели.
2) repo: адрес репозитория на GitHub, угловой логотип GitHub будет отображаться в правом верхнем углу страницы.
После сохранения вы можете просмотреть эффект в браузере.
05. Установите плагин
1) Полнотекстовый поиск
Плагин полнотекстового поиска получит содержимое документа по гиперссылке на текущей странице и построит индекс документа в localStorage. Срок действия по умолчанию — один день.Вы также можете указать список файлов для кэширования или срок действия.
Откройте файл index.html, добавьте элемент конфигурации полнотекстового поиска и импортируйте search.min.js, как показано ниже:
<body>
<script>
window.$docsify = {
search: {
paths: 'auto',
placeholder: '搜索',
noData: '找不到结果',
depth: 3,
},
}
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
</body>
После сохранения вы можете просмотреть эффект в браузере.
2) Масштабирование изображения
Просто импортируйте zoom-image.min.js в файл index.html, как показано ниже:
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
После сохранения вы можете просмотреть эффект в браузере.При наведении мыши на изображение появляется значок уменьшения или увеличения.После нажатия вы можете изменить форму изображения.
3) Скопировать в буфер обмена
Добавьте простую кнопку «Нажмите, чтобы скопировать» на все блоки кода, чтобы пользователи могли легко копировать код из вашего документа. Просто импортируйте docsify-copy-code в файл index.html следующим образом:
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>
После сохранения вы можете просмотреть эффект в браузере.
4) Количество слов
Предоставляет функцию подсчета китайских символов и английских слов и исключает некоторые специальные символы синтаксиса уценки, такие как*、-Ждать.
Откройте файл index.html, добавьте количество элементов конфигурации и введите countable.js следующим образом:
<body>
<script>
window.$docsify = {
count:{
countable:true,
fontsize:'0.9em',
color:'rgb(90,90,90)',
language:'chinese'
}
}
</script>
<script src="//unpkg.com/docsify-count/dist/countable.js"></script>
</body>
После сохранения вы можете просмотреть эффект в браузере.
06. Подсветка кода
docsifyВстроенный инструмент подсветки кодаPrism. Языки, поддерживаемые Prism по умолчанию, следующие:
- Markup -
markup,html,xml,svg,mathml,ssml,atom,rss - CSS -
css - C-like -
clike - JavaScript -
javascript,js
Java требует добавления дополнительных файлов синтаксиса в файл index.html следующим образом:
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.22.0/components/prism-java.min.js"></script>
После сохранения вы можете просмотреть эффект в браузере.
07, развертывание в облаке кода
Мы можем развернуть веб-сайт документации на GitHub Pages, но для домашних пользователей скорость доступа к облаку кода, очевидно, будет выше.
Если вы используете GitHub впервые, я подготовил для вас туториал:
Создайте новый репозиторий на GitHub и поместите все свои документы в каталог docs.Мой уже создан и называется TechSisterLearnJava.
Затем войдите в Code Cloud и выберите «Импортировать репозиторий из GitHub».
После выбора соответствующего склада нажмите Импорт.
После успешного импорта нажмите «Просмотреть репозиторий», чтобы просмотреть репозиторий, импортированный из GitHub в Code Cloud. Нажмите «Сервисы» и выберите «Gitee Pages».
Отметьте Force HTTPS и нажмите кнопку «Включить». Вскоре был запущен сервис облачных страниц кода.
Нажмите на адрес сайта:
Вы можете видеть, что docsify был успешно развернут в облаке кода.
08. Наконец
Я настоятельно рекомендую колонку "Java для учителей" и теперь обновил 15 статей (почти 50 000 слов), в дальнейшем будет обновляться не менее 2 разделов каждую неделю, ожидается, чтоОбновление раздела 130, от основ Java до объектов и классов, до структуры коллекций, сетевого программирования, параллельного программирования и виртуальной машины Java, в основном охватывая все аспекты.
Фотографии, включенные в колонку, отняли у меня много энергии и мыслей, и я стремлюсь дать вам ощущение свежести, поэтому я могу сделать несколько фотографий для вас.
Где найти такую хорошую колонку? Бесплатно для вас (я не знаю, что я думаю в любом случае)!
Github Чтение адреса (звезда):
Адрес чтения облака кода (пометьте его звездочкой):
docsify адрес онлайн-чтения:
Я знаю, я знаю, мне не нужно, чтобы вы что-то говорили, я тоже готов к оффлайн PDF Глядя на этот темный PDF, читать его абсолютно приятно.
Загрузка сетевого диска Baidu (темно-белый и ярко-белый, два вида) адрес:
disk.baidu.com/yes/1 Могу ли я спросить ОМ, если HW…Пароль: 1-й
PS:После окончания этой доки я был измотан.Когда я посмотрел на время было 1:32 ночи.Честно говоря глаза затуманились.