---
title: 定制代码与代码片段集成 GitHub
slug: docs/cn/OL3N-github
description: 了解如何将 Archbee 账号与 GitHub 集成，以无缝同步您的定制代码和 CSS。按照分步指南在 GitHub 仓库中定义“archbee.json”文件，并轻松添加您的定制代码或 CSS。Archbee 会确保任何
createdAt: 2023-01-18T08:31:59.000Z
---

与 GitHub 的集成允许您同步 [定制代码](docId\:ftvE42JX9E0oR9R8fkc41):  [customCSS](docId\:HwaVyLPvK550B8cHVZJNV), **customJS**, **footerTemplate**, **headerTemplate**, 直接来自 GitHub 仓库。这些变量可以是原始文本，也可以链接到 `根` 文件夹中的文件。

您只需要在仓库中定义 `archbee.json` 文件，并添加您的自定义代码或自定义 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` 文件中读取配置，并自动使用您的新代码更新 **空间设置 -> 定制代码**部分。

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/eoeIwuvZ0mtjJpZRtOcSk_github-customcode-light.png "Space 设置中的自定义代码")

## 代码片段

您可以在 GitHub 仓库中添加代码片段，只需在 `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"]
          }
        ]
      },
```