資訊專(zhuān)欄INFORMATION COLUMN
摘要：查數(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è)文章查詢(xún)
1.查數(shù)據(jù)
注意，這里跟前面不一樣了，我用gatsby-node.js這個(gè)文件去提供數(shù)據(jù)，沒(méi)有什么為什么，規(guī)定，照做就好。
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
},
})
})
})
}
很清晰明顯，這里就說(shuō)一點(diǎn)我傳遞了一個(gè)參數(shù)，pathSlug到內(nèi)容頁(yè)。
2.創(chuàng)建內(nèi)容頁(yè)模板在src>templates下創(chuàng)建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;
這里只要對(duì)應(yīng)的路徑的那個(gè)文章查詢(xún)
frontmatter: { path: { eq: $pathSlug } }
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/104258.html
摘要：調(diào)整這個(gè)就簡(jiǎn)單了打開(kāi)，增加代碼如下這里是新增加的調(diào)整打開(kāi)首頁(yè)，點(diǎn)擊頁(yè)面跳轉(zhuǎn)到對(duì)應(yīng)的頁(yè)面大功告成?？偨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...
摘要：查數(shù)據(jù)如圖所示，套頁(yè)面打開(kāi)打開(kāi)首頁(yè)，看到文章列表就大功告成了。 1.查數(shù)據(jù) { allMarkdownRemark(sort: {order: DESC, fields: [frontmatter___date]}) { edges { node { frontmatter { title path ...
摘要：安裝創(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...
摘要：安裝插件我用就是因?yàn)樗С炙圆荒E，直接整支持。添加格式化文章在下面添加三篇文章，頭部格式如下教程完整代碼如圖所示 1.安裝插件 我用Gatsby就是因?yàn)樗С諱arkdown.所以不墨跡，直接整Md支持。 yarn add gatsby-source-filesystem yarn add gatsby-transformer-remark 2.添加格式化文章 在src>page...
摘要：所以自己定值博客，或許可以讓自己堅(jiān)持更新下去。配合上語(yǔ)雀的文章發(fā)布推送絕配，于是有了這么個(gè)功能專(zhuān)題。 可以前往我的博客閱讀：https://ssshooter.com/2019-02... 0 前言 本文并不是從 0 開(kāi)始使用 gatsby.js 搭建博客，starter 使用的是 gatsby-starter-blog。使用 gatsby-starter-blog 可以大量節(jié)省項(xiàng)目搭...
閱讀 1649·2023-04-26 00:20
閱讀 1251·2023-04-25 21:49
閱讀 887·2021-09-22 15:52
閱讀 676·2021-09-07 10:16
閱讀 1046·2021-08-18 10:22
閱讀 2745·2019-08-30 14:07
閱讀 2314·2019-08-30 14:00
閱讀 2743·2019-08-30 13:00
