Блог

Я искал способ получить доступ к переменной среды в файле markdown. Пример, если запись foo.md:

 Bacon ipsum dolor amet turkey ham drumstick, [landjaeger]({{ process.env.GRIDSOME_URL }}/landjaeger)
  

а также в <iframe> :

 <iframe height="{{ process.env.GRIDSOME_HEIGHT }}"
  

В моем файле .env я могу ссылаться на переменную среды без каких-либо проблем в других файлах:

.env:

 GRIDSOME_URL=https://path/to/somethinng
GRIDSOME_HEIGHT=450
  

но когда я изучаю документацию для моих установленных плагинов Gridsome:

 "@gridsome/plugin-google-analytics": "^0.1.0",
"@gridsome/plugin-sitemap": "^0.2.1",
"@gridsome/remark-prismjs": "0.0.6",
"@gridsome/source-filesystem": "^0.6.0",
"@gridsome/transformer-remark": "^0.3.4",
"graphql-playground-html": "^1.6.22",
  

ничто в документации или их поддерживающих репозиториях не демонстрирует, как передать глобальный файл в файл markdown. Когда я исследую сайт и другие сайты, я не нахожу никаких результатов для Vue, но я нашел кое-что для Hugo: «Использовать переменную среды в файлах Markdown«, которая не работает в Gridsome.

Попытка:

foo.vue:

 <template>
  <Layout>
    <h1>{{ $page.doc.title }}</h1>
    <div class="markdown" v-html="$page.doc.content" :height="height" />
  </Layout>
</template>

<page-query>
query Doc ($path: String!) {
  doc: doc (path: $path) {
    title
    path
    date (format: "MMMM D, YYYY")
    timeToRead
    content
  }
}
</page-query>

<script>
import { LinkIcon } from 'vue-feather-icons'

export default {
  components: {
    LinkIcon
  },
  data() {
    return {
      height: process.env.GRIDSOME_HEIGHT
    }
  },
  metaInfo() {
    return {
      title: this.$page.doc.title,
      meta: [
        {
          key: 'description',
          name: 'description',
          content: this.$page.doc.description
        }
      ]
    }
  }
}
</script>
  

foo.md:

 <iframe :height="{{ $height }}"
  

В Gridsome / Vuex как переменная среды может быть передана в файл Markdown и использована?

Я не знаю gridsome, но для кода, который вы опубликовали, это можно было бы решить чисто Vue-способом. Сначала вам нужно будет сделать этот объект env доступным во внешнем интерфейсе. Например.:

 Vue.use({
  install (Vue) {
    Vue.prototype.$env = process.env
  }
})
  

Когда Vue создает / обслуживает проект, он получит env и сделает его доступным. Затем вы можете использовать внутри любого компонента:

 ...
  mounted () {
    console.log(this.$env)
  },
  data() {
    return {
      height: this.$env.GRIDSOME_HEIGHT
    }
  },
...
  

Я уверен, что есть много других способов сделать это.