专栏首页大前端666Gatsby入门指南—添加博客内容页(4)

Gatsby入门指南—添加博客内容页(4)

1.查数据

注意,这里跟前面不一样了,我用gatsby-node.js这个文件去提供数据,没有什么为什么,规定,照做就好。

    const path = require("path");
    exports.createPages = ({ actions, graphql }) => {
      const { createPage } = actions
    
      const blogPostTemplate = path.resolve(`src/templates/blogPost.js`)
    
      return graphql(`
        {
          allMarkdownRemark{
            edges {
              node {
                frontmatter {
                  path,
                  title,
                  tags
                }
              }
            }
          }
        }
      `).then(result => {
        if (result.errors) {
          return Promise.reject(result.errors)
        }
        const posts = result.data.allMarkdownRemark.edges;
        createTagPages(createPage, posts);
        posts.forEach(({ node }, index) => {
          const path = node.frontmatter.path;
          const title = node.frontmatter.title;
          createPage({
            title,
            path,
            component: blogPostTemplate,
            context: {
              pathSlug: path
            }, 
          })
        })
      })
    }

很清晰明显,这里就说一点我传递了一个参数,pathSlug到内容页。

2.创建内容页模板

在src>templates下创建blogPost.js

    import React from "react"
    import { graphql,Link } from 'gatsby'
    const Template = ({ data, pageContext }) => {
      const {next,prev} = pageContext;
      const {markdownRemark} = data;
      const title = markdownRemark.frontmatter.title;
      const html = markdownRemark.html;
      return (
    
        <div style={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center'
        }}>
          <h1>{title}</h1>
          <div dangerouslySetInnerHTML={{ __html: html }} />
        </div>
      )
    }
    
    export const query = graphql`
      query($pathSlug: String!) {
        markdownRemark(frontmatter: { path: { eq: $pathSlug } }) {
          html
          frontmatter {
            date(formatString: "MMMM DD, YYYY")
            path
            title
          }
        }
      }
    `
    export default Template;

这里只要对应的路径的那个文章查询

    frontmatter: { path: { eq: $pathSlug } }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Gatsby入门指南—添加博客内容页(4)

    注意,这里跟前面不一样了,我用gatsby-node.js这个文件去提供数据,没有什么为什么,规定,照做就好。

    前端大彬哥
  • Gatsby入门指南—添加博客文章列表(3)

    前端大彬哥
  • Gatsby入门指南—添加博客文章列表(3)

    前端大彬哥
  • Gatsby入门指南—添加上一页下一页功能(完结篇)

    到此,通过gatsby就快速的搭建了一个博客网站,我们只需书写markdown文件就能生成对应的网页了。至于网页美化,那是切图的事儿,我就不在这里墨迹了。

    前端大彬哥
  • Gatsby入门指南—添加上一页下一页功能(完结篇)

    到此,通过gatsby就快速的搭建了一个博客网站,我们只需书写markdown文件就能生成对应的网页了。至于网页美化,那是切图的事儿,我就不在这里墨迹了。

    前端大彬哥
  • 用 Gatsby 创建一个博客

    Gatsby 是一个令人难以置信的静态站点生成器,它允许使用React作为渲染引擎引擎来搭建一个静态站点,它真正具有现代web应用程序所期望的所有优点。它通过在...

    疯狂的技术宅
  • Gatsby入门指南—安装和博客搭建(0)

    前端大彬哥
  • 你的博客用不着什么JavaScript框架

    今年年初,我终于决定将自己的网站从基于 PHP 的 CMS 移植到基于 JavaScript 的静态网站生成器(SSG)了。原因如下:

    深度学习与Python
  • 一杯茶的时间,上手 Gatsby 搭建个人博客

    我的博客最初是用 Github Pages 默认的 Jekyll[2] 框架,其使用的 Liquid[3] 模板引擎在使用上有诸多不便。

    一只图雀
  • Gatsby: 添加标签

    参考 https://github.com/rmcfadzean/gatsby-pantry/tree/master/examples/starter-blog

    谛听
  • SEO 在 SPA 站点中的实践

    观察基于 create-react-doc 搭建的文档站点, 发现网页代码光秃秃的一片(见下图)。这显然是单页应用 (SPA) 站点的通病 —— 不利于文档被搜...

    牧云云
  • Gatsby 博客部署到腾讯云教程

    原文发表于:https://avenirzheng.net/blog/2020/deploying-gatsby-to-tencent-cloud/

    Avenir
  • Asp.Net MVC4入门指南(4):添加一个模型

    在本节中,您将添加一些类,这些类用于管理数据库中的电影。这些类是ASP.NET MVC 应用程序中的"模型(Model)"。 您将使用.NET Framewor...

    葡萄城控件
  • 9个不错的前端开源项目

    无论您是刚开始编程还是已经是一名经验丰富的开发人员,在这个行业中,学习新的概念和语言/框架是跟上快速变化的必要条件。

    前端迷
  • JavaScript前端学习有哪些项目可以练习

    构建这个应用时,你将使用相对较新的Hooks API来提升你的React技能。示例项目利用了React组件、许多Hooks、一个外部api,当然还有一些CSS样...

    加米谷大数据
  • 【Web架构】静态站点生成器概述 Gatsby ,Hugo 和Jekyll对比

    在本文中,您将看到三种最好的静态站点生成器的比较,它们的优点、缺点以及您应该使用它们的原因。

    首席架构师智库
  • 如何利用机器学习和Gatsby.js创建假新闻网站​

    我们生活在一个真理不再是非黑即白的世界。在我们生活的世界里,媒体明白,影响人们的最佳方式不是通过逻辑,而是通过情感。他们明白我们人类不是通过有意识的思考和逻辑处...

    deephub
  • 【玩转腾讯云】blueflyming.cn个人博客搭建

    本博客系统使用GatsbyJS构建,源码来自UnrealCPP,这里修改了部分功能。

    blueflyming
  • Vue.js最佳静态站点生成器对比

    在过去的几年中,Vue.js 已成为 Web 应用程序开发的流行选项。用户变多后,这个框架开始将触角伸向了静态站点生成,一个曾经由 React 统治的领域。

    winty

扫码关注云+社区

领取腾讯云代金券