---
title: 着陆页模板
slug: docs/cn/PUJx1h7l80S3g-twou1xs
description: 了解如何使用 Archbee 的白标着陆页模板为您的文档门户创建专业且具有品牌风格的着陆页。本文档提供了使用自定义代码（包括 HTML、CSS 和 JavaScript） 的分步指南。
createdAt: 2023-06-07T10:11:09.000Z
---
Archbee 提供 white label 的 Landing Page 模板，因此您可以轻松为您的文档门户创建品牌化的 landing page
# 如何获取 Custom Code
::::WorkflowBlock
:::WorkflowBlockItem
从我们的 GIT 仓库获取（即将推出）
:::
:::WorkflowBlockItem
从我们的文档中将 custom code 复制粘贴到 Space Settings
[模板 1](docId\:DLTo_WYuuCb8-a-LmH24X)
[模板 2](docId\:R0MKpvK4GWiZTNrqxK1kc)
:::
::::
# 如何使用
要设置 Custom Landing Page，您必须将我们的 custom code 复制到 Space Settings -> Custom Code 和 Landing Page 部分。
每个模板您将拥有 3 个文件： `index.html`, `script.js` 和 `style.css`
每个模板的 3 个文件可在下方找到：
- [模板 1](docId\:DLTo_WYuuCb8-a-LmH24X)
- [模板 2](docId\:R0MKpvK4GWiZTNrqxK1kc)
::::WorkflowBlock
:::WorkflowBlockItem
## Include Headers 选项卡
复制 `包含头部` 部分，从 `index.html`
将其粘贴到 `包含头部` 部分，位置为 **空间设置 -> 定制代码**
确保其包含 `` 标签，然后按 `保存`
:::
:::WorkflowBlockItem
## Custom CSS 选项卡
复制 `stlye.css` 文件的内容
并将其添加到 Space Settings -> Custom Code 中的 `定制CSS` 部分。确保它们被包含在 `` 标签中。
样式代码从几个变量声明开始，可用于轻松更改页面的主题：
```css
:root {
--accent-text: #2166ae;
--secondary-text: #0a4563;
--primary-text: #24292e;
--background-color: #fff;
--primary-link: #999;
--accent-link: var(--accent-text);
--header-title-color: #fff;
--header-subtitle-color: #fff;
}
```
:::
:::WorkflowBlockItem
## Custom JavaScript
复制来自 `script.js`
将其添加到 Space Settings -> Custom Code 中的 `定制 Javascript` 部分
确保它们包含在 `` 标签中。
:::
:::WorkflowBlockItem
## Landing page HTML
复制来自 `index.html` 的 HTML 代码，从 `