Gatsby极速入门—添加博客内容页（4）

wean 发布于2019-08-23 17:51 / 485人阅读

摘要：查数据注意，这里跟前面不一样了，我用这个文件去提供数据，没有什么为什么，规定，照做就好。很清晰明显，这里就说一点我传递了一个参数，到内容页。创建内容页模板在下创建这里只要对应的路径的那个文章查询

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 (

    
      {title}
      
    
  )
}

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 } }

GPU云服务器云服务器 html内容页编辑内容页模板html js实现添加标签页 Gatsby

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104258.html

Gatsby极速入门—添加上一页下一页功能（完结篇）

摘要：调整这个就简单了打开，增加代码如下这里是新增加的调整打开首页，点击页面跳转到对应的页面大功告成。总结到此，通过就快速的搭建了一个博客网站，我们只需书写文件就能生成对应的网页了。至于网页美化，那是切图的事儿，我就不在这里墨迹了。 1.调整gatsby-node 这个就简单了,打开gatsby-node.js，增加代码如下： const path = require(path); expo...

youkede 2019-08-23 17:59 评论0 收藏0
Gatsby极速入门—添加博客文章列表（3）

摘要：查数据如图所示，套页面打开打开首页，看到文章列表就大功告成了。 1.查数据 { allMarkdownRemark(sort: {order: DESC, fields: [frontmatter___date]}) { edges { node { frontmatter { title path ...

cnTomato 2019-08-26 13:55 评论0 收藏0
Gatsby极速入门—安装和博客搭建（0）

摘要：安装创建项目开发注意报错文件空格问题，最好不要用空格和中文。直接放在硬盘根目录下就不会有问题。打开，看到如下效果就成功了构建查看效果打开浏览器看到如下效果大功告成 1.安装 yarn global add gatsby-cli 2.创建gatsby项目 gatsby new blog 3.开发 gatsby develop 注意报错： error UNHANDLED EXCEPT...

qieangel2013 2019-08-23 17:21 评论0 收藏0
Gatsby极速入门—支持Markdown（1）

摘要：安装插件我用就是因为它支持所以不墨迹，直接整支持。添加格式化文章在下面添加三篇文章，头部格式如下教程完整代码如图所示 1.安装插件我用Gatsby就是因为它支持Markdown.所以不墨迹，直接整Md支持。 yarn add gatsby-source-filesystem yarn add gatsby-transformer-remark 2.添加格式化文章在src>page...

RobinTang 2019-08-26 18:27 评论0 收藏0
创造属于自己的静态博客

摘要：所以自己定值博客，或许可以让自己坚持更新下去。配合上语雀的文章发布推送绝配，于是有了这么个功能专题。可以前往我的博客阅读：https://ssshooter.com/2019-02... 0 前言本文并不是从 0 开始使用 gatsby.js 搭建博客，starter 使用的是 gatsby-starter-blog。使用 gatsby-starter-blog 可以大量节省项目搭...

Channe 2019-08-23 15:05 评论0 收藏0