| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657 |
- import { watchEffect } from 'vue';
- export function useUpdateHead(route, siteDataByRouteRef) {
- const metaTags = Array.from(document.querySelectorAll('meta'));
- let isFirstUpdate = true;
- const updateHeadTags = (newTags) => {
- if (process.env.NODE_ENV === 'production' && isFirstUpdate) {
- // in production, the initial meta tags are already pre-rendered so we
- // skip the first update.
- isFirstUpdate = false;
- return;
- }
- metaTags.forEach((el) => document.head.removeChild(el));
- metaTags.length = 0;
- if (newTags && newTags.length) {
- newTags.forEach((headConfig) => {
- const el = createHeadElement(headConfig);
- document.head.appendChild(el);
- metaTags.push(el);
- });
- }
- };
- watchEffect(() => {
- const pageData = route.data;
- const siteData = siteDataByRouteRef.value;
- const pageTitle = pageData && pageData.title;
- document.title = (pageTitle ? pageTitle + ` | ` : ``) + siteData.title;
- updateHeadTags([
- ['meta', { charset: 'utf-8' }],
- [
- 'meta',
- {
- name: 'viewport',
- content: 'width=device-width,initial-scale=1'
- }
- ],
- [
- 'meta',
- {
- name: 'description',
- content: siteData.description
- }
- ],
- ...siteData.head,
- ...((pageData && pageData.frontmatter.head) || [])
- ]);
- });
- }
- function createHeadElement([tag, attrs, innerHTML]) {
- const el = document.createElement(tag);
- for (const key in attrs) {
- el.setAttribute(key, attrs[key]);
- }
- if (innerHTML) {
- el.innerHTML = innerHTML;
- }
- return el;
- }
|