---
title: "一个新网站"
description: "我们很高兴发布全新的 nuxt.com，它由 Nuxt UI 驱动，并且现在已开源。"
canonical_url: "https://nuxt.zhcndoc.com/blog/new-website"
---
# 一个新网站

> 我们很高兴发布全新的 nuxt.com，它由 Nuxt UI 驱动，并且现在已开源。

当您想学习 Nuxt 时，[Nuxt.com](http://Nuxt.com) 是主要入口点。每个月有**超过 30 万访问者**，是时候给它一个新的外观和感觉了。

## 新设计

我们回到了 Nuxt 的原始颜色，深蓝色背景（`#020420`）和特色的鲜绿色（`#00DC82`）。

::nuxt-img
```yaml [props]
src: https://nuxt.zhcndoc.com/assets/blog/website/nuxt-website.png
alt: Nuxt 网站截图
width: '832'
height: '497'
class: rounded-lg border border-gray-700
```
::

::read-more{to="https://nuxt.zhcndoc.com/design-kit" icon="i-lucide-palette"}
探索 **Nuxt 设计工具包** 以及我们的 **徽标历史**。
::

我们希望在所有官方文档中实现一致的设计：

::div{.grid.sm:grid-cols-2.gap-4}
  :::nuxt-link{to="https://image.nuxt.com" target="_blank" .hover:border-transparent}
    ::::nuxt-img
    ```yaml [props]
    src: https://nuxt.zhcndoc.com/assets/blog/website/nuxt-image.png
    alt: Nuxt 图片
    width: '408'
    height: '255'
    class: m-0 border rounded-md border-gray-700
    ```
    ::::
  :::

  :::nuxt-link{to="https://content.nuxt.com" target="_blank" .hover:border-transparent}
    ::::nuxt-img
    ```yaml [props]
    src: https://nuxt.zhcndoc.com/assets/blog/website/nuxt-content.png
    alt: Nuxt 内容
    width: '408'
    height: '255'
    class: m-0 border rounded-md border-gray-700
    ```
    ::::
  :::

  :::nuxt-link{to="https://devtools.nuxt.com" target="_blank" .hover:border-transparent}
    ::::nuxt-img
    ```yaml [props]
    src: https://nuxt.zhcndoc.com/assets/blog/website/nuxt-devtools.png
    alt: Nuxt DevTools
    width: '408'
    height: '255'
    class: m-0 border rounded-md border-gray-700
    ```
    ::::
  :::

  :::nuxt-link{to="https://ui.nuxt.com" target="_blank" .hover:border-transparent}
    ::::nuxt-img
    ```yaml [props]
    src: https://nuxt.zhcndoc.com/assets/blog/website/nuxt-ui.png
    alt: Nuxt UI
    width: '408'
    height: '255'
    class: m-0 border rounded-md border-gray-700
    ```
    ::::
  :::
::

我们非常喜欢这个新设计，希望您也喜欢。**这只是向网站迈出的第一步，还有很多改进正在到来。**

## 改进的导航

从现在开始，您可以轻松在五个主要文档类别之间切换：

::video{poster="https://res.cloudinary.com/nuxt/video/upload/v1697548111/nuxt3/nuxt-website-docs-nav.jpg" controls .rounded.dark:border.dark:border-gray-700}
  :::source{src="https://res.cloudinary.com/nuxt/video/upload/v1697548111/nuxt3/nuxt-website-docs-nav.webm" type="video/webm"}
  :::

  :::source{src="https://res.cloudinary.com/nuxt/video/upload/v1697548111/nuxt3/nuxt-website-docs-nav.mp4" type="video/mp4"}
  :::

  :::source{src="https://res.cloudinary.com/nuxt/video/upload/v1697548111/nuxt3/nuxt-website-docs-nav.ogg" type="video/ogg"}
  :::
::

在右侧，您可以看到目录，以及社区快捷方式：编辑此页面，在 Discord 上聊天等等。

::video{poster="https://res.cloudinary.com/nuxt/video/upload/v1697549697/nuxt3/nuxt-website-docs-aside.jpg" controls .rounded.dark:border.dark:border-gray-700}
  :::source{src="https://res.cloudinary.com/nuxt/video/upload/v1697549697/nuxt3/nuxt-website-docs-aside.webm" type="video/webm"}
  :::

  :::source{src="https://res.cloudinary.com/nuxt/video/upload/v1697549697/nuxt3/nuxt-website-docs-aside.mp4" type="video/mp4"}
  :::

  :::source{src="https://res.cloudinary.com/nuxt/video/upload/v1697549697/nuxt3/nuxt-website-docs-aside.ogg" type="video/ogg"}
  :::
::

## 源代码按钮

在查看 Nuxt 内置的 [组件](https://nuxt.zhcndoc.com/docs/api/components)、[组合函数](https://nuxt.zhcndoc.com/docs/api/composables)、[工具](https://nuxt.zhcndoc.com/docs/api/utils)、[命令](https://nuxt.zhcndoc.com/docs/api/commands)和[工具包](https://nuxt.zhcndoc.com/docs/api/kit)时，您现在可以通过点击 :u-button{size="xs" color="gray" icon="i-simple-icons-github"}[源代码] 按钮跳转到源代码。

::nuxt-img
```yaml [props]
src: https://nuxt.zhcndoc.com/assets/blog/website/nuxt-website-source-button.png
alt: Nuxt 源代码按钮
width: '818'
height: '343'
class: border rounded border-gray-700
```
::

::read-more{to="https://nuxt.zhcndoc.com/docs/api/components/nuxt-link"}
在 `<NuxtLink>` 文档页面上查看一个示例。
::

## 改进的搜索功能

您可能会注意到在按下 :kbd{value="meta"} :kbd{value="K"} 时出现了一个新的模态窗口。我们结合 Nuxt UI [`<CommandPalette>`](https://ui.nuxt.com/components/command-palette) 组件和 Nuxt Content 数据（搜索和导航）来提供更好的搜索体验。

通过命令面板，您可以：

- 跳转到一个页面
- 在文档中搜索
- 搜索一个模块
- 切换颜色模式

我们计划很快添加更多命令。

::video{poster="https://res.cloudinary.com/nuxt/video/upload/v1697550571/nuxt3/nuxt-website-search.jpg" controls .rounded.dark:border.dark:border-gray-700}
  :::source{src="https://res.cloudinary.com/nuxt/video/upload/v1697550571/nuxt3/nuxt-website-search.webm" type="video/webm"}
  :::

  :::source{src="https://res.cloudinary.com/nuxt/video/upload/v1697550571/nuxt3/nuxt-website-search.mp4" type="video/mp4"}
  :::

  :::source{src="https://res.cloudinary.com/nuxt/video/upload/v1697550571/nuxt3/nuxt-website-search.ogg" type="video/ogg"}
  :::
::

## 迁移到 Nuxt UI

新的网站由我们为 Nuxt 定制的 [Nuxt UI](https://ui.nuxt.com) 动力驱动，它是基于 [Tailwind CSS](https://tailwindcss.com) 和 [Headless UI](https://headlessui.com/) 构建的 UI 库。

该网站还使用了 [Nuxt UI Pro](https://ui.nuxt.com/pro)，这是一个在 Nuxt UI 之上构建的一套高级组件，可在几分钟内创建美观且响应式的 Nuxt 应用程序。

它包括诸如 `<UHeader>`、`<UFooter>`、`<ULandingHero>`、`<ULandingCard>` 等组件。

::note
我们计划在 10 月底推出 Nuxt UI Pro 的完整文档。如果您迫不及待并想要提前访问，请立即 [购买许可证](https://ui.nuxt.com/pro/purchase)，并获得对我们 GitHub 上的私有存储库的访问权限。
::

这次 [迁移](https://github.com/nuxt/nuxt.com/pull/1365) 是一个改进 Nuxt UI 和 UI Pro 并修复一些错误的绝佳机会，差异为 [+9,004]{.text-primary} / [-23,113]{.text-error} 行代码的变化。

::read-more{to="https://ui.nuxt.com" icon="i-simple-icons-nuxtdotjs" target="_blank"}
阅读更多关于 **Nuxt UI** 的内容。
::

## 开放图形图片

我们非常喜欢在社交媒体上分享链接时有一张自定义图片。因此，我们在所有文档页面上都添加了 OG 图像。

示例：[安装页面](https://nuxt.zhcndoc.com/docs/getting-started/installation)。

![Nuxt OG 图像](https://nuxt.zhcndoc.com/__og-image__/image/docs/getting-started/introduction/og.png){width="1200" height="630" .border.rounded.border-gray-700}::read-more{to="https://nuxtseo.com/og-image/getting-started/installation" target="_blank"}
了解 **Nuxt OG 图像** 模块。
::

## 在 GitHub 上可用

我们自豪地宣布，这个网站现在是**开源的**，并在 GitHub 上可用。

::read-more
```yaml [props]
to: https://github.com/nuxt/nuxt.com
icon: i-simple-icons-github
color: gray
target: _blank
```
在 GitHub 上查看 `nuxt/nuxt.com`。
::

## 接下来是什么？

这个新网站是即将到来的变化的开始，其中一些变化是：

- 团队和贡献者页面
- 集成页面，展示 Nuxt 的所有可能性：托管、CMS、数据库等。
- 模板页面（目前为 [nuxt.new](https://nuxt.new)），列出官方和社区的起始页
- 等等...

**我们期待您在 [Twitter](https://x.com/nuxt_js)、[Discord](https://discord.com/invite/nuxt) 或 [GitHub](https://github.com/nuxt/nuxt.com) 上的反馈**。

谢谢您阅读这篇博文，祝您使用 Nuxt 开心 🤟


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.