---
title: โค้ดกำหนดเองและโค้ดสแนิปเพตกับ GitHub
slug: th/user-guides/2-rW-github
description: เรียนรู้วิธีผสานรวมบัญชี Archbee ของคุณกับ GitHub เพื่อซิงก์โค้ดกำหนดเองและ CSS ของคุณอย่างราบรื่น ทำตามคำแนะนำทีละขั้นตอนเพื่อกำหนดไฟล์ 'archbee.json' ในที่เก็บ GitHub ของคุณและเพิ่มโค้ดหรือ CSS กำหนดเองได้อย่างง่ายดาย Archbee รับประกันว่า 
createdAt: 2023-01-18T08:31:59.000Z
---

การผสานรวมกับ GitHub ช่วยให้คุณซิงก์ [โค้ดกำหนดเอง](docId\:aPYZRjeY39Et52VoCYJCC):  [customCSS](docId\:W8XuW2qnM2C_eHJjPMvh4), **customJS**, **footerTemplate**, **headerTemplate**, โดยตรงจากที่เก็บ GitHub ตัวแปรเหล่านี้สามารถเป็นข้อความดิบหรือเชื่อมโยงไปยังไฟล์จากโฟลเดอร์ `root` ได้

คุณเพียงแค่ต้องกำหนดไฟล์ `archbee.json` ใน repo ของคุณ และเพิ่มโค้ดกำหนดเองหรือ CSS กำหนดเอง เช่นในตัวอย่างนี้:

:::CodeblockTabs
archbee.json

```json
{
  "root": "docfolderwithsummary",
  "structure": {
    "summary": "summary.md",
    "assets": ".archbee/assets"
  },
  "customJS":"custom.js",
  "customCSS":"* \n {  font-family: \"Comic Sans MS\", cursive, sans-serif; }",
  "footerTemplate": "",
  "headerIncludes": ""
}
```

summary.md

```none
# Table of contents

- [Introduction](introduction.md)

## Walkthroughs

- [Installing](walkthroughs/01-installing-app.md)
- [Adding Event Handlers](walkthroughs/02-adding-event-handlers.md)
- [Defining Custom Elements](walkthroughs/03-defining-custom-elements.md)

## Docs

- [Configuring](docs/01-configuring-app.md)
- [Adding info](docs/02-adding-info.md)
- [Starting App ](docs/03-starting-app.md)
```

custom.js

```markdown
window._archbee = window._archbee || {
  queue: [],
  push: function (x) {window._archbee.queue.push(x)}
};

window._archbee.push({
  eventType: "init",
  spaceId: "PUBLISHED-0AUu0NJ_zFLC52lH2Yy5U",
});
```
:::

หากคุณส่งโค้ดไปยัง GitHub, Archbee จะอ่านการกำหนดค่าจาก `archbee.json` ไฟล์และอัปเดต **การตั้งค่า Space -> โค้ดกำหนดเอง **ส่วนด้วยโค้ดใหม่ของคุณ

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/eoeIwuvZ0mtjJpZRtOcSk_github-customcode-light.png "โค้ดกำหนดเองในการตั้งค่า Space")

## ตัวอย่างโค้ด

คุณสามารถเพิ่มตัวอย่างโค้ดใน GitHub repo ของคุณได้ เพียงแค่ต้องกำหนดค่าไว้ใน `config.md` ไฟล์นั้น

:::hint{type="warning"}
ไฟล์ `config.md` จะต้องอยู่ในโฟลเดอร์เดียวกับไฟล์ `summary.md` ด้วย
:::

ด้านล่างนี้คือตัวอย่างไฟล์ `config.md` :

:::CodeblockTabs
config.md

```markdown
## use a file relative to  docsPath folder
::use{file="swagger-v2.json#L2"}

## relative path to repo structure
::use{file="/app/package.json#L1-L5"}

## relative path to docsPath folder
::use{file="../app/package.json#L1-L5"}

## one single line
::use{file="../app/package.json#L5"}

## specify syntax, from and to parameters explicitly
::use{file="swagger-v2.json" from="L6" to="L10" syntax="javascript"}

```
:::

### ตัวอย่าง

สมมติว่าคุณมีไฟล์ `package.json` ด้านล่างนี้ (จากตัวอย่างด้านบน):

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/cS_lk0o5MtUDGpk-qzVbk_github-codesnippets-light.png "ตัวอย่างโค้ดสเนิป")

และยังมีไฟล์ `config.md` ด้วย:

:::CodeblockTabs
config.md

```markdown
## specify syntax, from and to parameters explicitly
::use{file="swagger-v2.json" from="90" to="127" syntax="javascript"}

```
:::

คุณจะเห็นสิ่งต่อไปนี้ในเอกสาร Archbee หลังจากการนำเข้า:

```javascript
      "post": {
        "tags": ["pet"],
        "summary": "Add a new pet to the store",
        "description": "",
        "operationId": "addPet",
        "consumes": ["application/json", "application/xml"],
        "produces": ["application/json", "application/xml"],
        "parameters": [
          {
            "in": "body",
            "name": "body",
            "description": "Pet object that needs to be added to the store",
            "required": true,
            "schema": {
              "$ref": "#/definitions/Pet"
            }
          }
        ],
        "responses": {
          "200": {
            "description": "Success!"
          },
          "405": {
            "description": "Invalid input"
          }
        },
        "security": [
          {
            "api_key": []
          },
          {
            "petstore_auth": ["write:pets", "read:pets"]
          }
        ]
      },
```