迁移/Migration

将现有的UIkit网站迁移到最新版本。


从UIkit 3.4迁移到3.5

在UIkit 3.5中,名称中带有 xxlarge 的所有Less变量和类名都被重命名为 2xlarge ,以实现更好的一致性。 如果使用自定义的Less主题,只需查找并替换这些Less变量。 Width 组件 中只有一个类,必须在您的标记中进行更新。

Class 替换为
uk-width-xxlarge uk-width-2xlarge

从UIkit 3.2迁移到3.3

UIkit 3.3向 Container 组件 添加了一个新的 uk-container-xlarge class,其默认值为 1600px 。 这就是为什么类 uk-container-large 将其宽度从 1600px 更改为 1400px的原因。 通过替换以下类来更新您的标记。

Class 替换为
uk-container-large uk-container-xlarge

从UIkit 3.1迁移到3.2

文字组件

由于UIkit 3.2向 Text 组件 添加了新的 uk-text-bolder class,因此 uk-text-bold 类现在按字面意义应用了 bold 字体而不是 bolder。 设置为 bolder@text-bold-font-weight 变量被删除。


从UIkit 3.0迁移到3.1

UIkit 3.1添加了 @deprecated Less变量。 默认情况下,它设置为 false,并且不推荐使用的类不会编译到CSS中。

如果要稍后更新标记,并在新的标记中使用不推荐使用的类,请在自定义UIkit主题中将变量设置为 true

@deprecated: true;

Heading 组件

Heading 组件中的 PrimaryHero class已弃用。 通过替换以下类来更新您的标记。

Class 替换为
uk-heading-primary uk-heading-medium
uk-heading-hero uk-heading-xlarge

从UIkit 2迁移到3

Uikit 3提供了一个可在您的浏览器中运行的迁移工具,并列出了现有Uikit 2站点中的所有必要更改。 有两个选项可运行该工具:通过书签或包括单个JavaScript文件。 然后,必要的迁移更改将在浏览器的控制台中列出。

浏览器书签

使用迁移工具的最简单方法是通过浏览器中的书签。 然后,您可以通过单击书签在浏览到的任何页面上运行脚本。 只需将以下链接拖到浏览器的书签部分即可。

拖入书签栏 UIkit 3 迁移

或者,您可以使用以下代码作为URL手动创建书签。

javascript: (function () {
    var script = document.createElement('script');
    script.setAttribute('src', 'https://getuikit.com/migrate.min.js');
    document.body.appendChild(script);
}());

HTML整合

您还可以通过在网站上加载所需的JavaScript来运行迁移工具。 这样,迁移脚本将始终加载到您的网站上。 完成迁移后,请记住将其删除。 在结束标记 </body> 之前添加以下行。

<script src="https://getuikit.com/migrate.min.js"></script>

用法

要开始迁移,请用等效的UIkit 3(JS和CSS)替换网站的UIkit 2文件,然后使用上面列出的解决方案之一运行迁移工具。 要了解如何更改标记,请打开浏览器的开发者控制台。 您会看到警告和注意事项列表,告诉您要进行的更改。 您可以单击任何消息旁边的箭头以查看有关必要更改的更多详细信息。

Console output

每条通知或警告消息都会告诉您要进行哪些更改,包括所有受影响的HTML元素的列表。 通过易于理解的示例说明了更复杂的更改。 迁移的最佳方法是修复一个组件。 这样,您可以查看重新加载后错误消息是否消失,还可以查看站点上的更改。

警告事项

警告会突出显示所有不再支持或已在UIkit 3中更改的CSS类或JavaScript属性。必须修正这些警告才能将您的网站迁移到UIkit 3。

告示

通知会突出显示可能不会破坏您的网站的潜在问题。 有些通知可能根本不需要更改。 这是因为UIkit 2中仍然存在UIkit 2中的某些名称,但是现在它们属于不同的组件或具有不同的语义。 我们用来确定这是否是正确标记的选择器无法检测到这一点,因此您需要仔细研究一下,并确定是否已经更改或仍需要对其进行修复。

上一篇: Rtl

下一篇: Accordion

migration.md

# 迁移/Migration

<p class="uk-text-lead">将现有的UIkit网站迁移到最新版本。</p>

***

## Migration from UIkit 3.4 to 3.5-从UIkit 3.4迁移到3.5
 
在UIkit 3.5中,名称中带有 `xxlarge` 的所有Less变量和类名都被重命名为 `2xlarge` ,以实现更好的一致性。 如果使用自定义的Less主题,只需查找并替换这些Less变量。 [Width 组件](width) 中只有一个类,必须在您的标记中进行更新。

| Class              | 替换为       |
| ------------------ | ------------------ |
| `uk-width-xxlarge` | `uk-width-2xlarge` |


***

## Migration from UIkit 3.2 to 3.3-从UIkit 3.2迁移到3.3

UIkit 3.3向 [Container 组件](container) 添加了一个新的 `uk-container-xlarge` class,其默认值为 `1600px` 。 这就是为什么类 `uk-container-large` 将其宽度从 `1600px` 更改为 `1400px`的原因。 通过替换以下类来更新您的标记。

| Class                | 替换为          |
| -------------------- | --------------------- |
| `uk-container-large` | `uk-container-xlarge` |

***

## Migration from UIkit 3.1 to 3.2-从UIkit 3.1迁移到3.2

### 文字组件

由于UIkit 3.2向 [Text 组件](text) 添加了新的 `uk-text-bolder` class,因此 `uk-text-bold` 类现在按字面意义应用了 `bold` 字体而不是 `bolder`。 设置为 `bolder` 的 `@text-bold-font-weight` 变量被删除。

***

## Migration from UIkit 3.0 to 3.1-从UIkit 3.0迁移到3.1

UIkit 3.1添加了 `@deprecated` Less变量。 默认情况下,它设置为 `false`,并且不推荐使用的类不会编译到CSS中。 

如果要稍后更新标记,并在新的标记中使用不推荐使用的类,请在自定义UIkit主题中将变量设置为 `true`。

```
@deprecated: true;
```

### Heading 组件

[Heading 组件](heading)中的 _Primary_ 和 _Hero_ class已弃用。 通过替换以下类来更新您的标记。

| Class                | 替换为        |
| -------------------- | ------------------- |
| `uk-heading-primary` | `uk-heading-medium` |
| `uk-heading-hero`    | `uk-heading-xlarge` |

***

## Migration from UIkit 2 to 3-从UIkit 2迁移到3

Uikit 3提供了一个可在您的浏览器中运行的迁移工具,并列出了现有Uikit 2站点中的所有必要更改。 有两个选项可运行该工具:通过书签或包括单个JavaScript文件。 然后,必要的迁移更改将在浏览器的控制台中列出。

### 浏览器书签

使用迁移工具的最简单方法是通过浏览器中的书签。 然后,您可以通过单击书签在浏览到的任何页面上运行脚本。 只需将以下链接拖到浏览器的书签部分即可。

拖入书签栏 <span uk-icon="icon: arrow-right"></span> <a class="uk-button uk-button-primary" href="javascript: (function () { var script = document.createElement('script'); script.setAttribute('src', 'https://getuikit.com/migrate.min.js'); document.body.appendChild(script); }());">UIkit 3 迁移</a>

或者,您可以使用以下代码作为URL手动创建书签。

```js
javascript: (function () {
    var script = document.createElement('script');
    script.setAttribute('src', 'https://getuikit.com/migrate.min.js');
    document.body.appendChild(script);
}());
```

### HTML整合

您还可以通过在网站上加载所需的JavaScript来运行迁移工具。 这样,迁移脚本将始终加载到您的网站上。 完成迁移后,请记住将其删除。 在结束标记 `</body>` 之前添加以下行。

```html
<script src="https://getuikit.com/migrate.min.js"></script>
```

### 用法

要开始迁移,请用等效的UIkit 3(JS和CSS)替换网站的UIkit 2文件,然后使用上面列出的解决方案之一运行迁移工具。 要了解如何更改标记,请打开浏览器的开发者控制台。 您会看到警告和注意事项列表,告诉您要进行的更改。 您可以单击任何消息旁边的箭头以查看有关必要更改的更多详细信息。

![Console output](images/migration-console.gif)

每条通知或警告消息都会告诉您要进行哪些更改,包括所有受影响的HTML元素的列表。 通过易于理解的示例说明了更复杂的更改。 迁移的最佳方法是修复一个组件。 这样,您可以查看重新加载后错误消息是否消失,还可以查看站点上的更改。

### 警告事项

警告会突出显示所有不再支持或已在UIkit 3中更改的CSS类或JavaScript属性。必须修正这些警告才能将您的网站迁移到UIkit 3。

### 告示

通知会突出显示可能不会破坏您的网站的潜在问题。 有些通知可能根本不需要更改。 这是因为UIkit 2中仍然存在UIkit 2中的某些名称,但是现在它们属于不同的组件或具有不同的语义。 我们用来确定这是否是正确标记的选择器无法检测到这一点,因此您需要仔细研究一下,并确定是否已经更改或仍需要对其进行修复。