GitBook — Быстрое создание комментируемого блога

GitHub Markdown

Create by jsliang on 2019-05-20 14:43:41
Recently revised in 2019-05-22 18:01:09

В этой статье рассказывается, как установить GitBook, как запустить службу GitBook, как настроить GitBook и, наконец, развернуть на страницах GitHub или развернуть на личном облачном сервере.

Друзья, если вы чувствуете себя хорошо, вы можете прийтибиблиотека документации jsliangЗвезда за jsliang, спасибо~


 【2019-08-16】Привет друзья, потому чтоjsliangБиблиотека документации подверглась рефакторингу, некоторые ссылки в этой статье могут быть неработоспособны, иjsliangИзвините за отсутствие сил поддерживать старые статьи на стороне Наггетс. Для тех, кому нужно получать последние статьи, щелкните адрес GitHub выше и перейдите в библиотеку документов, чтобы просмотреть скорректированные статьи.


Ниже приведен окончательный результат, добро пожаловать в комментарии~

каталог

Чем отличается передок без закидывания от соленой рыбы?

содержание
каталог
2 Предисловие
Три общие команды GitBook
Четыре конфигурации плагина GitBook
Развертывание пяти пакетов GitBook
Шесть резюме

2 Предисловие

Назад к содержанию

Поскольку мне обычно нравится использовать MarkDown для написания документов, я непреднамеренно раскрыл «преимущество» использования MarkDown на работе, поэтому в прошлое воскресенье (19 мая 2019 г.) меня поймали как кули и попросили преобразовать WIKI компании в GitBook. .

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

Так вот Amway здесь, чтобы дать моим друзьям, все будут счастливы вместе.

Три общие команды GitBook

Назад к содержанию

  • Установить Гитбук:npm i gitbook-cli -g
  • Инициализировать проект GitBook:gitbook init
  • Установите зависимости GitBook:gitbook install
  • Запустить службу GitBook:gitbook serve
  • Упаковка проекта GitBook:gitbook build
  • Представление командной строки GitBook:gitbook -help
  • Просмотр версии GitBook:gitbook -V

первый, настраиваем GitBook для компьютера, вТерминалПрямой стук:npm i gitbook-cli -g, компьютер будет настроен с помощью GitBook.

Поскольку у Mac могут быть ограничения разрешений, вам необходимо выполнитьsudo npm i gitbook-cli -g

потом, находим пустую папку и инициализируем проект GitBook:gitbook initКаталог генерирует одинREADME.mdфайл содержимого иSUMMARY.mdфайл каталога.

- GitBook
 - README.md
 - SUMMARY.md

README.md
Знак # указывает на заголовок первого уровня, подробности можно посмотреть самостоятельноСинтаксис MarkDown

# Introduction

SUMMARY.md
[Ссылка] (адрес ссылки) указывает ссылку для перехода, то есть GitBook автоматически сгенерирует для вас каталог в левой строке меню на основе вашего ОБЗОР

# Summary

* [Introduction](README.md)

наконец,мы вТерминалвойтиgitbook serveоткрытьlocalhost:4000сервис, пожалуйста, введите в браузереhttp://localhost:4000для доступа к сервису.

Четыре конфигурации плагина GitBook

Назад к содержанию

Чем может привлечь GitBook только функцией поиска?jsliang! , конфигурация плагина является ядром GitBook! ! !

Приступим к настройке плагина GitBook.

первый, добавитьbook.jsonдокумент:

- GitBook
 - README.md
 - SUMMARY.md
 - book.json

потом, мы настраиваемbook.json:

book.json

{
  "title": "jsliang 的文档库",
  "author": "梁峻荣 - jsliang",
  "description": "jsliang 的文档库. 里面包含了个人撰写的所有前端文章，例如 Vue、React,、ECharts、微信小程序等……",
  "language": "zh-hans",
  "styles": {
    "website": "./public-repertory/css/gitbook-configure.css"
  },
  "plugins": [
    "theme-comscore",
    "prism",
    "-highlight",
    "copy-code-button",
    "search-pro",
    "-search",
    "-lunr",
    "expandable-chapters",
    "splitter",
    "-sharing",
    "github-buttons",
    "donate",
    "tbfed-pagefooter",
    "baidu-tongji",
    "anchor-navigation-ex"
  ],
  "pluginsConfig": {
    "github-buttons": {
      "buttons": [
        {
          "user": "LiangJunrong",
          "repo": "document-library", 
          "type": "star",
          "count": true,
          "size": "small"
        }, 
        {
          "user": "LiangJunrong",
          "width": "160", 
          "type": "follow", 
          "count": true,
          "size": "small"
        }
      ]
    },
    "donate": {
      "button": "打赏",
      "alipayText": "支付宝打赏",
      "wechatText": "微信打赏",
      "alipay": "https://github.com/LiangJunrong/document-library/blob/master/public-repertory/img/seek-reward.jpg?raw=true",
      "wechat": "https://github.com/LiangJunrong/document-library/blob/master/public-repertory/img/seek-reward.png?raw=true"
    },
    "prism": {
      "css": [
        "prismjs/themes/prism-solarizedlight.css"
      ],
      "lang": {
        "shell": "bash"
      }
    },
    "tbfed-pagefooter": {
      "copyright":"Copyright &copy jsliang.top 2019",
      "modify_label": "该文件修订时间：",
      "modify_format": "YYYY-MM-DD HH:mm:ss"
    },
    "baidu-tongji": {
      "token": "55e7dfe47f4dc1c018d4042fdfa62565"
    },
    "anchor-navigation-ex": {
      "showLevel": false
    }
  }
}

наконец, мы устанавливаемbook.jsonПлагины настроены в:gitbook install, и положибиблиотека документации jsliangСкопируйте содержимое и измените егоSUMMARY.md, перезапустите проект:gitbook serve.

Конечно, для этого потребуется настроить файл SUMMARY.md, но это не должно быть для вас проблемой.

4.1 book.json

Назад к содержанию

Теперь давайте объяснимbook.jsonзначение:

  • title: Название веб-сайта
  • author: Автор сайта
  • description: Описание функции веб-сайта
  • language: язык, используемый веб-сайтом.
  • styles: Таблицы стилей для дополнительной настройки сайта
  • plugins: Плагины, используемые веб-сайтом
  • pluginsConfig: дополнительная настройка плагинов, используемых веб-сайтом.

Нижеследующее в основном объясняетstylesа такжеplugins.

4.2 gitbook - styles

Назад к содержанию

Иногда GitBook поставляется с некоторыми стилями, которые вам не нужны, например, боковой панелью.Работает на GitBookПодождите, мы можем скрыть это, установив CSS:

.gitbook-link {
  display: none !important;
}
.summary .divider {
  display: none !important;
}

4.3 gitbook - plugins

Назад к содержанию

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

Ниже мы перечисляемpluginsПеречислите, а затем объясните реализацию функции одну за другой:

Плагин 1 - тема-comscore

theme-comscore: добавьте приятный стиль в GitBook, это сделает табличные формы и т. д. более красивыми.

Метод конфигурации

"plugins": [
  "theme-comscore"
]

Справочный эффект:

Плагин 2 - призма

prism: добавьте более красивый стиль в код GitBook, не забудьте заблокировать стиль GitBook по умолчанию при его использовании.highlightплагин, т.е. через (-highlightуказывает, что появляется следующее-плагины тоже)

Метод конфигурации

"plugins": [
  "prism",
  "-highlight"
],
"pluginsConfig": {
  "prism": {
    "css": [
      "prismjs/themes/prism-solarizedlight.css"
    ],
    "lang": {
      "shell": "bash"
    }
  }
}

Справочный эффект:

Плагин 3 - кнопка копирования кода

copy-code-button: добавьте функцию копирования в код GitBook, вы можете скопировать весь код блока кода одним щелчком мыши.

Метод конфигурации

"plugins": [
  "copy-code-button"
]

Справочный эффект:

Плагин 4 - поиск-про

search-pro: Не очень хорошо для китайского из-за поиска, поддерживаемого GitBook. После добавления этого плагина результаты поиска могут быть выделены, что очень удобно. Конечно, поскольку функция поиска по умолчанию запрещена, ее нужно заблокировать.searchа такжеlunr

Метод конфигурации

"plugins": [
  "search-pro",
  "-search",
  "-lunr"
]

Справочный эффект:

Плагин 5 - расширяемые главы

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

Метод конфигурации

"plugins": [
  "expandable-chapters"
]

Справочный эффект:

Плагин 6 - сплиттер

splitter: сделать боковую панель перетаскиваемой по ширине.

Метод конфигурации

"plugins": [
  "splitter"
]

Справочный эффект:

Плагин 7 - -обмен

-sharing: удалить функцию общего доступа GitBook по умолчанию. Из-за своего Twitter по умолчанию Facebook должен быть выше стены, и мы делаем китайский сайт, поэтому все функции обмена отключены.

Метод конфигурации

"plugins": [
  "-sharing"
]

Справочный эффект:

Плагин 8 - Github-кнопки

github-buttons: добавить значок GitHub в GitBook для отображения.followа такжеstars.

Метод конфигурации

"plugins": [
  "github-buttons"
],
"pluginsConfig": {
  "github-buttons": {
  "buttons": [
    {
      "user": "LiangJunrong",
      "repo": "document-library", 
      "type": "star",
      "count": true,
      "size": "small"
    }, 
    {
      "user": "LiangJunrong",
      "width": "160", 
      "type": "follow", 
      "count": true,
      "size": "small"
    }
  ]
  }
}

Справочный эффект:

Плагин 9 - пожертвовать

donate: Настройте модуль чаевых внизу, и пользователи смогут щелкнуть чаевые Alipay, WeChat и т. д.

Метод конфигурации

"plugins": [
  "donate"
],
"pluginsConfig": {
  "donate": {
    "button": "打赏",
    "alipayText": "支付宝打赏",
    "wechatText": "微信打赏",
    "alipay": "https://github.com/LiangJunrong/document-library/blob/master/public-repertory/img/seek-reward.jpg?raw=true",
    "wechat": "https://github.com/LiangJunrong/document-library/blob/master/public-repertory/img/seek-reward.png?raw=true"
  }
}

Справочный эффект:

Плагин 10 — tbfed-pagefooter

tbfed-pagefooter: добавьте нижний колонтитул на каждую страницу GitBook, чтобы вы могли знатьcopyrightи время модификации и т. д.

Метод конфигурации

"plugins": [
  "tbfed-pagefooter"
],
"pluginsConfig": {
  "tbfed-pagefooter": {
    "copyright":"Copyright &copy jsliang.top 2019",
    "modify_label": "该文件修订时间：",
    "modify_format": "YYYY-MM-DD HH:mm:ss"
  }
}

Справочный эффект:

Плагин 11 — baidu-tongji

baidu-tongji: добавьте статистику Baidu на сайт GitBook, чтобы количество посещений пользователей можно было просмотреть через статистику Baidu.

Метод конфигурации

"plugins": [
  "baidu-tongji"
],
"pluginsConfig": {
  "baidu-tongji": {
    "token": "55e7dfe47f4dc1c12345678fdfa62565"
  }
}

Плагин 12 — якорь-навигация-ex

anchor-navigation-ex: автоматическое создание меню на основе # ## ### и добавление эффекта перехода наверх.

Метод конфигурации

"plugins": [
  "anchor-navigation-ex"
],
"pluginsConfig": {
  "anchor-navigation-ex": {
    "showLevel": false
  }
}

Справочный эффект:

Плагин 13 - gitalk

gitalk: Добавить на страницу функцию комментариев, которая будет добавлена ​​в ISSUE склада Github.

первый, это не плагин,GitalkЭто плагин для комментариев, разработанный на основе GitHub Issue и Preact.

потом,мы вMessageBoard.md(то есть страницу, где нам нужно добавить область комментария) добавить соответствующий код:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<div id="gitalk-container"></div>
<script>
  var gitalk = new Gitalk({
    "clientID": "需要补充的 clientID",
    "clientSecret": "需要补充的 clientSecret",
    "repo": "document-library",
    "owner": "LiangJunrong",
    "admin": ["LiangJunrong"],
    "id": location.pathname,      
    "distractionFreeMode": false  
  });
  gitalk.render("gitalk-container");
</script>

тогда, мы примерно говорим о полях выше:

  1. clientID: настройки разработчика GitHub, идентификатор подключения клиента. Ниже приведены подробные пояснения.
  2. clientSecret: настройки разработчика GitHub, секрет клиента. Ниже приведены подробные пояснения.
  3. repo: имя репозитория GitHub, у насdocument-libraryЛа.
  4. owner: владелец репозитория GitHub, который является моей учетной записью GitHub:LiangJunrong.
  5. admin: Менеджер репозитория GitHub или моя учетная запись GitHub:LiangJunrong. (поддерживает массивы, несколько менеджеров)
  6. id: Уникальный идентификатор страницы, значение по умолчанию:location.href
  7. distractionFreeMode: Эффект полноэкранной маски, аналогичный окну комментария Facebook, значение по умолчанию:false

Для получения дополнительных сведений о конфигурации см.:Gitalk

приходи еще, открываем страницу:Приложение с открытой лицензией GitHub

После создания на странице отобразится:

наконец, мы можемhttp://localhost:4000/MessageBoard.htmlПросмотрите отображение результатов в (наконец нужно поместить в LiangJunrong.github.io):

Таким образом, мы завершили добавление Gitalk на одну страницу. Если вам нужно добавить несколько страниц, вы можете обратиться к следующемуТехнологическая станция «Снежная мечта»Рейдеры (не дрожа здесь,jsliangПро тест действителен):

Плагин 14 — Ссылки

  1. Плагин GitBook — GitHub — zhangjikai
  2. Настройка функций плагина, подробное объяснение параметров — GitHub — zq99299
  3. Использование Gitbook и распространенные плагины — Чжао Да
  4. [Gitbook] Практическая настройка и знакомство с подключаемым модулем — zhangjk
  5. Как элегантно пользоваться Gitbook — Хён
  6. Практические плагины для вводных руководств по gitbook (добавлено 3 новых плагина) - segmentfault - Snow Dream Technology Station
  7. Шаблоны Gitbook - GitHub - crifan

Развертывание пяти пакетов GitBook

Назад к содержанию

Теперь пришло время упаковать и опубликовать ваш проект, чтобы другие друзья увидели вашу работу.

первый, упакуйте проект:gitbook build.

потом, разверните на GitHub Pages или на личном облачном сервере.

наконец, давайте проверим нашу страницу развертывания:

Страницы, развернутые в GitHub Pages:liangjunrong.github.io/

Шесть резюме

Назад к содержанию

Хорошо, это конец нашего руководства по GitBook.

Если у вас возникнут проблемы при разработке с GitBook, вы можете связаться со мной:

  1. Добавитьjsliangгруппа данных QQ:798961601.
  2. Добавитьjsliangличный QQ:1741020489
  3. Добавитьjsliangличный WeChat:

последний из последних, если вы думаете, что это хорошо, не забудьте датьjsliangнажмитеотличныйилиstarо~

PS: Если вам нужно приобрести облачный сервер для хранения ваших собственных страниц, упакованных через GitBook, вы можете нажать на ссылку ниже или проконсультироватьсяjsliangо~

知识共享许可协议
библиотека документации jsliangЗависит отЛян ЦзюньронгиспользоватьCreative Commons Attribution-NonCommercial-ShareAlike 4.0 Международная лицензияЛицензия.
на основеGitHub.com/l ian Jun Ron…Создание работ выше.
Права на использование, отличные от разрешенных в настоящем Лицензионном соглашении, могут быть получены отCreative Commons.org/licenses/не…получено в.

Категории