专栏首页大前端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入门指南—添加上一页下一页功能(完结篇)

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

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

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

    前端大彬哥
  • Gatsby入门指南—添加博客内容页(4)

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

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

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

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

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

    前端大彬哥
  • const关键字总结

    被const修饰的变量是不能改变的 const修饰变量时,必须在声明变量的同时给出初始化(类中的const成员变量不一样)

    WindSun
  • 【面试宝典】C++中const关键字的用法

    对于刚毕业的应届生来说面试中经常被问到const关键字的用法,小编在这里为大家总结如下: 修饰常量 用const修饰的变量某种意义上就是常量,编译器会对它进行...

    程序员互动联盟
  • C++ const各种用法总结

    原文链接:https://www.toutiao.com/i6644404128439075332/

    Steve Wang
  • 吴锦华 / 明鑫 : 用户态文件系统 ( FUSE ) 框架分析和实战

    用户态文件系统(filesystem in userspace, 简称 FUSE),它能使用户在无需编辑和编译内核代码的情况下,创建用户自定义的文件系统。

    Linuxer

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动