从零开始搭建自己的博客 二：初步设置页面默认布局

我们在做一个网站的时候，可能绝大多数甚至每一个页面都会有一些共通的元素，比如页首和页尾。

20231104215807

每个页面都把这些重复部位的代码写上的话，不光麻烦，维护起来也费事。所以我们可以给网站设置一些布局。因为本博客页面布局比较简单，每个页面用到的都是同一种布局，所以我们只需要设置默认布局即可。

接下来就介绍在 nuxt.js 中设置布局的方法：

第一步：认识默认布局文件

布局文件的模板是：

<!-- ~/layouts/default.vue -->
<template>
  <div>
    <p>所有页面共享的默认布局</p>
    <slot />
  </div>
</template>

将默认布局应用后，除非特殊指定，否则页面会应用这个布局。也就是说，如果把一些常见部件如页首页脚放到布局里，就不需要每个页面都写一遍了。

第二步：修改 ~/app.vue

<!-- ~/app.vue -->
<!-- 把原先 app.vue 的内容给删掉或注释掉，之后输入如下内容 -->
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

这里的 <NuxtLayout> 元素即对应了默认布局文件（~/layouts/default.vue）里的内容，而 <NuxtLayout> 元素里的 <NuxtPage /> 元素对应了默认布局文件里的 <slot />。这个 <NuxtPage /> 元素是 Nuxt.js 独有的元素，可以把网址路径转换为页面文件路径后显示其文件里的内容，这样做的好处是不需要写页面路由文件了，直接把页面文件放到项目对应路径就行了。

第三步：初步编写布局

我们首先根据网页结构大致编写一下布局结构。网页由导航栏，主内容，页脚三部分组成：

<template>
  <div id="main">
    <!-- 导航栏 -->
    <nav>
    </nav>

    <!-- 页面主内容 -->
    <main>
    </main>

    <!-- 页脚 -->
    <footer>
    </footer>
  </div>
</template>

先把最简单的页脚给填上：

    <footer>
      <p>This blog is supported by Nuxt</p>
    </footer>

再暂时填充一下导航栏和页面主内容，之后再逐步改进：

导航栏：

    <nav>
      <p>contents of nav</p>
    </nav>

页面主内容

    <main>
      <p> contents of main</p>
    </main>

注意应该尽量用 <nav>、<main>、<footer> 这些语义化的元素，而不是全用 <div>，这样可以提高网站的无障碍性。

然后设置一下页面的样式，这里采用粘性页脚的样式，也就是说，即使页面内容不够，页脚也可以伸展到窗口最底下，而不是窗口底下一片空白。

#main {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background-color: white;
}

此时页面长这样

20231125203707

这页面也太枯燥了😅，我们设置一下颜色：

nav {
  background-color: black;
  color: white;
}

main {
  
}

footer {
  background-color: black;
  color: white;
}

现在网页长这样，你看，是不是有一点那个感觉了？

20231125203954