Gridsome(四)：完善簡易博客網站 (內有 footer 不滿一屏時在最底部，超出一屏時在頁面最底部 解決方案)

footer 置於頁面的底部

利用絕對定位

/* 文件目錄：src/layouts/Defaults.vue */

.footer {
  color: #c5c5c5;
  position: absolute;
  bottom: 0;
}

但是當頁面內容超過一屏時，就會出現問題。
我們希望：footer 不滿一屏時在最底部，超出一屏時在頁面最底部。

<div class="layout"> 
    <header class="header">
     <!-- header 內容 …… -->
    </header>
    <div class="page">
      <slot />
    </div>
    <footer class="footer">
      <!-- footer 內容 …… -->
    </footer>
</div>

.layout {
  position: relative;
  min-height: 100%;
}
.page {
  padding-bottom: 45px;
}
.footer {
  color: #c5c5c5;
  position: absolute;
  bottom: 20px;
  height: 25px;
}

優化博客列表顯示

<!-- 文件目錄：src/pages/Index.vue -->

<template>
  <Layout>
    <h1>My Blog</h1>
    <div v-for="edge in $page.blogs.edges" :key="edge.node.id" class="my-div">
      <a :href="edge.node.path">
        <p class=" title">{{edge.node.title}}</p>
        <p class="date">發佈時間：{{edge.node.date}}</p>
      </a>
    </div>
  </Layout>
</template>

<page-query>
query {
  blogs: allBlog{
    edges {
      node {
        id
        title
        path
        date
      }
    }
  }
}
</page-query>

<script>
</script>

<style scoped>
.my-div {
  border: 1px solid silver;
  margin-bottom: 10px;
  height: 100px;
  padding: 0 0 5px 15px;
}
.my-div:hover {
  border: 2px solid sandybrown;
}
.title {
  font-weight: 600;
  font-size: 22px;
}
.date {
  font-size: 12px;
  color: slategray;
}
a {
  text-decoration: none;
  color: #333;
}
</style>

顯示閱讀時長

timeToRead

<!-- 文件目錄：src/templates/Blog.vue -->

<template>
  <Layout>
    <div class="blog-title" v-html="$page.blog.title"></div>
    <span>閱讀本文所需時間：{{$page.blog.timeToRead}} min</span>
    <div class="blog-content" v-html="$page.blog.content" />
  </Layout>
</template>

<page-query>
query ($id: ID!) {
  blog(id: $id) {
    title
    content
    timeToRead
  }
}
</page-query>

<script>
export default {
  metaInfo() {
    return {
      title: this.$page.blog.title
    };
  }
};
</script>

<style scoped>
span {
  color: #551a8b;
  font-weight: 100;
}
.blog-title {
  color: #551a8b;
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 20px;
}
.blog-content {
  margin-top: 50px;
}
</style>

header 放置網站 logo

• 插入圖片

  <!-- 文件目錄：src/layouts/Default.vue -->
  
  <g-link to="/"
      <g-image src="../assets/bg.jpeg" width="120px" height="40px" />
  </g-link>
  

• 插入 svg 圖標

  <g-link to="/">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
        class="feather feather-bell">
        <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
        <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
      </svg>
  </g-link>
  

---

補充介紹：

在 Gridsome 中，templates 中並不是只能建立一個模版對應一個文件目錄。可以建立多個。

比如：

// gridsome.config.js

module.exports = {
  siteName: 'Gridsome',
  plugins: [{
      use: "@gridsome/source-filesystem",
      options: {
        path: "src/blog/*.md",
        typeName: "Post",
        remark: {
          plugins: [
            '@gridsome/remark-prismjs'
          ]
        }
      }
    },
    {
      use: "@gridsome/source-filesystem",
      options: {
        path: "src/blog2/*.md",  // 可以配置第2個自定義模版組件路徑
        typeName: "Post2",
        remark: {
          plugins: [
            '@gridsome/remark-prismjs'
          ]
        }
      }
    }
  ]
}

---

🔗：

• GridSome(一)：介紹
• Gridsome(二)：起步
• Gridsome(三)：搭建簡易博客網站