2021-03-01 15:06:11 +08:00

58 lines
1.9 KiB
JavaScript

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;
}