首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Gatsby:将状态传递给markdown文件中的链接?

Gatsby是一个基于React的静态网站生成器,它可以帮助开发者快速构建高性能的静态网站。在Gatsby中,可以通过将状态传递给markdown文件中的链接来实现一些动态的功能。

要将状态传递给markdown文件中的链接,可以使用Gatsby提供的GraphQL查询语言和页面查询功能。以下是一种实现方式:

  1. 首先,在Gatsby项目中创建一个页面组件,例如src/pages/blog.js
  2. 在该页面组件中,使用GraphQL查询语言查询markdown文件的数据。可以使用gatsby-source-filesystem插件将markdown文件作为数据源导入到Gatsby中。查询语句可以类似如下:
代码语言:txt
复制
import React from "react"
import { graphql } from "gatsby"

export const query = graphql`
  query {
    allMarkdownRemark {
      edges {
        node {
          frontmatter {
            title
            path
          }
        }
      }
    }
  }
`

const BlogPage = ({ data }) => {
  const posts = data.allMarkdownRemark.edges

  return (
    <div>
      {posts.map(({ node }) => (
        <a href={node.frontmatter.path}>{node.frontmatter.title}</a>
      ))}
    </div>
  )
}

export default BlogPage
  1. 在上述代码中,通过graphql函数将查询语句与页面组件进行关联,并将查询结果作为组件的props传递进来。然后,可以遍历查询结果,将markdown文件中的链接渲染为可点击的链接。

这样,当访问/blog页面时,就会将markdown文件中的链接渲染出来,并且可以通过点击链接来访问对应的页面。

关于Gatsby的更多信息和使用方法,可以参考腾讯云的相关产品和文档:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Gatsby 创建一个博客

例如,一个典型工作流通常需要使用gatsby-source-filesystem它从磁盘上加载文件,例如 Markdown 文件,然后指定一个 Markdown 转换器 Markdown 转换成 HTML...一个 options 对象可以传递给一个插件,我们正在传递文件系统路径(也就是我们 Markdown 文件将被定位位置),然后是源文件名称。...既然 Gatsby 知道了我们文件,我们就可以开始应用一些有用变压器来这些文件转换为可用数据!...filesystem源插件将从我们文件系统中加载文件节点(如 Markdown ),然后 Markdown 转换器接管并转换为可用 HTML 。...我们定义每个键都可以被注入到查询。 现在,我们已经安装了一堆插件来从磁盘加载文件 Markdown 转换为HTML。我们有一个单独 Markdown 文件,它将作为一个博客发布。

2.5K30

一杯茶时间,上手 Gatsby 搭建个人博客

生成 /src/pages 以外页面文件,如为每个 Markdown 文章生成页面文件。 此外还有两个不那么常用配置文件。...Remark 插件坑 Gatsby 处理 markdown 最常用也是默认插件是 gatsby-transformer-remark。...迁移博客需要考虑一个重要问题便是路径兼容。我们当然不希望迁移后原有的链接无法访问,这不仅影响到 SEO ,更带来了不好用户访问体验。本文聊聊怎么让 Gatsby 兼容 Jekyll 式路径。...这里通过 exports.createPages 回调 graphql 来查询 Markdown 文件。...通过实现自定义路径基本上可以了解 Gatsby 页面生成方式了。下节我会继续谈谈其它个性化配置,如草稿模式和显示上下篇博文。 草稿模式 草稿模式即可以文章保存为草稿而不被渲染出来。

3.2K20

神器 Markmap !!

1 前言 Markdown 好处是专注码字同时还能兼顾排版,不用像 word 那样文本加个粗都需要移动下鼠标,体验非常好。...最近发现一款很好用工具,可以很好解决上边问题,在此分享给大家。 2 工具介绍 这款工具叫markmap。 markmap 可以 Markdown 语法文本通过思维导图方式进行可视化。...左边录入 Markdown 文本,右边会实时展示出思维导图。 Markdown 语法链接,加粗,删除线,斜体,单行代码,代码块,数学公式,转换成思维导图都有相应视图效果。...而且支持下载生成动态化 html 文件以及 svg 文件。 动态化效果如下图,可以折叠和打开。 离线版 如果你想拥有更好使用体验,并且希望在断网情况下也能够使用,那我推荐你下面这种方案。...编辑 Markdown 文本,文件名以 .mm.md 结尾即可使用,并且可以点击右下角「export」按钮导出动态 html 文件

73530

2023 年,这 9 个项目助你成为前端高手

学到什么 跟随本教程,你学习如何从零开始构建一个 Vue 应用程序——创建组件、处理状态、创建路由、连接到第三方服务,甚至是进行身份验证。...你应该尝试一下它,因为它也帮助你成为更好 Vue 开发者。 7 用 Gatsby 构建一个博客 Gatsby 是一个很好静态站点生成器,它在底层使用了 React 和 GraphQL。...这个项目看起来是这样。 你学到什么 在这个教程,你学习如何利用 Gatsby、React 和 GraphQL 构建一个出色博客。...技术栈和特性 Gatsby React GraphQL 插件和主题 MDX/Markdown Bootstrap CSS 模板 如果你曾经想过要开发一个博客,这就是一个很好例子(https://blog.bitsrc.io...你学到什么 这个项目教你如何使用 Gridsome、GraphQL 和 Markdown 构建一个简单博客。 它还介绍了如何通过 Netlify 来部署应用程序。

3.1K20

9个不错前端开源项目

无论您是刚开始编程还是已经是一名经验丰富开发人员,在这个行业,学习新概念和语言/框架是跟上快速变化必要条件。...您将学到什么 在本教程,您将学习如何利用Gatsby构建出色博客,以便在使用React和GraphQL同时编写自己文章。...技术栈和功能 Gatsby React GraphQL Plugins and themes MDX/Markdown Bootstrap CSS Templates 如果您想创建博客,这是一个很好示例...这也是一个很棒静态网站生成器,可帮助您创建出色博客: ? 您将学到什么 该项目教您如何构建一个简单博客,以开始使用Gridsome,GraphQL和Markdown。...您应该已经配置了可运行Android Studio / XcodeCordova设置。如果没有,该教程中将有一个指向Quasar网站链接,在那里他们向您展示了如何进行设置。

6.1K30

学习gatsby,从这里开始!

轻松发布:只需执行 gatsby build 命令,所有网站数据都被打包到 public 文件,拷贝此文件夹到 nginx 即可完成网站发布。...使用场景 如果你有一堆用 Markdown 编辑文章,想要发布到网上,又不想浪费时间在编辑排版上,那么用 Gatsby 生成一个博客网站,是一个非常不错解决方案。...这种 URL 与 代码文件 之间对应关系就称之为页面路由。那么Gatsby 怎么新建代码页面?其页面路由又有哪些规则? 1、新建页面及其路由 详细步骤,看这里!...--- 4、使用 MDX 文件新增页面 MDX文件是指 在 markdown 文件中直接插入 jsx 代码 混合文件,怎么用在Gatsby?详细步骤,看这里!...build # 项目目录下会生成 public 文件夹 第六步:把第五步 public 文件夹 下所有内容拷贝至 第四步nginx下,并设置好ngingx 配置文件; 第七步:可以通过域名访问网站了

2.1K20

进击JAMStack

接着我们再具体看一下JavaScript,APIs和Markdown这三种技术在JAMStack世界是起到什么作用。...Markdown Mardown是一种轻量级标记语言。在JAMStack世界Markdown类型文件通常是用来作为生成静态HTML文件数据源。...我们接着来看一下博客网站代码目录结构: 上面代码,server文件夹存放是一个简单管理用户评论express应用,src文件夹才是Gatsby操作前端资源,它包括以下内容: blogs:这个文件夹是用来存放博客内容...,每一个Markdown文件都会生成一个静态HTML文件。...templates: 网站模板文件夹,该文件夹底下只有一个叫做blog-post.js模板文件,在Gatsby构建网站时候blogs文件夹底下每一个Markdown文件都会通过这个模板文件生成一个对应

2.8K30

博客用不着什么JavaScript框架

我不需要抽象层或 CMS 复杂性——我最喜欢用 markdown 文件编写内容,并且希望永远不要再碰 Mysql 数据库或所见即所得编辑器。...哪怕你网站没有任何互动元素(链接除外,即使没有 Gatsby,它们也无需 JavaScript 即可工作),你用户也必须下载这部分 JavaScript,仅仅是为了将你网站变成单页应用程序(SPA...Eleventy 为你提供了十种可以任意搭配模板语言选项,包括 markdown、nunjucks 和 liquid;这意味着我可以从 Craft 复制并粘贴旧模板,更改文件扩展名,并做一些细微调整就能运行在...Eleventry 还有一些让我感到困惑事情:我有一阵子一直搞不懂它分页功能,认为它只是帖子分页到指定大小一些组,之后才意识到它可以动态生成全新页面;我还发现自己在同一文件混用了模板语言:...你可以随意在 markdown 文件包含 nunjucks 标签,或基于 yaml frontmatter 换成 JavaScript,但这会破坏语法高亮显示、linting 和自动格式化。

4.1K10

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

用户变多后,这个框架开始触角伸向了静态站点生成,一个曾经由 React 统治领域。...在 VuePress ,每个页面都被视为一个 markdown 文件,它们被渲染为 HTML 页面,并在加载页面时充当一个单页应用程序。...提供内置 markdown 扩展。 包括强大搜索插件、PWA 功能、Google Analytics 等。 默认处理 markdown 到 HTML 转换任务。...与 React Gatsby 相似,Gridsome 是一个数据驱动框架。Gridsome 使用一个 GraphQL 层从各种源获取内容,然后从中动态生成页面。...与 Gatsby 和 Gridsome 类似,Saber 允许你使用你想用数据来创建静态网站。你可以从不同文件系统中提取数据。有了 Saber,你就不用操心 GraphQL 了。

4.8K10

如何利用机器学习和Gatsby.js创建假新闻网站​

gatsby-transformer-sharp和gatsby-transformer-remark也是重要插件。它们可以自动markdown 文件转换为可用于web格式。...其他插件不太重要,就不介绍了。 gatsby-node.js 此文件用于实现api。这些api可以使用GraphQL从数据层获取数据。在处理程序化页面生成时,我们更深入地研究这个文件内容。...我们可以使用名为Gatsby -source-drive插件文件直接导入到Gatsby本地文件系统。这需要在谷歌api设置一个服务帐户。...编程式页面生成 我们已经使用谷歌Colab生成了文章,并且使用gatsby-source-drive插件文件直接归档到我们本地文件系统。现在我们需要使用markdown文件以编程方式生成网页。...,为每个markdown文件创建数据节点,然后所有这些节点将与页面模板一起使用,以创建实际页面。

4.5K60

2018年1月份最热门JavaScript开源项目

TOAST UI EditorMarkdown模式特点有: ● 所见即所得。你在编辑Markdown同时,可以预览生成HTML页面。 ● 异步滚动。...它会将你在 Webpack 构建开发和生产过程所有相关信息都放到浏览器。 JARVIS 非常漂亮,可显示导入 ES Harmony 模块数量,以及资产在 12 种不同连接类型表现。...代码片段文章,让你能够在极短时间内可以理解使用它们,分为日期、节点、功能模块等部分,你可以直接文件这些代码直接导入到你文本编辑器(VSCode,Atom,Sublime) 八、puppeteer...● 自定义标签:使用自定义标签构建复杂用户界面。自定义标签是无状态,易于调试。...十五、Gatsby https://github.com/gatsbyjs/gatsby Star 18245 ? Gatsby 可以使用 React.js 把纯文本转换到动态博客或者网站上。

2K80

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

: 在这个教程,你学习如何从头开始设置一款Vue应用,创建组件、处理状态、创建路由、连接到第三方服务,甚至处理身份验证。...你学到什么内容: 这个示例项目教你从初始设置到最终部署,使用Nuxt.js构建完整网站全过程。...技术栈和功能: Nuxt.js 组件和页面 Storyblok模块 Mixins 用于状态管理Vuex SCSS样式 Nuxt中间件 教程:https://www.storyblok.com/tp/nuxt-js-multilanguage-website-tutorial...06 使用Gatsby建立博客 你学到什么内容: 在本教程,你学习如何利用Gatsby构建出色博客,可以很好地用来撰写自己文章,同时利用React和GraphQL能力。...技术栈和功能: Gatsby React GraphQL 插件和主题 MDX/Markdown 引导CSS 教程:https://blog.bitsrc.io/how-to-build-a-blog-with-gatsby-and-boostrap-d1270212b3dc

2.9K20

2022 年 React 生态

如果需要全局状态管理,可以选择加入 React 内置 useContext Hook 来 props 从顶层组件传递到底层组件,从而避免 props 多层透问题。...如果你已经在使用 Redux,并且想要在 Redux 添加集成状态管理数据请求功能,建议你看看 RTK Query,它将数据请求功能更巧妙集成到 Redux 。...在 React , CSS Module 通常是 CSS 文件放在 React 组件文件: import styles from '....每当类型错误 prop 传递给组件时,你可以在运行时收到错误消息: import PropTypes from 'prop-types'; const List = ({ list }) =>...它是一个比较固执代码格式化器,可选择配置很少。你也可以将它集成到编辑器或IDE,以便在每次保存文件时候自动对代码进行格式化。

5.7K20

http:blog.csdn.netu010105969articledetails53541088

本文链接:https://blog.csdn.net/u010105969/article/details/101682356 iOS开发WKWebView与JS交互 之前已经写过一个篇OC与JS...JS代码利用 alert(‘liangsen…’); 来给我们传递数据,我们用runJavaScriptAlertPanelWithMessage这个方法来接收JS传递给我们数据。...数据: 网页给客户端传递数据有时并不只是一个字符串这个简单,还可能是JSON数据类型数据,这时我们需要其他传递数据方式。...js alert in js’}); AppModel是我们注入对象,“()”内容是我们传递给客户端数据。...,Markdown 代码片显示选择高亮样式 进行展示; 增加了 图片拖拽 功能,你可以本地图片直接拖拽到编辑区域直接展示; 全新 KaTeX数学公式 语法; 增加了支持甘特图mermaid语法

1.5K30

构建快速、安全、可扩展静态站点:终极指南

本文深入探讨静态站点构建关键概念,为您提供一份全面的指南,并提供带有实际代码示例技巧,以帮助您创建卓越静态网站。 第一部分:静态站点基础 1.1 什么是静态站点?...解释静态站点概念和优势,包括性能、安全性和扩展性。 1.2 静态站点生成器 介绍静态站点生成器,如Jekyll、Hugo和Gatsby,以及它们工作原理。...# 示例代码:使用Gatsby创建新静态站点 npm install -g gatsby-cli gatsby new my-site 第二部分:内容管理和数据源 2.1 内容管理系统(CMS) 如何选择和集成内容管理系统...2.2 数据源和API 讲解如何获取数据,包括从API、Markdown文件、数据库或其他来源获取数据。...5.2 SEO优化 如何配置静态站点以在搜索引擎获得更好排名,包括Sitemap和元数据。 <?

25070
领券