Xử lý siêu dữ liệu trong Vue với vue-meta
Thư viện vue-meta cung cấp một plugin Vue cho phép ta kiểm soát metadata của ứng dụng từ cấp độ thành phần. Điều quan trọng là phải quản lý metadata của các ứng dụng web của ta cho SEO, nhưng khi làm việc với các ứng dụng web một trang (SPA), đây thường có thể là một nhiệm vụ cồng kềnh.
Siêu dữ liệu động đã được đề cập một phần ở đây , nhưng mục tiêu của ta hôm nay là làm nổi bật cách plugin vue-meta xử lý điều này cho ta một cách ngắn gọn, hợp lý đồng thời cung cấp cho ta nhiều quyền kiểm soát hơn đối với metadata của ứng dụng.
Cài đặt
Vì vue-meta là một plugin nên ta cần thêm gói vào các phụ thuộc dự án của ta . Ta cũng cần cho Vue biết ta muốn sử dụng plugin vue-meta .
Cài đặt
Cài đặt vue-meta với trình quản lý gói bạn muốn :
# Yarn
$ yarn add vue-meta
# NPM
$ npm install vue-meta --save
Bootstrap
Khởi động plugin vue-meta trong file JavaScript main của bạn:
import Vue from 'vue';
import VueMeta from 'vue-meta';
import App from 'App.vue';
Vue.use(VueMeta);
new Vue({
el: '#app',
render: h => h(App)
});
Nếu bạn đang sử dụng giải pháp định tuyến như Vue Router , thì bạn có thể bootstrap vue-meta trong file router.js của bạn :
import Vue from 'vue';
import Router from 'vue-router';
import VueMeta from 'vue-meta';
Vue.use(Router);
Vue.use(VueMeta);
export default new Router({})
SSR
Nếu bạn đang sử dụng Server Side Rendering, bạn cần khởi động vue-meta trong một file chạy trên cả server và client trước khi version Vue root được mount .
Khung Vue
Nếu bạn đang sử dụng một khung công tác đã sử dụng vue-meta , chẳng hạn như NuxtJS , bạn sẽ không cần phải khởi động. Thay vào đó, bạn nên tham khảo tài liệu cho khuôn khổ đã chọn của bạn . Các khung công tác khác đã sử dụng vue-meta bao gồm Gridsome , Ream , Vue-Storefront và Factor .
Tùy chọn plugin
vue-meta cung cấp các tùy chọn để tùy chỉnh hành vi của plugin. NuxtJS tận dụng điều này bằng cách thay đổi tên của thuộc tính metaInfo thành head . Bạn có thể làm điều này bằng cách khởi động vue-meta như sau:
import Vue from 'vue';
import VueMeta from 'vue-meta';
import App from 'App.vue';
Vue.use(VueMeta, {
keyName: 'head'
});
new Vue({
el: '#app',
render: h => h(App)
});
Đảm bảo xem danh sách đầy đủ các tùy chọn có sẵn trong tài liệu chính thức .
Đang điền metadata
Tiêu đề
vue-meta cho phép ta cập nhật <title> trên cả thành phần mẹ và con. Trong thành phần root của ta , ta có thể xác định một tiêu đề mặc định sẽ xuất hiện nếu thiếu một thành phần con. Ta cũng có thể xác định một titleTemplate sẽ được sử dụng để hiển thị tiêu đề từ các thành phần con.
export default {
name: 'App',
metaInfo: {
title: 'Default App Title',
titleTemplate: '%s | vue-meta Example App'
},
...
}
<title>
Default App Title | vue-meta Example App
</title>
Siêu dữ liệu khác
Tất nhiên, title không phải là điều duy nhất ta quan tâm khi điền metadata của một trang. Thông thường, ta muốn bao gồm thông tin khác để chuyển đến trình duyệt hoặc trình thu thập thông tin web, chẳng hạn như bộ charset , description hoặc viewport . Bạn thậm chí có thể thêm thuộc tính vào các html hoặc thẻ head của trang và đưa các tập lệnh bên ngoài vào.
export default {
name: 'App',
metaInfo: {
title: 'Default App Title',
titleTemplate: '%s | vue-meta Example App',
htmlAttrs: {
reptilian: 'gator'
},
headAttrs: {
nest: 'eggs'
},
meta: [
{ charset: 'utf-8' },
{ name: 'description', content: 'gator' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }
]
},
...
}
<html reptilian="gator">
<head nest="eggs">
<title>Default App Title | vue-meta Example App</title>
<meta charset="utf-8">
<meta name="description" content="gator">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
</html>
Đảm bảo xem thông số kỹ thuật thuộc tính metaInfo của tài liệu vue-meta API để biết tất cả các tùy chọn có sẵn.
Cấu trúc phân cấp metadata thành phần
Các thành phần con sẽ hợp nhất một cách đệ quy metadata với cha mẹ của chúng. Điều này cho phép ta cập nhật metadata của trang dựa trên các thành phần hiện đang được mount .
<template>
<div>
<HelloWorld />
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue';
export default {
name: 'App',
metaInfo: {
title: 'Default App Title',
titleTemplate: '%s | vue-meta Example App'
},
components: {
HelloWorld
}
}
</script>
<template>
<div>Hello World!</div>
</template>
<script>
export default {
name: 'HelloWorld',
metaInfo: {
title: 'Hello World!'
}
}
</script>
<title>
Hello World! | vue-meta Example App
</title>
Bạn cũng có thể tắt titleTemplate khỏi một thành phần con như sau:
export default {
name: 'HelloWorld',
metaInfo: {
title: 'Hello World!',
titleTemplate: null
}
}
<title>
Hello World!
</title>
Nếu hai thành phần con được mount và cả hai đều chứa metaInfo , thì thành phần con cuối cùng được mount sẽ được sử dụng để điền metadata của trang. Giả sử ta đã tạo một thành phần con thứ hai được gọi là HelloWorld2 và sửa đổi ví dụ của ta như sau:
<template>
<div>
<HelloWorld />
<HelloWorld2 />
</div>
</template>
import HelloWorld from './components/HelloWorld.vue';
import HelloWorld2 from './components/HelloWorld2.vue';
export default {
name: 'App',
metaInfo: {
title: 'Default App Title',
titleTemplate: '%s | vue-meta Example App'
},
components: {
HelloWorld,
HelloWorld2
}
}
<template>
<div>Hello World 2!</div>
</template>
<script>
export default {
name: 'HelloWorld2',
metaInfo: {
title: 'Hello World 2!'
}
}
</script>
<title>
Hello World 2! | vue-meta Example App
</title>
Chỉ metadata trùng lặp sẽ bị overrides bởi các thành phần con. Các metadata khác sẽ được nối với nhau.
Sử dụng nhiều version Vue với vue-meta sẽ chỉ dẫn đến metadata từ ứng dụng cuối cùng được cập nhật!
VMID
vue-meta cho phép ta gán một thuộc tính đặc biệt có tên là vmid cho metaInfo của ta để ta có thể kiểm soát cách nó giải quyết với cây thành phần của ta . Nếu hai bộ metadata có cùng một vmid , chẳng hạn như cấp độ root và cấp độ con, chúng sẽ không hợp nhất mà thay vào đó, bộ phận con sẽ overrides lên bộ phận chính như vậy:
// parent component
{
metaInfo: {
meta: [
{ charset: 'utf-8' },
{ vmid: 'description', name: 'description', content: 'reptilian' }
]
}
}
// child component
{
metaInfo: {
meta: [
{ vmid: 'description', name: 'description', content: 'gator' }
]
}
}
<meta charset="utf-8">
<meta data-vmid="description" name="description" content="gator">
Xóa tài sản mẹ trong con
Nếu một thành phần con chia sẻ vmid với thuộc tính cha và metaInfo tính metaInfo được đặt thành null , thì thuộc tính này sẽ bị xóa khỏi thuộc tính cha.
Tài sản có điều kiện ở trẻ em
Nếu một thành phần con trả về undefined cho metaInfo tính metaInfo vue-meta sẽ trở lại thuộc tính của cha mẹ.
Kết thúc
vue-meta là một giải pháp tuyệt vời nếu bạn đang tìm cách kiểm soát và cập nhật động metadata của ứng dụng. Không có câu hỏi tại sao rất nhiều khung công tác Vue phổ biến bao gồm thư viện bên ngoài. Đảm bảo xem qua tài liệu chính thức nếu bạn muốn tìm hiểu thêm về tất cả những gì thư viện cung cấp.
Các tin liên quan
