Gridsome / Vue で特定のページにスクリプトを追加する

最初に投稿された @ https://rasulkireev.com/gridsome-page-scripts/

外部ライブラリを Gridsome Web サイトに追加するとします。私の場合、hypothes.is を自分の Web サイトに追加したかったのです。

TL;DR
mounted 経由でスクリプト タグをサイトに追加します。 関数。

export default {
  mounted() {
        let hypothesisScript = document.createElement("script")
        hypothesisScript.setAttribute('src', 'https://hypothes.is/embed.js')
        document.body.appendChild(hypothesisScript)
  },
...
}

次のスクリプト タグを index.html の body タグのすぐ上に追加することで、hypothes.is をサイトに追加できます。

<script src="https://hypothes.is/embed.js" async></script>

これにより、すべてのページに仮説サイドバーが追加されます。これは十分な解決策になる可能性があります。ただし、このサイドバーでサイトの各ページを混雑させたくありません。では、特定のページだけに追加するにはどうすればよいでしょうか?

Gridsome の構造を考えると、特定のページを分離するのは非常に簡単です。たとえば、Post.vue をターゲットにすることができます 記事でこのスクリプトのみが必要な場合。または、About.vue をターゲットにすることもできます aboutページのみに追加したい場合。

├── content
|  ├── articles
|  ├── notes
|  ├── now
├── gridsome.config.js
├── gridsome.server.js
├── src
|  ├── components
|  |  └── socialShareButtons.vue
|  ├── index.html
|  ├── layouts
|  |  ├── Default.vue
|  ├── main.js
|  ├── pages
|  |  ├── 404.vue
|  |  ├── About.vue
|  |  ├── Articles.vue
|  |  ├── Index.vue
|  └── templates
|     ├── BookNote.vue
|     └── Post.vue

問題は、「スクリプト タグを追加するにはどうすればよいですか?」ということです。テンプレートを追加すると、ページの中央に表示されてロードされますが、これは理想的ではありません.このスクリプトは、body タグの終了直前に挿入する必要があります。

mounted でこれを行うことができます 関数：

export default {
  mounted() {
        let hypothesisScript = document.createElement("script")
        hypothesisScript.setAttribute('src', 'https://hypothes.is/embed.js')
        document.body.appendChild(hypothesisScript)
  },
...
}

復習しましょう。

これで、必要な外部ライブラリを必要なページだけに配置できます。

フィードバックがあれば、Twitter または HackerNews に残してください。よろしくお願いします！