Nuxt3_2_SEO and Meta+Transitions

1. SEO and Meta

使用强大的head配置、可组合组件和组件来改善nuxt应用的SEO。

• nuxt开箱即用，提供了相同的默认值，如果需要，你可以覆盖这些默认值。
  • charset: utf-8
  • viewport: width=device-width, initial-scale=1

可以在nuxt.config.ts中进行使用：

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  app: {
    head: {
      charset: 'utf-8',
      viewport: 'width=device-width, initial-scale=1'
    }
  }
})

在nuxt.config.js中提供app.head属性可以让你自定义整个应用的头部，这个方法不允许提供响应数据，建议在app.vue中使用useHead()方法。

1.1 useHead()

useHead可组合功能允许以编程式、响应式的方式管理head标记，由Unhead提供支持。
与所有组合式一样，他只能用于script setup中使用像生命周期hooks用法那样

index.vue

• 我们之前在开发PC/M站时，在不同的页面总要展示不同的title等meta信息，此功能刚好适用。

1.2 useHeadSafe()

useHeadSafe事故useHead外部再进行一次包装，将输入限制为只允许安全的值输入。

useHeadSafe({
  script: [
    { id: 'xss-script', innerHTML: 'alert("xss")' }
  ],
  meta: [
    { 'http-equiv': 'refresh', content: '0;javascript:alert(1)' }
  ]
})

// Will safely generate
// 
// 

但同样的代码放在useHead中，就可以完整的被执行，会有风险。

1.3 useSeoMeta 和 useServerSeoMeta

useSeoMeta和useServerSeoMeta组合式函数可以让你将网站的SEO 元标签定义成一个平面对象，并具有完整的typescript支持。这样可以避免拼写错误和常见错误，例如使用name 而不是 property。

• 官方示例

• 业务场景示例：若你有一个商品详情页面，不同的商品meta title是商品的名称，那么可以如下操作：

这样我们可以看到的效果是：当我们跳转至对应商品页面时，就会展示对应的title和description。

• 像useSeoMeta一样，useServerSeoMeta让网站的SEO标签定义为具有完整typescript支持的平面对象。在大多数情况下，meta不需要响应，因为机器人只会扫描初始负载。因为，建议使用useServerSeoMeta作为一个以性能为重点的应用程序，它不会在客户机上做任何事情（或返回一个head对象），参数与useSeoMeta完全相同。

1.4 Components

1.4.1 介绍

• nuxt提供了 this is about pages

此时在about页面上，我们可以看到对应标签生效后的全部内容。例如：网页title变为了我们设置的’About 自定义title’，页面的整体背景颜色变为了绿色。

1.4.3 使用场景

在业务场景中的应用，我们可以全局设置整个应用的meta数据，形成一个整体的风格，但是在一些活动页面/介绍页面，可以有所不同，此时就可以在活动/介绍组件中，通过上述方式，对meta元数据进行自定义设置。

1.5 Types

下面是用于useHead、app.head和组件的非响应式类型。

interface MetaObject {
  title?: string
  titleTemplate?: string | ((title?: string) => string)
  templateParams?: Record>
  base?: Base
  link?: Link[]
  meta?: Meta[]
  style?: Style[]
  script?: Script[]
  noscript?: Noscript[];
  htmlAttrs?: HtmlAttributes;
  bodyAttrs?: BodyAttributes;
}

1.6 特性(Features)

1.6.1 响应式(Reactivity)

• 所有属性都支持响应式，例如computed、getter和reactive方式。
• 建议使用getter (() => value)而不是computed(computed(() => value))。

1.6.2 Title Template

• 可以使用titleTemplate选项提供一个动态模板，用于自定义网站的标题。例如，将网站名称添加到每个页面标题中。
• titleTemplate可以是字符串(其中%s)会被标题替换，也可以是函数
• 如果你想使用一个函数（用于完全控制）, 就不能再nuxt.config中设置，需要在app.vue中进行设置，这样会应用到网站上的所有页面。

app.vue中对于整个项目title的设置

如果在页面中设置过title，那么会在这个后面拼接上 Ably App， 否则直接展示 Ably App

1.6.3 Body Tags

可以在标签上使用tagPosition: 'bodyClose'选项，将他们附加到标签的末尾

例如，我们可以通过这种方式引入第三方库，或者插件。

1.7 Examples 官方示例

1.7.1 With definePageMeta

• 在您的pages/目录中，您可以使用definePageMeta和useHead来基于当前路由设置元数据。
• 例如，你可以首先设置当前页面标题(这是在构建时通过宏提取的，所以它不能动态设置):

• 之后在你的布局文件中，你可能会使用之前设置的路由元数据

1.7.2 动态标题（Dynamic Title）

在下面的例子中，titleTemplate要么被设置为带有%s占位符的字符串，要么被设置为一个函数，这样可以更灵活地为nuxt应用的每个路由动态设置页面标题

1.7.3 内部CSS（External CSS）

下面的例子展示了如何使用useHead的link属性或使用< link >组件来启用Google Fonts:

- 方式一：Components方式







- 方式二：useHead 方式

2. Transitions

nuxt利用Vue的transition组件在页面和布局之间应用过渡动画

2.1 Page Transitions

可以启用页面转换对所有页面应用自动进行过渡

2.1.1 全局动画

• 在nuxt.config.ts中配置过渡动画选项

export default defineNuxtConfig({
  app: {
    pageTransition: { name: 'page', mode: 'out-in' }
  },
})

• 在app.vue中配置选项执行的动画效果

• 这样再次切换页面时，我们就可以看到生动的动画效果啦

效果视频审核中

2.1.2 局部动画

• 要为页面设置不同的过渡，可以在页面的definePageMeta中设置pageTransition 键
• 例如在About.vue中设置单独的页面效果

此时在app.vue中定义rotate动画效果

.rotate-enter-active,
.rotate-leave-active {
  transition: all 0.4s;
}
.rotate-enter-from,
.rotate-leave-to {
  opacity: 0;
  transform: rotate3d(1, 1, 1, 15deg);
}

这样去about页面，我们就可以看到最新的效果啦

2.1.3 动画设置

我们在定义动画时可以看到，无论是在nuxt.config.ts中定义pageTransition，还是在definePageMeta中定义pageTransition，都有一个name，是这个动画的名称。在定义动画时，与vue一样

• [name]-enter-active、[name]-leave-active 设置动画属性及持续时间
• [name]-enter-from、[name]-leave-to 设置动画变化效果

2.2 Layout transitions

2.2.1 全局layout动画

• 参考官方示例，讲解layout布局使用，以及切换布局时的动画效果
• layouts/default.vue 默认布局效果，与pages同级

• layouts/orange.vue 橙色布局效果

• app.vue中，定义layout动画效果，以及在nuxtpage标签外包一层nuxtlayout

• nuxt.config.ts中配置 layout动画

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  app: {
    head: {
      title: '默认标题',
      charset: 'utf-8',
      viewport: 'width=device-width, initial-scale=1'
    },
    pageTransition: { // page动画效果
      name: 'page',
      mode: 'out-in'
    },
    layoutTransition: { // layout动画效果
      name: 'layout',
      mode: 'out-in'
     }
  }
})

2.2.2 局部layout动画

• 当我们需要某个页面，例如about.vue页面使用orange布局时，可以在about.vue页面中设置

definePageMeta({
  layout: 'orange'
})

这样，在切换页面时，使用不同布局的页面，就会有不同的动画效果，可以通过这种方式设置切换整体app风格。

2.2.3 动画设置

• 全局动画效果配置，可以在nuxt.config.ts中app下面进行配置pageTransition、layoutTransition，全部生效
• 当有自定义动画时，可以在页面中通过definePageMeta下面进行配置pageTransition、layoutTransition，局部页面生效
• pageTransition、layoutTransition 参数
  • mode 动画进出方式： out-in
  • name 动画名称，用于在css中定义动画
• 动画可以关闭，若配置，那么pageTransition、layoutTransition是上述定义的对象，若关闭，这两个值为false即可禁用

2.3 JavaScript Hooks

对于高级用例，可以使用JavaScript hooks钩子为nuxt页面创建高度动态和自定义的过渡动画。这种方式为JavaScript动画库（GSAP或Tween.js）提供了完美的用例。

2.4 动态过渡动画

• 定义layouts/default.vue页面及内容：

点击按钮，切换到前一个page 或 后一个page

• pages/[id].vue 动态公共页面及相关页面内容

加上动画效果后，与轮播组件一样流畅完整。

2.5 在中增加transition动画

当在app.vue中使用时，transition-props可以直接作为组件props传递来激活全局转换。

如果有用，点个赞呗~

总结用法，希望可以帮助到你，
我是Ably，你无须超越谁，只要超越昨天的自己就好~

官方文档