使用 Vue.js 更改元标题和描述

2022-01-25 00:00:00 jquery javascript vue.js vue-component vuejs2

是否可以在 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 是使用 DIV 下方的 App ID 注入的.

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', '在此处输入元描述');

页面 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 文件采用固定数组格式，其中包含元详细信息以及正文元素.让这变得更棘手.

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'];
    })
}

相关文章