> For the complete documentation index, see [llms.txt](https://helps.ptengine.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://helps.ptengine.com/cn/experience/campaign/code-mode.md).

# 代码模式的使用方法

可视化编辑器搞不定的改动——复杂交互、自定义样式——可以用代码模式直接写 HTML / JavaScript / CSS。

***

## 开始之前 <a href="#before-you-start" id="before-you-start"></a>

* 代码模式写的内容会**在访客的页面上实际执行**，发布前务必用[体验预览](/cn/experience/campaign/preview.md)确认
* 改动在**页面加载完成之后**才执行，这决定了它适合改什么、不适合改什么（见下方注意事项）
* 不确定改动是否安全时，先复制一个体验在测试参数下验证，见 [体验预览](/cn/experience/campaign/preview.md) 的方法二

***

## 两个入口 <a href="#code-mode-editing-locations" id="code-mode-editing-locations"></a>

### 入口一：页面编辑器里的“代码模式” <a href="#code-mode-in-the-page-editing-editor" id="code-mode-in-the-page-editing-editor"></a>

点按钮展开代码模式的设置界面，JavaScript 和 CSS 各有独立的输入框。

{% hint style="danger" %}
**JavaScript 不要带 `<script>` 标记。**

```javascript
// ❌ 错误
<script>
function myFunction() {
  console.log("Hello, World!");
}
</script>

// ✅ 正确
function myFunction() {
  console.log("Hello, World!");
}
```

{% endhint %}

### 入口二：元素菜单里的“编辑HTML” <a href="#edit-html-item-in-the-menu-bar" id="edit-html-item-in-the-menu-bar"></a>

在页面上点中某个元素，会弹出菜单栏，其中的“编辑HTML”可以针对**这一个元素**进入代码模式。

***

## 两个坑 <a href="#important-notes" id="important-notes"></a>

### 1. 别引第三方库 <a href="#third-party-libraries" id="third-party-libraries"></a>

**为什么**：额外的库会拖慢加载，体验本身的表现也跟着下降。

**怎么办**：用原生 JavaScript，代码写到够用就行。

### 2. 别用 JS 改首屏元素 <a href="#above-the-fold" id="above-the-fold"></a>

**为什么**：JavaScript 的改动是在页面加载完成后才执行的。首屏元素用户一进来就看见，很可能**先看到原内容、再突然变成新内容**——闪一下，体验比不改还差。

**怎么办**：首屏的改动交给可视化编辑器（配合防闪烁），JavaScript 留给页面下部或懒加载的元素。

关于防闪烁，见 [A/B 测试的高级设置](/cn/experience/campaign/create-new-2/advanced-settings.md)。

***

## 做完之后怎么确认 <a href="#verify" id="verify"></a>

* 用[体验预览](/cn/experience/campaign/preview.md)在真实页面上看一遍，重点看有没有闪烁
* 打开浏览器的开发者工具 Console，确认没有报错
* 页面编辑没生效 → [编辑器无法打开](/cn/faq/experience-edit/editor-not-opening.md)、[体验无法正常显示](/cn/faq/experience-edit/campaign-not-displaying.md)

***

## 相关页面 <a href="#related-pages" id="related-pages"></a>

* [编辑器的使用方法](/cn/experience/campaign/create-new/editor-usage.md)
* [HTML 编辑](/cn/experience/campaign/create-new/notes-html.md)
* [A/B 测试的高级设置](/cn/experience/campaign/create-new-2/advanced-settings.md) — 防闪烁
* [体验预览](/cn/experience/campaign/preview.md)