Gatsby極速入門(mén)—添加博客文章列表（3）

cnTomato 發(fā)布于2019-08-26 13:55 / 1835人閱讀

摘要：查數(shù)據(jù)如圖所示，套頁(yè)面打開(kāi)打開(kāi)首頁(yè)，看到文章列表就大功告成了。

1.查數(shù)據(jù)

{
  allMarkdownRemark(sort: {order: DESC, fields: [frontmatter___date]}) {
    edges {
      node {
        frontmatter {
          title
          path
          date
          excerpt
        }
      }
    }
  }
}

如圖所示，

2.套頁(yè)面

打開(kāi)index.js

import React from "react"
import Header from "../components/header"
import { Link,graphql } from "gatsby"

const Layout = ({ data }) => {
  const { edges } = data.allMarkdownRemark;
  return (
    
      
      
        {
          edges.map(edge => {
            const { frontmatter } = edge.node;
            return (
              
                
                 {frontmatter.title}
                
              
            )
          })
        }
      
    
  )
}
export const query = graphql`
query{
    allMarkdownRemark (sort:{
      order:DESC,
      fields:[frontmatter___date]
    }){
      edges {
        node {
          frontmatter {
            title
            path
            date
            excerpt
          }
        }
      } 
  }
}
`;
export default Layout;

打開(kāi)首頁(yè)，看到文章列表就大功告成了。

GPU云服務(wù)器云服務(wù)器文章列表顯示文章列表博客中國(guó)最新文章列表文章js收縮效果

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/109804.html

相關(guān)文章

Gatsby極速入門(mén)—添加博客內(nèi)容頁(yè)（4）

摘要：查數(shù)據(jù)注意，這里跟前面不一樣了，我用這個(gè)文件去提供數(shù)據(jù)，沒(méi)有什么為什么，規(guī)定，照做就好。很清晰明顯，這里就說(shuō)一點(diǎn)我傳遞了一個(gè)參數(shù)，到內(nèi)容頁(yè)。創(chuàng)建內(nèi)容頁(yè)模板在下創(chuàng)建這里只要對(duì)應(yīng)的路徑的那個(gè)文章查詢 1.查數(shù)據(jù) 注意，這里跟前面不一樣了，我用gatsby-node.js這個(gè)文件去提供數(shù)據(jù)，沒(méi)有什么為什么，規(guī)定，照做就好。 const path = require(path); export...

wean 2019-08-23 17:51 評(píng)論0 收藏0
Gatsby極速入門(mén)—安裝和博客搭建（0）

摘要：安裝創(chuàng)建項(xiàng)目開(kāi)發(fā)注意報(bào)錯(cuò)文件空格問(wèn)題，最好不要用空格和中文。直接放在硬盤(pán)根目錄下就不會(huì)有問(wèn)題。打開(kāi)，看到如下效果就成功了構(gòu)建查看效果打開(kāi)瀏覽器看到如下效果大功告成 1.安裝 yarn global add gatsby-cli 2.創(chuàng)建gatsby項(xiàng)目 gatsby new blog 3.開(kāi)發(fā) gatsby develop 注意報(bào)錯(cuò)： error UNHANDLED EXCEPT...

qieangel2013 2019-08-23 17:21 評(píng)論0 收藏0
Gatsby極速入門(mén)—添加上一頁(yè)下一頁(yè)功能（完結(jié)篇）

摘要：調(diào)整這個(gè)就簡(jiǎn)單了打開(kāi)，增加代碼如下這里是新增加的調(diào)整打開(kāi)首頁(yè)，點(diǎn)擊頁(yè)面跳轉(zhuǎn)到對(duì)應(yīng)的頁(yè)面大功告成。總結(jié)到此，通過(guò)就快速的搭建了一個(gè)博客網(wǎng)站，我們只需書(shū)寫(xiě)文件就能生成對(duì)應(yīng)的網(wǎng)頁(yè)了。至于網(wǎng)頁(yè)美化，那是切圖的事兒，我就不在這里墨跡了。 1.調(diào)整gatsby-node 這個(gè)就簡(jiǎn)單了,打開(kāi)gatsby-node.js，增加代碼如下： const path = require(path); expo...

youkede 2019-08-23 17:59 評(píng)論0 收藏0
Gatsby極速入門(mén)—支持Markdown（1）

摘要：安裝插件我用就是因?yàn)樗С炙圆荒E，直接整支持。添加格式化文章在下面添加三篇文章，頭部格式如下教程完整代碼如圖所示 1.安裝插件我用Gatsby就是因?yàn)樗С諱arkdown.所以不墨跡，直接整Md支持。 yarn add gatsby-source-filesystem yarn add gatsby-transformer-remark 2.添加格式化文章在src>page...

RobinTang 2019-08-26 18:27 評(píng)論0 收藏0
Gatsby極速入門(mén)—使用GraphQL解析Markdown（2）

摘要：什么是既是一種用于的查詢語(yǔ)言也是一個(gè)滿足你數(shù)據(jù)查詢的運(yùn)行時(shí)。嵌套將組件扔到下面的里面打開(kāi)首頁(yè)，看到網(wǎng)站的描述就大功告成了。 1.什么是GraphQL GraphQL 既是一種用于 API 的查詢語(yǔ)言也是一個(gè)滿足你數(shù)據(jù)查詢的運(yùn)行時(shí)。 GraphQL 對(duì)你的 API 中的數(shù)據(jù)提供了一套易于理解的完整描述，使得客戶端能夠準(zhǔn)確地獲得它需要的數(shù)據(jù)，而且沒(méi)有任何冗余，也讓 API 更容易地隨著時(shí)間...

fou7 2019-08-26 13:48 評(píng)論0 收藏0