Дэвид Гилбертсон
Переводчик 丨 Сян Сян
Перепечатано из: CSDN
1. Отредактируйте код на GitHub.com.
Я собираюсь начать с функции, о которой, я думаю, знает большинство людей (даже если я не знал неделю назад).
Когда вы просматриваете файл на GitHub (любой текстовый файл, любой репозиторий), в правом верхнем углу появится значок карандаша. Щелкните ее, чтобы отредактировать файл. После редактирования нажмите кнопку «Предложить изменение файла», GitHub разветвит репозиторий кода и инициирует запрос на включение.
Разве это не здорово? Автоматический форк кода для вас.
Нет необходимости вручную разветвлять код на локальный сервер, а затем выполнять ряд операций, таких как извлечение, модификация, отправка и запрос на извлечение.
Это удобно для исправления опечаток и ошибок в коде.
2. Вставьте изображение
На Github не только комментарии и текстовые заметки могут отправлять сообщения, но и изображения можно вставлять прямо из буфера обмена. При вставке изображение будет загружено в облако и аккуратно отображено в уценке.
3. Отформатируйте код
Если вы хотите написать блок кода, вы начинаете с трех обратных кавычек — как вы узнали, читая страницы Mastering Markdown, и GitHub автоматически распознает тип используемого вами языка программирования.
Однако, если вы зафиксируете аналогичный Vue, Typescript или JSX этот фрагмент кода, вы можете явно указать язык, чтобы получить правильное выделение.
Обратите внимание, что первая строка `` `jsx:
Подобный результат означает, что фрагмент кода отображается правильно:
(Кстати, это распространяется и на суть, если вы дадите gist расширение .jsx, вы получите подсветку синтаксиса JSX.)
Узнайте обо всех поддерживаемых синтаксисах:GitHub.com/GitHub/Другое…
4. Используйте волшебные слова, чтобы закрыть проблемы в PR
Предполагая, что вы создаете запрос на вытягивание для исправления проблемы № 234, вы можете ввести «fixes # 234» в PR, и PR будет автоматически объединен, а проблема закрыта. Круто, да?
5. Ссылка на комментарий
Вы когда-нибудь хотели ссылаться на определенный комментарий, но не знаете, как работать? На этом этапе вы можете попрощаться по сей день, потому что я скажу, теперь нажмите, Щелкните рядом с именем даты / время можно связаться с обзором.
6. Код ссылки
Вы хотите сделать ссылку на определенную строку кода? Я знаю как.
Попробуйте следующее: при просмотре файла щелкните номер строки рядом с рассматриваемым кодом.
Вау, ты видел это? URL был обновлен на номер строки! Если вы переключитесь на другой номер строки, скоро, URL будет снова обновлен, и все фрагменты кода будут выделены между этими двумя линиями.
URL теперь может быть разделен, но они все равно будут указывать на текущий филиал. Что делать, если файл меняется? Постоянная ссылка (постоянная ссылка) файла в текущем состоянии решит проблему.
Я очень ленивый, поэтому все вышеперечисленные операции выполнил на скриншоте:
7. Используйте URL-адрес GitHub, похожий на командную строку
Навигация по GitHub с помощью пользовательского интерфейса удобна и приятна. Но иногда самый быстрый способ — ввести URL-адрес. Например, если бы я хотел перейти к ветке, над которой работал, и увидеть разницу между веткой и мастером, я мог бы ввести /compare/branch-name после имени моего репо.
Это покажет разницу между текущей веткой и основной веткой:
Если я нахожусь в ветке интеграции, мне нужно ввести имя /compare/integration-branch....
Использование клавиши ярлыка Ctrl + L или CMD + L перемещает курсор до URL (по крайней мере, в Chrome так).
Кроме того, функция автозаполнения браузера, что делает прыжок между ветвями, становятся очень простыми и удобными.
Pro Tip: используйте клавиши со стрелками на страницу записи на мобильном URL-адрес Chrome, нажмите Shift + Delete, чтобы удалить запись (вы можете удалить после консолидации отделения) из исторической записи.
8. Создайте список в задаче
Хотите увидеть список флажков для проблем?
И когда вы смотрите на проблему в списке, хотите ли вы, чтобы она отображалась в столбце «2/5».
При желании вы можете создать интерактивные флажки со следующим синтаксисом:
- [ ] Screen width (integer)
- [x] Service worker support
- [x] Fetch support
- [ ] CSS flexbox support
- [ ] Custom elements
Ввод идет по порядку: пробел, тире, пробел, открывающая скобка и пробел (или x) и закрывающая скобка, затем еще один пробел и, наконец, какой-то описательный язык.
Вы действительно можете установить/снять эти флажки! На мой взгляд, эта операция удивительна. Вы можете поставить галочку в поле выбора, и он обновит параметры отображения текста в зависимости от вашего выбора!
Если у вас есть эта проблема в доске проекта, которая также будет отображаться:
Если вы не понимаете, что я имею в виду под «доской проекта», вы можете прочитать ниже.
9. Совет проекта GitHub
Я использую Jira для больших проектов и Trello для личных проектов, и мне нравятся оба.
Позже я узнал, что у GitHub есть собственная доска проектов, прямо на вкладке «Проект» моего репозитория, где я копирую некоторые задачи, над которыми работал в Trello.
То же самое касается проекта GitHub:
Для удобства я добавлю вышеперечисленные пункты в качестве «примечаний». Однако возможность управления задачами в GitHub интегрирована с остальной частью репозитория, поэтому вы можете добавить существующие задачи в репозиторий резервных копий.
Вы можете нажать «Добавить карты» в правом верхнем углу, чтобы найти контент, который хотите добавить. В это время в поле отправляется специальная грамматика поиска, например, ввод IS: PR IS: Open для перетаскивания любых публичных запросов PULL на доску проекта или ввод метки: bug, чтобы разбить некоторые ошибки.
Вы также можете преобразовать существующие заметки в вопросы.
Его также можно добавить в проект в правой панели экрана существующей задачи.
Очень полезно хранить определение «задачи» в том же репозитории, что и код, реализующий задачу. Это означает, что в будущем вы сможете выполнять операции git с любой строкой кода и получать исторический код на основе журнала изменений без необходимости отслеживать его в других местах, таких как Jira или Trello.
Минусы: последние три недели я перестал использовать Jira и выполнял все свои задачи на GitHub, небольшом проекте в стиле Канбан, который мне нравится.
Но я не могу представить его использование в Scrum-проекте для оценки и расчета надлежащей скорости разработки или других преимуществ.
Хорошей новостью является то, что проекты GitHub имеют очень мало «функций», поэтому вам не нужно тратить много времени на оценку того, можете ли вы переключиться. Так что попробуйте и посмотрите, что вы думаете.
Во всяком случае, я слышал ZenHub и впервые открыл его 10 минут назад. Он эффективно расширяет GitHub, поэтому вы можете оценить свои проблемы и создать эпики и зависимости. Там Burndown и Velocity, это выглядит очень сильно.
10. GitHub wiki
Для неструктурированных коллекций страниц, таких как Википедия, отлично подходит продукт GitHub Wiki (в дальнейшем я буду называть его Gwiki).
Это не относится к структурированным наборам страниц, таким как ваши документы. Невозможно сказать «эта страница является подстраницей другой страницы», и нет кнопок навигации, таких как «следующая страница» и «предыдущая страница». А Гензелю и Гретель будет больно за то, что у них нет крошки (Сказки Гримм).
(Кроме того, вы читали эту историю? Это жестоко, два ублюдка сожгли эту бедную старушку в собственной духовке, я думаю, именно поэтому молодежь в наши дни так чувствительна - Пижамная история сейчас не содержит достаточно насилия.)
Расширяя Gwiki, я импортировал несколько страниц из документации NodeJS в виде вики-страниц, а затем создал пользовательскую боковую панель, чтобы смоделировать некоторую реальную структуру. Боковая панель есть всегда, хотя она не выделяет вашу текущую страницу.
Ссылку приходится поддерживать вручную, но в целом, я думаю, она будет работать нормально. Проверьте это, если вам это нужно.
Он не будет конкурировать с GitBook (он используется документами Redux) или пользовательскими веб-сайтами. Но это 80% или даже все права в вашем репо.
Мой совет: если у вас более одного файла README.md и вам требуется несколько разных страниц для предоставления пользователям рекомендаций или более подробной документации, вам следует использовать Gwiki.
11. Страницы GitHub (Джекил)
Вы, наверное, уже знаете, что вы можете использовать GitHub Pages для размещения статических веб-сайтов. Если вы еще этого не знаете, вы можете проверить информацию, чтобы освоить ее самостоятельно. В этом разделе будет конкретно описано, как создать сайт с помощью Jekyll.
В самом простом случае GitHub Pages + Jekyll создаст для вашего README.md красивую тему. Например, мы можем взглянуть на страницу readme about-github:
Если я нажму на вкладку «Настройки» моего сайта в GitHub, открою GitHub Pages и выберу тему Jekyll...
Я получаю страницу темы Jekyll:
Так что я могу построить целый статический сайт, в основном вокруг уценки, можно легко редактировать файл, вы можете поставить GitHub в CMS.
На самом деле я его не использовал, но это веб-сайт React Bootstrap и методы производства.
Обратите внимание, что для этого требуется, чтобы Ruby работал изначально (пользователи Windows обменялись понимающими взглядами и пошли в другом направлении, пользователи macOS скажут: «В чем проблема, куда вы идете? Ruby — универсальная платформа! GEMS!»).
(Здесь также стоит упомянуть, что GitHub Pages не допускает «насильственных угроз или действий», поэтому вы не можете перезагрузить Гензеля и Гретель.)
моя точка зрения:
Чем больше я узнавал о GitHub Pages + Jekyll (для этого поста), тем страннее это казалось.
Идея "избавления от сложности создания собственного веб-сайта" великолепна. Но вам все еще нужна настройка сборки для локального запуска. Существует множество простых команд CLI, которые помогут вам это настроить.
Я только что пропустил раздел «Начало работы», я думаю, что это была единственная простая вещь. И я не выучил простой «интерфейсный» синтаксис, а не контент просто для изучения «жидкого шаблона двигателя». Я предпочел бы написать сайт.
Честно говоря, я немного удивлен, что Facebook действительно использует это для создания документа React, и они создают справочную документацию React и берут свой предварительно обработанный HTML-файл на день.
Все, что им нужно сделать, это настроить свои существующие файлы уценки, как если бы они были получены из CMS.
12. Использование GitHub в качестве CMS
Предположим, вы содержате некоторый текст на вашем сайте, но вы не хотите хранить этот текст в реальном теге HTML.
Вместо этого вы хотите где-то не разработчики могут легко редактировать текст в хранилище текстовых блоков. Возможно, какая-то форма контроля версий. Возможно, процесс обзора.
Вот мое предложение: используйте файлы Markdown, хранящиеся в репозитории, чтобы сохранить текст. Затем возьмите эти блоки текста со своим компонентом Frontend и визуализируйте их на странице.
Я разработчик React, вот пример компонента Markdown, который, учитывая некоторый путь к уценке, получает, анализирует и отображает в HTML.
class Markdown extends React.Component {
constructor(props) {
super(props);
// replace with your URL, obviously
this.baseUrl = 'Пользовательское содержимое raw.GitHub.com/David Gil Belle…';
this.state = {
markdown: '',
};
}
componentDidMount() {
fetch(${this.baseUrl}/${this.props.url})
.then(response => response.text())
.then((markdown) => {
this.setState({markdown});
});
render() {
return (
);
Вот мой образец репозитория с некоторыми файлами уценки в /text-snippets.
(Вы также можете использовать API GiHub для получения контента, но я не знаю, почему это так)
Вы бы использовали такой компонент:
const Page = () => (
A very important disclaimer:
);
Так что теперь GitHub - это то, что вы хотите CMS и использовать для управления текстовым блоком.
Приведенный выше пример устанавливается только Markdown, если компонент был установлен в браузере. Если вы хотите статический сайт, вам нужен сервер, чтобы сделать его.
хорошие новости! Ничто не мешает вам получить все файлы уценки с сервера (плюс применимая к вам стратегия кэширования). Если вы пойдете по этому пути, вы можете проверить GitHub API, чтобы получить список всех файлов уценки в каталоге.
Инструменты GitHub
Я уже давно использую расширение Octotree для Chrome, поэтому очень рекомендую его.
Это дает вам панель слева с древовидным представлением, показывающим репо, на которое вы смотрите.
Из этого видео я узнал об октобоксе, и пока он кажется довольно хорошим. Это ваш почтовый ящик с проблемами на GitHub. Должен рекомендовать.
Когда дело доходит до цвета, я положил все мои экранные выстрелы на тему света, чтобы не удивить вас. Но на самом деле, я вижу все темные темы, зачем терпеть бледный Github?
Это комбинация стильного расширения Chrome (которое может нанести темы на любой веб-сайт) и GitHub темного аромата. Чтобы завершить внешний вид, темная тема Chrome devtools (встроенная, включенная в настройках) и Atom Chroom's Atom, одна темная тема.