Nuxt 学习笔记（三）

SEO头部设置基于 Unhead 提供useHead管理head也可在nuxt.config.ts的app.head中配置。同时提供useHeadSafe来支持安全的头部修改策略interfaceMetaObject{title?:string;// 文档标题titleTemplate?:string|((title?:string)string);// 动态标题模板templateParams?:Recordstring,string|Recordstring,string;// 模板占位符参数base?:Base;link?:Link[];// rel、stylesheet、preconnect、href、crossorigin 等meta?:Meta[];style?:Style[];script?:Script[];noscript?:Noscript[];htmlAttrs?:HtmlAttributes;bodyAttrs?:BodyAttributes;}useHeadSafe()通过白名单限制可修改的 head 相关属性避免不可信内容注入脚本或非法标签从而降低 XSS 等风险。处理不信任的数据来源。用户生成内容写入 head 前建议也做一次安全过滤转义。constWhitelistAttributes{htmlAttrs:[class,style,lang,dir],bodyAttrs:[class,style],meta:[name,property,charset,content,media],noscript:[textContent],style:[media,textContent,nonce,title,blocking],script:[type,textContent,nonce,blocking],link:[color,crossorigin,fetchpriority,href,hreflang,imagesrcset,imagesizes,integrity,media,referrerpolicy,rel,sizes,type,],};useSeoMeta辅助编写 SEO 相关 meta减少 Open Graphproperty与普通 metaname混用导致的标签错误。内置了 100 多个与 SEO / 社交分享相关的字段映射。旧nuxt使用useServerSeoMeta在服务端完成生成现在已废弃useSeoMeta({title:My Amazing Site,ogTitle:My Amazing Site,description:This is my amazing site, let me tell you all about it.,ogDescription:This is my amazing site, let me tell you all about it.,ogImage:https://example.com/image.png,twitterCard:summary_large_image,});优先在服务端写入静态 SEO 信息因为多数爬虫主要抓取首屏 HTML 中的 meta。随路由或客户端状态变化时再使用响应式更新。script setup langts // 判断是否为服务端 if (import.meta.server) { useSeoMeta({ robots: index, follow, description: Static description that does not need reactivity, ogImage: https://example.com/image.png, }); } // 客户端响应式变更 const dynamicTitle ref(My title); useSeoMeta({ title: () dynamicTitle.value, ogTitle: () dynamicTitle.value, }); /script常用 SEO 配置列表useSeoMeta({// Basic SEOtitle:Product Name - Your Brand,description:Detailed product description optimized for search engines.,// Open Graph社交平台抓取 OG 标签生成链接预览卡片ogTitle:Product Name - Your Brand,ogDescription:Engaging description for social media shares.,ogImage:https://example.com/product-social.jpg,ogUrl:https://example.com/products/my-product,ogType:product,ogSiteName:Your Brand,// Twitter CardtwitterTitle:Product Name - Your Brand,twitterDescription:Engaging description for Twitter shares.,twitterImage:https://example.com/product-twitter.jpg,twitterCard:summary_large_image,// 文章类字段有利于作者与发布时间等结构化展示articleAuthor:Author Name,articlePublishedTime:2023-01-01,articleModifiedTime:2023-02-15,});SiteMapSitemap 是用来给向搜索引擎提供可抓取网站 URL 列表通过生产sitemap.xml搜索引擎便于发现站内链接与页面结构避免抓取不全和重复收录的问题。nuxt 可使用官方模块 nuxtjs/sitemap 生成站点地图。通过defineSiteMapEventHandler暴露动态sitemap在nuxt.config.ts目录下引入 sitemap 配置实现静态 sitemap 站点功能头部组件化Nuxt 提供head对应的组件可在模板中声明式配置 head并支持响应式更新。Title设置标题Base设置页面基础路径NoScript降级提示比如不兼容 JS 场景Style全局样式Meta元信息设置如果有useHead相同内容组件优先级更高Link链接标签Bodybody出于代码结构考虑的组件Htmlhtml出于代码结构考虑的组件Headhead出于代码结构考虑的组件尽量放在根节点不要嵌套在组件内部使用动态头部模板通过titleTemplate动态头部配置支持多种子页面的配置场景并通过templateParams设置传给头部的参数内置了%s代表当前标题通常会把动态头部放在 Layout 布局模板中或者app.vue入口文件目前测试templateParams的参数存在无法读取script setup langtsuseHead({// 会根据当前组件是否有头部启用titleTemplate:(titleChunk){returntitleChunk?${titleChunk}%separator %siteName:%siteName},templateParams:{siteName:Site Title,separator:-,},})/script目前生效逻辑titleTemplate 所在当前页设置头部titletitleChunk会有值拼接父页面title会替换子页面的title对于子页面设置title父页面不设置titletitleChunk会拼接上子页面设置的title内容配合页面中的definePageMeta()让可以让titleTemplate通过useRoute()获取到当前的meta属性脚本优化配置可以通过useHead添加脚本但脚本解析时会阻塞首屏加载速度这时可以通过tagPosition: bodyClose将脚本迁移到body后方script setup langtsuseHead({script:[{src:https://third-party-script.com,// head | bodyClose | bodyOpentagPosition:bodyClose,},],})/scripthead头部bodyOpenbody开始位置,bodyClosebody结束位置页面过渡全局页面过渡配置通过nuxt.config.ts定义实现页面内容的过渡操作过渡行为和 Vue 的transition一致只不过支持通过配置项来指定支持页面过渡pageTrasition和layoutTrasition布局过渡name指定的是过渡的类基名mode指定生效时间是 vue 的特性 Vue.jsdefault默认新旧元素出入同时进行in-out新元素先进旧元素再出out-in常用旧元素先出执行leave新元素再进执行enterexportdefaultdefineNuxtConfig({app:{pageTransition:{name:page,mode:out-in},layoutTransition:{name:layout,mode:out-in},},});在app.vue中指定对应的样式// 激活时的效果一般用于添加过渡时间.layout-enter-active,.layout-leave-active{transition:all0.4s;}// 过渡.layout-enter-from,.layout-leave-to{filter:grayscale(1);}.page-enter-active,.page-leave-active{transition:all0.4s;}.page-enter-from,.page-leave-to{opacity:0;filter:blur(1rem);}组件内部过渡配置通过definePageMeta配置过渡信息支持过渡钩子捕获对元素进行其他过渡操作适用于复杂动画库例如 GSAP.也可以通过middleware中间件动态修改过渡行为适用于图片翻页预览的场景definePageMeta({pageTransition:{mode:out-in,name:about-page,onBeforeEnter:(el){console.log(onBeforeEnter);console.log(el);},},middleware(to,from){if(to.meta.pageTransitionto.meta.pageTransition!false){to.meta.pageTransitionto.params.idfrom.params.id?slide-left:slide-right;}},});.slide-left-enter-active,.slide-left-leave-active,.slide-right-enter-active,.slide-right-leave-active{transition:all0.2s;}.slide-left-enter-from{opacity:0;transform:translate(50px,0);}.slide-left-leave-to{opacity:0;transform:translate(-50px,0);}.slide-right-enter-from{opacity:0;transform:translate(-50px,0);}.slide-right-leave-to{opacity:0;transform:translate(50px,0);}NuxtPage 过渡可以在 NuxtPage 上添加过渡标签启用当前子路由下的全局过渡在 vue 中就类似于router-view外层嵌套transition的效果NuxtLayout NuxtPage :transition{ name: bounce, mode: out-in, } / /NuxtLayout原生 View Transition API 启用使用视图过渡 API - Web API | MDNscript setup langts definePageMeta({ viewTransition: false, }); /script如果需要渐进增强在浏览器支持 View Transition API 情况下禁用 Nuxt 自带 transiton 效果创建中间件~/middleware/disable-vue-transitions.global.ts来实现export default defineNuxtRouteMiddleware((to) { // 判断非服务端且支持 Transiton api if (import.meta.server || !document.startViewTransition) { return } // Disable built-in Vue transitions // 关闭 nuxt 内置 vue过渡方案 to.meta.pageTransition false to.meta.layoutTransition false })NuxtLoadingIndicator 导航过渡Nuxt 内置了进度条导航过渡组件使用时要放在根元素下方不要嵌套到其他元素!-- app.vue -- template div NuxtLoadingIndicator/NuxtLoadingIndicator NuxtLayout NuxtPage /NuxtPage /NuxtLayout /div /template注意事项过渡代码不能嵌套在style scoped作用域中会导致子页面跳转失效可以使用:deeep不推荐或者迁移到全局代码中实现NuxtLoadingIndicator放在底层根元素之下否则可能不会显示全局状态存储支持useState(key,init)声明全局状态也可以使用 pinia nuxt 插件在各个页面之间共享状态同步兼容 SSR 状态共享服务端支持支持组合式hook声明使用key共享键init初始化值必须是函数可以结合shallowRef浅层响应提高对象数组的性能script setup langts // 创建一个 key 为 counter 的全局共享状态 const state useState(counter, () 1); const shallowState useState(counter, () shallowRef({ params: obj params }), ); clearNuxtState(counter); /script如果要清空状态使用clearNuxtState(key | key[])去清空应用场景用户信息同步全局配置相同key会发生什么会使用先声明的状态作为默认值猜测底层是用了字典去重判断参考内容Nuxt Documentation