Quasar Meta插件 | Quasar Framework 中文网

Quasar Meta插件

更好的网站SEO！ Meta插件可以动态更改页面标题、管理<meta>标记、管理<html>和<body>DOM元素属性、添加/删除/更改文档头部的<style>和<script>标记（例如，对于CDN样式表或json-ld标记非常有用）或管理<noscript>标签。

TIP

结合使用Quasar CLI来充分利用此功能，尤其是对于SSR（服务器端渲染）版本。将其用于SPA（单页应用程序）也没有多大意义，因为在这种情况下，meta信息将在运行时添加，而不是由Web服务器直接提供（与SSR构建一样）。

安装

Quasar CLI

Vite plugin / Vue CLI

UMD

// quasar.config.js

return {
  framework: {
    plugins: [
      'Meta'
    ]
  }
}

用法

Meta插件的作用是可以在Vue组件中使用称为meta的特殊属性。看看下面的示例，它几乎具有所有功能：

// 一些.vue文件

export default {
  // ...
  meta: {
    // 设置文件标题
    title: 'Index Page',
    //可选的; 将最终标题设置为“Index Page - My Website”，对于多级meta有用
    titleTemplate: title => `${title} - My Website`,

    // meta标记
    meta: {
      description: { name: 'description', content: 'Page 1' },
      keywords: { name: 'keywords', content: 'Quasar website' },
      equiv: { 'http-equiv': 'Content-Type', content: 'text/html; charset=UTF-8' }
    },

    // CSS标记
    link: {
      material: { rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' }
    },

    // JS标记
    script: {
      ldJson: {
        type: 'application/ld+json',
        innerHTML: `{ "@context": "http://schema.org" }`
      }
    },

    // <html>属性
    htmlAttr: {
      'xmlns:cc': 'http://creativecommons.org/ns#' // 生成<html xmlns:cc="http://creativecommons.org/ns#">,
      empty: undefined // 生成<html empty>
    },

    // <body>属性
    bodyAttr: {
      'action-scope': 'xyz', // 生成<body action-scope="xyz">
      empty: undefined // 生成<body empty>
    },

    // <noscript>标记
    noscript: {
      default: 'This is content for browsers with no JS (or disabled JS)'
    }
  }
}

How It Works

metas是按照Vue Router激活的顺序从.vue文件中计算出来的（为了进一步解释，我们把这称为一个链）。例如：App.vue > SomeLayout.vue > IndexPage.vue > …?

当一个包含 meta属性的组件被渲染或销毁时，它将被添加/移除到链中，metas也会相应地被更新。

注意，所有属性（title和titleTemplate除外）都是对象；您可以通过再次使用相同的键来覆盖链中先前Vue组件中定义的meta属性。例：

// 首先加载的Vue组件
meta: {
  meta: {
    myKey: { name: 'description', content: 'My Website' }
  }
}

// 链中的后续Vue组件； 
// 这将覆盖“myKey”上的第一个定义
meta: {
  meta: {
    myKey: { name: 'description', content: 'Page 1' }
  }
}

WARNING

只要确保不重复/src/index.template.html中已经存在的内容即可。如果要使用Meta插件，建议的方法是从html模板中删除相同的标记。但是在用例中，您知道标记永远不会改变，并且始终希望渲染它，那么最好只在html模板上使用它。

在上面的例子中，你注意到所有的meta属性都是"静态"的。但如果你愿意，它们也可以是动态的。这就是你如何用它们绑定到Vue范围的方法。把它们看作是Vue的一个计算属性。

// 一些.vue文件
export default {
  data () {
    return {
      title: 'Some title' // 我们定义"title"属性
    }
  },

  // 注意meta在这里是一个函数，
  // 它是你从Vue组件的范围中引用属性的方法
  meta () {
    return {
      // 这将访问你的Vue "data"中的"title"属性；
      // 只要上面的 "title"发生变化，你的meta就会自动更新
      title: this.title
    }
  },

  methods: {
    setAnotherTitle () {
      this.title = 'Another title' // 将自动触发一个Meta更新，由于绑定了
    }
  }
  // ...
}

Testing Meta

部署之前，您确实应该确保对meta标记的工作符合要求。尽管您可以仅将链接复制并粘贴到Discord聊天室、Facebook帖子或Tweet中，但是我们建议您使用https://metatags.io/进行验证。