GitHub을 사용하여 HTML 양식 작성 방법

당신은 일찍이 문제 템플릿을 구축한 적이 있습니까? 아니면 사람들에게 GitHub 문제의 구체적인 정보를 기입하도록 요구했는데, 그들이 어떤 세부 사항도 제공하지 않은 것을 발견했습니까?그래, 그 새 GitHub이 발매된 날들은 이미 지나갔어.
GitHub 질문 템플릿을 만들 수 있습니다. GitHub 질문의 기능은 구글 폼과 유사합니다.특정 정보를 요청하고, 체크 상자를 추가하고, 필요한 모든 세부 정보를 얻을 수 있도록 일부 필수 필드를 설정할 수 있습니다.
이것은 오류 보고, 기능 요청 등에 매우 편리하다.이 폼들과 어떻게 폼을 만드는지 봅시다.

GitHub 발매 양식은 어떤 모양입니까?

GitHub 문제 양식은 표준 HTML 양식과 비슷하지만 문제가 있습니다.이것은 내가 만든 간단한 폼으로 사용자가 내가 사용할 때 live stream 나에게 시범을 요청할 수 있도록 한다.

보시다시피, 나는 사용자에게 그들이 보고 싶은 프레젠테이션의 '유형' 을 선택하도록 요구했다.이것은 내가 사용자가 선택할 수 있는 프레젠테이션 형식을 작성할 수 있는 하단 목록입니다.추가 정보 섹션은 사용자가 추가 세부 정보를 추가할 수 있는 텍스트 상자입니다.유형 및 추가 정보 옆에 빨간색 별표*가 표시됩니다.이것은 이 필드들이 반드시 필요하다는 것을 의미한다.이 내용을 기입하지 않으면 사용자는 문제를 제출할 수 없습니다.
그런 다음 사용자 세부 정보를 추가하기 위해 선택할 수 있는 작은 텍스트 상자가 있습니다.일리가 있었으면 좋겠어요.나는 새로운 GitHub 질문 양식을 만들고 이를 어떻게 하는지 단계별로 소개할 것이다.

첫걸음GitHub 문제 양식 파일 만들기

이전에 문제 템플릿을 사용하지 않은 경우 해당 템플릿의 위치를 만들어야 합니다.모든 GitHub 발행 템플릿, GitHub 발행 폼 템플릿을 포함하여 환매 협의서ISSUE_TEMPLATE 폴더 아래.github 폴더 아래에 있습니다.재구매 계약의 [코드] 탭으로 이동하여 폴더가 있는지 확인.github→ ISSUE_TEMPLATE .
이 폴더가 없으면 만드십시오.파일 추가 새 파일 만들기 를 클릭하여 이 작업을 완료할 수 있습니다.
화면이 로드되면 명명된 파일...을 표시하는 위치를 클릭합니다.

키보드에.github/ISSUE TEMPLATE/를 입력합니다.두 개의 새 폴더가 생성되어 새 파일을 추가할 수 있습니다.

당신의 파일 이름을 지정합니다.이것은 GitHub 문제 양식이기 때문에, GitHub 문제 양식은yaml 파일에서 실행되기 때문에 *.yml 라고 명명하려고 합니다.

파란색 상자가 나타날 수도 있습니다.

이것은link will take you to GitHub Docs입니다.그것은 문제 템플릿을 어떻게 사용하는지에 대해 좋은 해석을 가지고 있다.나중에 사용할 수 있도록 이 링크를 저장하고 문제 템플릿이 나타나면 이 링크로 돌아갑니다.
우리 파일로 돌아가서 아래로 스크롤하고 '새 파일 제출' 을 누르십시오.

원하는 경우 제출 메시지를 추가할 수 있습니다.

두 번째 단계.릴리즈 테이블 초기화

현재 우리는 공백의yaml 파일이 하나 있다.빈 파일이 있기 때문에 템플릿에 문제가 있음을 나타내는 빨간색 오류 상자가 나타날 수 있습니다.걱정하지 마라, 왜냐하면 지금 우리는 그것을 건설해야 하기 때문이다.
오른쪽에 있는 연필 "이 파일 편집"을 누르십시오.
이 템플릿을 문제 양식으로 초기화해야 합니다.템플릿의 이름을 추가해야 합니다.이것도 누군가가 양식에 기입하려고 할 때 나타나는 묘사이다.이 템플릿에서 빈 문제를 열 때 제목이 필요합니다.
이렇게 하려면 다음 코드를 추가합니다.

name: NAME_OF_TEMPLATE
description: DESCRIPTION
title: 

추가할 수도 있습니다labels.이것들은 아마도 이미 당신의 환매 협의에 설정되어 있을 것입니다.양식에 인원을 할당하려면 assignees를 추가하십시오.
내 표는 흐르는 특정한 알림이나 개발자의 게시물에 작성된 알림을 요청하는 데 사용될 것이다.다음은 나의 문제 표의 현재 모습이다.

이 부분을 완성하면 폼을 만들기 위해 모든 정보를 추가할 수 있습니다.흥미로운 사실: 만약 당신이 표준적인 문제 템플릿을 구축하고 있다면, 상기 두 단계는 같다.

세 번째.질문 양식 작성

GitHub 릴리즈 양식으로 만드는 모든 기능을 추가할 수 있습니다.
우선, 추가body:와 같은 축소
이름:

name: Tip Request
description: Request a GitHub Tip from MishManners
title: "[Tip]: I want "
labels: [Tip, enhancement]
assignees:
  - mishmanners
body:

다음은 문제 표에 원하는 요소를 추가합니다.문제 양식에 포함할 수 있는 컨텐트 유형은 다음과 같습니다.

markdown: 양식에 기입한 사람에게 메시지를 쓰거나 남길 수 있는 곳."이 양식에 시간을 써 주셔서 감사합니다"라는 글이 도움이 될 것입니다.이 파일을 문제 표로 만들려면 가격 인하만이 필요합니다.그래서 너도 추가할 수 있다.

input: 사용자가 텍스트를 쓸 수 있는 작은 구역입니다.짧은 대답이 유용하다

textarea: 사용자가 텍스트를 쓸 수 있는 필드입니다.비교적 긴 답안에 유용하다

checkboxes: 사용자 태그

dropbown: 사용자가 구체적인 답안을 선택할 수 있도록 제공

각 요소 아래에 다음을 추가해야 합니다.

id: 요소의 명칭(이것은 참고로 표 자체에 나타나지 않습니다)

attributes . attributes에서 다음을 추가해야 합니다.

label: 표 섹션의 제목

description: 제목

의 간단한 설명

위에서 요소를 선택한 내용에 따라 더 많은 옵션이 있습니다.만약 이것이 textarea 이라면, 어떤 종류의 텍스트 구역인지 알려주기 위해 render 를 추가해야 합니다.dropdown 또는 checkboxes를 추가할 경우 options를 제공해야 하고 input를 사용할 경우 placeholder 값을 추가할 수 있습니다.

validations: 마지막으로 폼의 이 부분을 추가해야 하는지 여부required입니다.이것은 부울 값이기 때문에 제공해야 한다true 또는false.

양식에 필요한 내용을 선택하고 올바른 코드를 추가한 경우 템플릿은 다음과 같습니다.

name: Tip Request
description: Request a GitHub Tip from MishManners
title: "[Tip]: I want "
labels: [Tip, enhancement]
assignees:
  - mishmanners
body:
  - type: markdown
    attributes:
      value: |
        Thanks for asking Mish for a Tip. Tune into a Live stream or read Mish's articles on DEV for great GitHub tips.
  - type: input
    id: Name
    attributes:
      label: Name of GitHub Tip
      description: What is the name of this GitHub Tip?
      placeholder: ex. GitHub Issue Forms
    validations:
      required: true

  - type: textarea
    id: info
    attributes:
      label: More information
      description: Add more information on the tip you would like to see.
      render: shell
    validations:
      required: true

  - type: dropdown
    id: Level
    attributes:
      label: What kind of level is this tip?
      description: What level of developer do you tthink this tip is aimed at?
      options:
        - Beginner
        - Intermediate
        - Advanced
    validations:
      required: true

  - type: checkboxes
    id: location
    attributes:
      label: Where do you want this GitHub Tip?
      description: Where would you like to see this GitHub Tip? You can select more than one.
      options:
        - label: Twitch
          required: false
        - label: DEV post
          required: false
        - label: YouTube video (longer)
          required: false
        - label: Twitter video (shorter)
          required: false

커밋 시작을 클릭합니다.

원하는 경우 커밋 메시지를 추가하고 변경 내용 커밋을 클릭합니다.만약 위의 코드가 유효하다면 (내 코드를 마음대로 복사하고 붙여서 비교해 주십시오) 코드를 제출할 때 어떠한 오류도 발생해서는 안 됩니다.syntax required for GitHub Issue Forms over on the GitHub Docs 유형에 대한 더 많은 정보를 읽습니다.하면, 만약, 만약...🔴, 4단계를 건너뛰고 도움말 표시줄로 건너뛰기🔴"가자.

네 번째 단계.너의 양식에 기입해라

너의 표는 지금 완성되었을 거야!이제 테스트해 보겠습니다.

템플릿을 만드는 저장소로 이동

질문 탭

을 클릭합니다.

신규

클릭

방금 만든 문제 템플릿을 선택합니다.

이것은 템플릿 파일name:에서 요청한 것이기 때문에'팁 요청'이라고 불립니다.
"시작"을 누르면 질문 양식이 표시됩니다.
이것이 바로 나의 모습이다.

양식에 파일에 추가된 모든 요소를 볼 수 있습니다.빨간색 별표*는 required 필드 옆에 표시됩니다.
이 표를 보고 상기 코드와 일치시키십시오.

생명을 구하다🔴 양식 작성을 위한 GitHub 지원

내가 GitHub 문제표를 좋아하는 점은 템플릿을 구축할 때 어려움을 겪으면 GitHub가 너를 잘 도와줄 수 있다는 것이다.예를 들어, 코드를 커밋할 때 요소 추가를 잊어버리면 GitHub에서 다음과 같은 오류를 발생시킬 수 있습니다.

이 오류는 내 폼의 네 번째 요소 ((body[4] 가 하나 options 부족하다는 것을 의미한다.만약 우리가 코드를 다시 비교한다면, 나는 네 번째 요소가 표의 끝부분checkboxes이라는 것을 볼 수 있다. 그것들은 어떠한 옵션도 없다.

다음과 같은 옵션만 추가할 수 있습니다.

만약 이 모든 것이 무섭게 들리거나, 어디서부터 시작될지 모르거나, 오류를 어떻게 복구해야 할지 모른다면, GitHub가 도움을 줄 수 있습니다.템플릿을 작성할 때 오른쪽에는 다음과 같은 도움말 옵션이 표시됩니다.

이 편리한 설정 조수는yaml 파일에 포함해야 할 정보를 제공합니다.일부 코드 세션은 복사하고 붙여야 하며, 많은 정보도 있다.그것은 이 문제들의 표를 구축하는 것을 더욱 쉽고 모든 분야에 유용하게 설명한다.

GitHub 릴리즈 양식은 아직 테스트 단계입니다.

현재(2021년 8월)까지 GitHub 발행 양식은 여전히 테스트 단계에 있다.
이 글을 읽고 있고 문제 템플릿이 테스트 단계에 있다면,yaml 파일을 만들 때 Beta 표시를 알 수 있습니다.피드백은 항상 인기가 많습니다. GitHub팀은 모든 피드백과 건의를 읽을 것을 보증합니다.
GitHub 문제 양식 또는 기타 기능에 대한 피드백을 받으려면 our Discussions Feedback를 방문하십시오.
GitHub 질문은 어떻게 사용하시겠습니까?