GythubでHTMLのようなフォームを構築する方法

9828 ワード
github tutorial テキストリンク
あなたは問題テンプレートを構築したり、特定の情報を持つGithubの問題を埋めるために人々に尋ねたことがありますが、唯一の詳細に入れていない実現するために?さて、新しいGitthubの問題とそれらの日です.
これで、Googleのようなフォームとして機能するgithub問題テンプレートを作成できます.特定の情報を要求することができますチェックボックスを追加し、必要なすべての詳細を得るために必要なフィールドを確認します.
これは、バグ報告、機能要求、および詳細に便利です.これらのフォームを見てみましょう.

Github問題のフォームはどのように見えますか？


Githubの問題フォームは、標準のHTMLフォームに似ています.これは、私がAの上にいる間、私がユーザからデモを要求するために私が構築した短い形ですlive stream .

私は、ユーザーが彼らが見たいと思うデモの「タイプ」を選ぶよう頼むのを見ることができます.これは、私が私が選ぶことができるデモのタイプを書くことができるドロップダウンです.“詳細情報”セクションは、ユーザーが詳細を追加することができますテキストボックスです.あなたは“アスタリスク”と“より多くの情報”の横に赤いアスタリスク*が表示されます.つまり、これらのフィールドが必要です.ユーザーはこれらを記入せずに問題を提出することができなくなります.
その後、オプションの小さなテキストボックスのユーザーの詳細を追加します.うまくいけば、それは少しの感覚を作ります.私は新しいgithubの問題のフォームを作成し、これを行う方法を踏むつもりです.

ステップ1。Github問題フォームファイルを作成します


前に問題テンプレートを使用していない場合は、それらの場所を作成する必要があります.Github問題フォームテンプレートを含むすべてのGithub問題テンプレートISSUE_TEMPLATE フォルダの下に.github あなたのrepoのフォルダ.あなたのレポの下の「コード」タブに移動して.github → ISSUE_TEMPLATE .
あなたがこのフォルダを持っていないならば、それをつくってください.「ファイルを追加」をクリックすると、新しいファイルを作成できます.
画面が読み込まれると、「ファイル名を指定する」をクリックします.

あなたのキーボードから「. github/issuechen template/」と入力してください.つの新しい'フォルダ'に気づくでしょうし、新しいファイルを追加することができます:

ファイル名を指定します.これはGithubの問題の形態であるので、私たちはそれを2012年に終わる何かの名前にしたがっています*.yml GYTUBの発行フォームは、YAMLファイルで実行されます.

また、青い箱が表示されることに気づくでしょう.

このlink will take you to GitHub Docs . これは、問題テンプレートを操作する方法についての素晴らしい説明をしています.後でこのリンクを保存して、問題テンプレートで動けなくなるならば、それに戻ってください.
ファイルに戻るには、スクロールダウンして「新しいファイルをコミット」をクリックします.

あなたが好きならば、あなたはコミットメッセージを加えることができます.

手順2。問題フォームの初期化


今、私たちは空白のYAMLファイルを持っています.空白のファイルがあるので、テンプレートに問題があるというエラーボックスがあります.心配しないでください、今、我々はそれを造ろうとしています.
このファイルを編集するには、右側の鉛筆をクリックします.
このテンプレートを問題フォームとして初期化する必要があります.テンプレートの名前を追加する必要があります.これは、誰かがフォームを記入したいときに表示される説明です.また、誰かがこのテンプレートから空白の問題を開くときに表示されるタイトルが必要です.
次のコードを追加します.
name: NAME_OF_TEMPLATE
description: DESCRIPTION
title:
また、追加することができますlabels . これらはすでにあなたのレポでセットアップを持っている可能性があります.追加assignees 誰かがフォームに割り当てる場合.
私のフォームはストリームの特定のヒントを要求するためのものです.以下に私の問題の形式を示します.

したら、この部分を完了すると、フォームを構築するすべての情報を追加することができます.楽しい事実:あなたが標準的な問題テンプレートを造っているならば、上記の2つのステップは同じです.

ステップ3。問題フォームの構築


今、我々はこれをgithubの問題のフォームを作るすべての空想の機能を追加することができます.
まず、body: と同じインデントで
名前
name: Tip Request
description: Request a GitHub Tip from MishManners
title: "[Tip]: I want "
labels: [Tip, enhancement]
assignees:
  - mishmanners
body:
次に、課題フォームに必要なさまざまな要素を追加します.問題のフォームに含めることができますものの種類は以下を含みます.
  • markdown : あなたがメッセージを書くことができる場所またはフォームを記入している人のために情報を残すこと.「このフォームに記入するのに時間を割いてくれてありがとう」などのテキストが役に立ちます.このファイルを問題の形にするために、Markdownより多くの必要があります.また、
  • input : ユーザーがテキストを書く小さな領域.短い回答に役立つ
  • textarea : ユーザーがテキストを書くフィールド.より長い答えに役立つ
  • checkboxes : ユーザのマークオフ
  • dropbown : 特定の回答を選択するユーザー
    • 各要素の下で、いくつかのものを追加する必要があります.
  • id: 要素の名前(これは参照のためのもので、フォーム自体に表示されません)
  • attributes . 下attributes , 以下を追加する必要があります.
  • label : フォームのこの部分の見出し
  • description : 見出しの下に表示される短い説明
  • 上記の要素に応じて、より多くのオプションがあります.これがAならばtextarea を追加する必要がありますrender それがどんな種類のtextareaであるかについて話すこと.追加した場合dropdown or checkboxes あなたが提供する必要がありますoptions , そして、あなたが使用するならinput を追加することができますplaceholder 値.
  • validations : 最後に、フォームのこのセクションがrequired . これはブールですので、どちらかを提供する必要がありますtrue or 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をスキップして🔴「ステップ.

    ステップ4。記入する


    あなたのフォームは今完了する必要があります!今テストする
  • テンプレートを作成した場所に移動します
  • タブをクリックします
  • をクリックします
  • 作成した課題テンプレートを選択します.
    • 私の下にあるので、私のものは「チップ要求」と呼ばれていますname: 私のテンプレートファイルで.
    をクリックして“スタート”とあなたの問題フォームを表示する必要があります.
    これは私の見たものです.

    ファイルに追加されたフォーム内のすべての要素を見ることができます.赤アスタリスクを見ることができますrequired フィールド.
    このフォームをチェックし、上のコードに合わせます.

    ステップヘルプ🔴 Githubを使用してフォームを構築する


    私はGitHubの問題のフォームについて好きな1つのことは、あなたのテンプレートを構築して動けなくなる場合は、githubはあなたを助けるのはかなり良いです.たとえば、コードをコミットし、特定の要素を追加するのを忘れてしまった場合、Githubは次のようなエラーを与えます.

    このエラーは、私のフォームの4番目の要素を意味しますbody[4] ) 行方不明者options . 我々が戻って、コードを比較するならば、私は第四の要素がcheckboxes フォームの末尾にあります.

    私がする必要があるのは、このようなオプションを追加することです.

    このすべてが本当に怖い、またはどこを起動するか、またはエラーを修正する方法を確認していない場合は、githubを助けることができます.テンプレートを右側に作成したら、いくつかのオプションが表示されます.

    この便利な設定ヘルパーは、YAMLファイルに含める必要のある情報を提供します.コピーと貼り付け、情報の多くのコードスニペットがあります.これは、これらの問題のフォームを構築することがはるかに簡単に役立つすべてのフィールドについて説明します.

    Github問題のフォームはまだベータ版です


    たった今現在(8月8日)、Github問題フォームは、まだベータ版です.
    あなたがこれと問題テンプレートを読んでいるならば、ベータ版はまだありますBeta YAMLファイルを作成したときのタグ.フィードバックは常にスーパー歓迎であり、私はGithubチームがフィードバックとすべての提案のすべての単一の部分を読み取ることを約束する.
    Github問題のフォーム、またはその他の機能についてのフィードバックをしたい場合はour Discussions Feedback .
    どのようにGithubの問題を使用するのですか?
    クラスベース
    Oracle FlashBackの概要