使用Vue.js更改元标题和描述 [英] Change Meta Title and Description using Vue.js
问题描述
是否可以更改比Vue.Js中的body标签更高的内容?这两个元素的内容当前都存储在JSON文件中，该文件附加到DOM树下的元素.
Is it possible to change anything higher than the body tag in Vue.Js? The contents for both these elements is currently stored in the JSON file that is attached to an element further down the DOM tree.
我需要尝试插入一个可被Google抓取的元标题和描述(即，它会被抓取，然后在呈现之前进行渲染)，并理解访问body元素和更高层次的DOM树的问题，例如当前的Vue JSON是使用应用ID向下插入DIV中注入的.
I need to try and inject a meta title and description that can be crawled by Google (ie. It injects, then renders before it gets crawled) and understand the issues with accessing the body element and higher up the DOM tree, as the current Vue JSON is injected using the App ID on a DIV lower down.
我以前在以前的工作中曾使用过jQuery代码在Square Space模板上解决此问题
I have previously used some jQuery code to address this issue on a Square Space template in some previous work
jQuery('meta[name=description]').attr('content', 'Enter Meta Description Here');
PAGE HTML
PAGE HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="{{items[0][0].meta-desc}}">
<meta name="author" content="">
<title>{{items[0][0].meta-title}}</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Vue.js CDN -->
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<!-- Page List -->
<div class="container text-center mt-5" id="app">
<h1 class="display-4">Vue Page Output:</h1>
<h2>{{items[0][0].page1}}</h2>
</div>
<div class="container text-center mt-5">
<h3>Other Pages</h3>
<a href="products.html">Products</a>
<a href="contactus.html">Contact Us</a>
</div>
<!-- /.container -->
<script type="text/javascript">
const app = new Vue({
el: '#app',
data: {
items: []
},
created: function () {
fetch('test.json')
.then(resp => resp.json())
.then(items => {
this.items = items
})
}
});
</script>
</body>
</html>
JSON
[
[
{
"page1": "Company Name",
"meta-title": "Acme Corp"
"meta-desc": "Welcome to Acme Corp"
}
],
[
{
"products": "Product List"
}
],
[
{
"contactus": "Contact Us at Acme Corp"
}
]
这是运行中的代码，传入的JSON文件采用固定的数组格式，其中的meta细节与body元素并排.使这一点更加棘手.
Here is the code in action, the incoming JSON file comes in a fixed array format with the meta details alongside the body elements. Making this a bit more tricky.
https://arraydemo.netlify.com/
推荐答案
由于要更改的内容不在Vue控制的范围内，因此您只需使用普通的DOM操作即可.就像
Since what you want to change is outside the area controlled by Vue, you just use ordinary DOM manipulation. It would be something like
created() {
fetch('test.json')
.then(resp => resp.json())
.then(items => {
this.items = items;
const descEl = document.querySelector('head meta[name="description"]');
const titleEl = document.querySelector('head title');
descEl.setAttribute('content', items[0]['meta-desc']);
titleEl.textContent = items[0]['meta-title'];
})
}
这篇关于使用Vue.js更改元标题和描述的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
