1

我是第一次使用 Gridsome。我只是想设置我的网站的布局 - 我没有连接任何 API 或任何东西，只是想输出原始 HTML。我有一个 SkipToContent 组件和一个 Header 组件。两者都在输出 Header 组件的内容，我很困惑。我试过重新启动本地服务器和一般调试的东西，比如确保所有文件都保存了。以下是文件：

头文件.vue

<template>
  <header class="header">
    <strong>
      <g-link to="/">{{ $static.metadata.siteName }}</g-link>
    </strong>
    <nav class="nav">
      <g-link class="nav__link" to="/">Home</g-link>
      <g-link class="nav__link" to="/about/">About</g-link>
      <g-link class="nav__link" to="/web/">Web Development</g-link>
      <g-link class="nav__link" to="/photography/">Photography</g-link>
    </nav>
  </header>
</template>

<script lang="ts">
import Vue from "vue";

export default class Header extends Vue {}
</script>

<static-query>
query {
  metadata {
    siteName
  }
}
</static-query>

<style lang="scss">
@use '../styles/common' as *;
</style>

SkipToContent.vue

<template>
  <a href="#main-content" class="skip-to-content__link">Skip to content</a>
</template>

<script lang="ts">
import Vue from 'vue';

export default class SkipToContent extends Vue {}
</script>

<static-query>
query {
  metadata {
    siteName
  }
}
</static-query>

<style lang="scss">
@use '../styles/common' as *;

.skip-to-content {
  &__link {
    position: fixed;
    left: 50%;
    transform: translate(-50%, -200%);
    transition: transform 0.15s ease;
    background: $primary;
    &:focus {
      transform: translate(-50%, 50%);
    }
  }
}
</style>

默认.vue

<template>
  <div class="layout">
    <SkipToContent />
    <Header />
    <main id="main-content">
      <slot />
    </main>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import SkipToContent from "~/components/SkipToContent.vue";
import Header from "~/components/Header.vue";
import { Component } from "vue-property-decorator";

@Component({
  components: {
    Header,
    SkipToContent,
  }
})
export default class App extends Vue {

};
</script>

<static-query>
query {
  metadata {
    siteName
  }
}
</static-query>

<style lang="scss">
@use '../styles/common' as *;

@import url("https://rsms.me/inter/inter.css");
html {
  font-family: "Inter", sans-serif;
}
@supports (font-variation-settings: normal) {
  html {
    font-family: "Inter var", sans-serif;
  }
}

</style>

HTML 输出： 在此处输入图像描述

我觉得我要么在做一些非常明显的错误，要么这是在 Gridsome 中使用 TypeScript 的某种问题？

感谢您的任何建议:)

4

0 回答 0