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 {idtitlepathdate}}}
}
</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) {titlecontenttimeToRead}
}
</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.jsmodule.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(四)：完善简易博客网站 (内有 footer 不满一屏时在最底部，超出一屏时在页面最底部解决方案)相关推荐

html编写个人博客_Django 开发简易博客网站
本篇使用 Django 开发博客网站的核心内容,涉及 Django .MySQL .WampServer :我比较喜欢 Django 框架的 MVC (模型.视图.控制器)的软件设计模式,其中我最喜欢 ...
（附源码）Node.js自我展示博客网站毕业设计 231547
自我展示博客网站的设计与实现摘要个人博客网站是当今网络的热点,个人博客技术的出现使得每个人可以零成本.零维护地创建自己的网络媒体,Blog站点所形成的网状结构促成了不同于以往社区的Blog文化, ...
（附源码）Node.js自我展示博客网站毕业设计231547
自我展示博客网站的设计与实现摘要个人博客网站是当今网络的热点,个人博客技术的出现使得每个人可以零成本.零维护地创建自己的网络媒体,Blog站点所形成的网状结构促成了不同于以往社区的Blog文化, ...
基于Node.js自我展示博客网站-计算机毕设附源码231547
自我展示博客网站的设计与实现摘要个人博客网站是当今网络的热点,个人博客技术的出现使得每个人可以零成本.零维护地创建自己的网络媒体,Blog站点所形成的网状结构促成了不同于以往社区的Blog文化, ...
java/php/net/python个人博客网站的研究与实现设计
本系统带文档lw万字以上+答辩PPT+查重如果这个题目不合适,可以去我上传的资源里面找题目,找不到的话,评论留下题目,或者站内私信我, 有时间看到机会给您发开发目标个人博客网站的主要开发目标如下 ...
沈阳大学博客网站的设计与实现
沈阳大学博客系统的设计与实现目录引言 3 1 系统概述 5 1.1 设计背景 5 1.2 设计意义 5 1.3研究现状 5 1.4 研究本设计的影响 6 1.4.1 对经济的影响 6 1.4. ...
搭建个人博客网站 -- vue初学者学习总结
搭建个人博客网站 – vue技术学习开源代码:个性化个人博客系统参考项目:风丶宇的个人博客一.项目概述项目主要是基于SpringBoot + Vue 开发的前后端分离博客,本文主要涉及项目前端 ...
Docker学习之路05：五分钟用docker compose搭建一个自己的个人博客网站！
五分钟用docker compose搭建一个自己的个人博客网站! Docker学习路线传送门: Docker学习之路01:Docker的安装 Docker学习之路02:阿里云镜像加速器 Docker学 ...
关于CSDN, cnblog, iteye和51cto四个博客网站的比较与分析
CSDN:http://blog.csdn.net/ cnblog: http://www.cnblogs.com/ iteye: http://www.iteye.com/blogs/ 51cto: ...

Gridsome(四)：完善简易博客网站 (内有 footer 不满一屏时在最底部，超出一屏时在页面最底部解决方案)

footer 置于页面的底部

优化博客列表显示

显示阅读时长

header 放置网站 logo

补充介绍：

Gridsome(四)：完善简易博客网站 (内有 footer 不满一屏时在最底部，超出一屏时在页面最底部解决方案)相关推荐

最新文章

热门文章

Gridsome(四)：完善简易博客网站 (内有 footer 不满一屏时在最底部，超出一屏时在页面最底部 解决方案)

footer 置于页面的底部

优化博客列表显示

显示阅读时长

header 放置网站 logo

补充介绍：

Gridsome(四)：完善简易博客网站 (内有 footer 不满一屏时在最底部，超出一屏时在页面最底部 解决方案)相关推荐

最新文章

热门文章

Gridsome(四)：完善简易博客网站 (内有 footer 不满一屏时在最底部，超出一屏时在页面最底部解决方案)

Gridsome(四)：完善简易博客网站 (内有 footer 不满一屏时在最底部，超出一屏时在页面最底部解决方案)相关推荐