UIkit3.x文档

迁移

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


从UIkit 3.1迁移到3.2

文本组件

由于UIkit 3.2向Text组件添加了新的 uk-text-bolder 类,因此 uk-text-bold 类现在从字面上应用了 bold 代替 bolder。之前用来设置文本为粗体的 @text-bold-font-weight 变量被删除。


从UIkit 3.0迁移到3.1

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

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

@deprecated: true;

Heading(标题)组件

标题组件 中的Primary和Hero类已经被弃用。 通过替换以下类来更新您的标记。

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元素的列表。通过易于理解的示例来说明复杂的更改。迁移的最佳方法是挨个修复每个组件。这样,您可以看到重新加载后错误消息是否消失,还可以看到站点上的更改。

Warnings(警告)

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

Notices(通知)

通知突出显示了可能不会破坏站点的潜在问题。有些通知可能根本不需要更改。这是由于UIKIT 2中的一些名称仍然存在于UIKIT 3中,但现在属于不同的组件或携带不同的语义。我们用于确定这是否是正确标记的选择器无法检测到该标记,因此需要对其进行检查,并确定是否已更改或仍需要修复它。