- 综合排序
- 最热优先
- 最新优先
- 来自专栏随意记录
Gatsby: 代码高亮
安装插件 npm install --save gatsby-transformer-remark gatsby-remark-highlight-code @deckdeckgo/highlight-code 配置插件 在 gatsby-config.js 中添加： // In your gatsby-config.js plugins: [ { resolve: `gatsby-transformer-remark `, options: { plugins: [ { resolve: `gatsby-remark-highlight-code` }, ], }, }, ] 运行时加载插件 对于 gatsby-starter-blog，在 src/templates/blog-post.js 的 BlogPostTemplate 效果：https://aping-dev.com/gatsby-highlight-code/ [image.png] 参考 gatsby-remark-highlight-code
1.8K30发布于 2020-01-04 - 来自专栏随意记录
Gatsby: 添加标签
安装插件 npm install yarn -g yarn add gatsby-plugin-tags 配置插件 在 gatsby-config.js 的 plugins 中添加： { resolve }, }, 添加、修改文件 参考 https://github.com/rmcfadzean/gatsby-pantry/tree/master/examples/starter-blog 做了适当的修改 build 效果：https://aping-dev.com/gatsby-tags/ [image.png] 参考 gatsby-plugin-tags. https://www.gatsbyjs.org /packages/gatsby-plugin-tags/? =tag https://github.com/rmcfadzean/gatsby-pantry/tree/master/examples/starter-blog
1.7K30发布于 2020-01-07 - 来自专栏learn-anything.cn
Gatsby CLI命令说明！
一、简介 Gatsby CLI 用于 Gatsby 项目的创建、启动、编译等。它是发布于 npm 的包，可以用npm进行安装管理 npm install -g gatsby-cli。 二、命令 1、new 功能：新建 Gatsby 项目。详细用法，看这里！ gatsby new gatsby new my-awesome-site 2、develop 功能：用开发模式运行项目 # 启动 gatsby develop # 访问 http://localhost gatsby build 4、serve 功能：发布后的程序，无法调试，可以在开发机器上，用此命令运行发布程序，用于测试。 gatsby clean 二、参考文档 Gatsby CLI命令说明！
95710编辑于 2021-12-01 - 来自专栏learn-anything.cn
学习gatsby，从这里开始！
一、Gatsby 是什么？ 可建立一个访问速度极快的静态网站。 [data-layer-with-nodes] --- 2、Gatsby 项目文件结构 详情，看这里！ --- 3、官方demo 展示 Gatsby 的各种功能怎么使用。详情，看这里！ --- 三、安装 Gatsby 并新建网站 Gatsby 是在 Node.js 的基础上建立，使用 Gatsby 之前必须先安装 Node.js 且版本 ≥ 12.13。 同样也可以在阿里云上购买一个ESC； 第三步：在阿里云后台设置域名解析到第二步的服务器； 第四步：在服务器上安装nginx； 第五步：在开发机器上编译 gatsby 项目 gatsby clean gatsby --- 八、参考文档 学习gatsby，从这里开始！
2.8K20编辑于 2021-12-01 - 来自专栏learn-anything.cn
Gatsby中怎么使用MDX？
# 安装插件及其依赖库 npm install gatsby-source-filesystem gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react # 或 yarn add gatsby-source-filesystem gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react gatsby-source-filesystem ： 把文件转换为 gatsby 的数据层节点：allFile、File。 gatsby-plugin-mdx ：转换 allFile 节点中格式为 .mdx、.md 的文件，生成新的 gatsby 数据层节点：allMdx、mdx。 2、修改配置 gatsby-config.js 增加下面内容： // gatsby-config.js module.exports = { plugins: [ { resolve
1.7K10编辑于 2021-12-02 - 来自专栏learn-anything.cn
Gatsby中怎么使用emotion？
1、安装 gatsby new global-styles https://github.com/gatsbyjs/gatsby-starter-hello-world cd global-styles npm install gatsby-plugin-emotion @emotion/react @emotion/styled 2、配置 module.exports = { plugins: [`gatsby-plugin-emotion`], } 3、定义 emotion // src/components/layout.js import React from "react" import </Layout> } 5、启动与访问 # 启动 gatsby develop # 访问 http://localhost:8000/ 三、参考文档 Gatsby中怎么使用emotion？
1.5K40编辑于 2021-12-02 - 来自专栏learn-anything.cn
Gatsby中怎么加载图片？
1、StaticImage 安装插件 npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem 增加配置 [ "gatsby-plugin-image", "gatsby-plugin-sharp", ], }; 显示图片 StaticImage 是 gatsby-plugin-image gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react gatsby-transformer-sharp gatsby-plugin-image 第二步：修改 gatsby-config.js 怎么在gatsby中访问 strapi 中数据？ 2、解决方案 借助插件 gatsby-source-strapi 把strapi中数据转为 gatsby 数据节点，方便访问。 gatsby-plugin-image 第二步：修改 gatsby-config.js 中的配置 // gatsby-config.js module.exports = { plugins: [
3.9K50编辑于 2021-12-03 - 来自专栏大前端666
Gatsby入门指南—支持Markdown（1）
1.安装插件 我用Gatsby就是因为它支持Markdown.所以不墨迹，直接整Md支持。 webkit-text-stroke-width: 0px; background-position: inherit inherit; background-repeat: inherit inherit;">yarn add gatsby-source-filesystem yarn add gatsby-transformer-remark 2.添加格式化文章 在src>pages下面,添加三篇文章，头部格式如下： > path : "/blog/my-first-post"date : "2019-05-01"title : "Hello world"tags : ['教程','Gatsby'] > > excerpt : "Gatsby hello word post"
72360发布于 2019-05-25 - 来自专栏随意记录
玩转 PAI：Gatsby 静态博客搭建
bash: node: 未找到命令”，执行： echo "export PATH=/usr/local/node/bin:$PATH" >> ~/.bashrc source ~/.bashrc 下载 Gatsby CLI npm install -g gatsby-cli 下载 Gatsby 静态博客 git clone https://gitee.com/aping-dev/gatsby-starter-blog 安装 Gatsby 静态博客的依赖库 耗时几分钟～几小时，据网速而定 cd gatsby-starter-blog/ npm install --unsafe-perm=true --allow-root --verbose 启动 Gatsby 静态博客 gatsby develop -p 3000 # PAI 中的 nginx 默认代理 3000 端口 也可以将启动命令写入 .pai.yml pai-instance-document [图片.png] 参考 https://www.gatsbyjs.org/docs/quick-start/ https://github.com/gatsbyjs/gatsby-starter-blog
1.2K40发布于 2019-12-20 - 来自专栏京程一灯
用 Gatsby 创建一个博客
Gatsby 的 CLI包含了许多常见的开发特性，比如 gatsby build (构建一个生产、静态生成的项目版本)、 gatsby develop(启动一个热加载的web开发服务器)等等。 在安装了这些功能插件之后，我们将编辑 gatsby-config.js。Gatsby 在构建时加载指定插件的公开功能。 'gatsby-plugin-catch-links', 'gatsby-plugin-react-helmet', { resolve: `gatsby-source-filesystem 这个API写在在 gatsby-node.js文件中，在这个文件中发现的每一个导出都将由 Gatsby 分析。Gatsby详细地介绍了它的Node API规范。 Links @dschau/gatsby-blog-starter-kit 展示 Gatsby 所有上述功能的可用的库 @dschau/create-gatsby-blog-post 我创建了一个实用程序和
3.5K30发布于 2019-03-27 - 来自专栏learn-anything.cn
gatsby-browser.js有什么作用？
一、简介 Gatsby 在 gatsby-browser.js 文件中提供了一些API，可供开发者 监控浏览器的特定事件 和 写一些全局组件。 二、API 说明 1、onRouteUpdate 功能：监控页面切换的事件 // gatsby-browser.js const React = require("react") // Logs prevLocation.pathname : null) } 2、wrapPageElement 功能：用于plugin，给所有页面增加一层父容器 // gatsby-browser.js 和 gatsby-browser.js 这两个文件中都提供了这两个API：wrapPageElement 和 wrapRootElement 。 四、参考文档 gatsby-browser.js有什么作用？
1.2K30发布于 2021-12-02 - 来自专栏learn-anything.cn
gatsby-ssr.js有什么作用？
一、简介 Gatsby 编译完成后，会为每个页面生成对应的 HTML 文件。而 gatsby-ssr.js 文件中提供了一些API，用于编译完成之前修改这些 HTML 的内容。 exports.wrapPageElement = ({ element, props }) => { return <Layout {...props}>{element}</Layout> } 三、重要规则 1、一致性 gatsby-ssr.js 和 gatsby-browser.js 这两个文件中都提供了这两个API：wrapPageElement 和 wrapRootElement 。 四、参考文档 gatsby-ssr.js有什么作用？
1.7K20编辑于 2021-12-02 - 来自专栏learn-anything.cn
gatsby-config.js有什么作用？
一、简介 gatsby-config.js 位于项目根目录，用于配置项目信息，如果没有就新建一个。 // gatsby-config.js module.exports = { siteMetadata: { title: `Gatsby`, siteUrl: `https://www.gatsbyjs.com `, description: `Blazing fast modern site generator for React`, }, plugins: [ `gatsby-transform-plugin `, { resolve: `gatsby-plugin-name`, options: { optionA: true, optionB pathPrefix: `/blog`, proxy: { prefix: "/api", url: "http://examplesite.com/api/", }, } 二、参考文档 gatsby-config.js
1.3K20编辑于 2021-12-02 - 来自专栏learn-anything.cn
Gatsby 中怎么加载使用文件资源？
一、Gatsby 怎么使用文件资源？ 对于 图片、音频、视频文、svg、字体等文件，怎么导入Gatsby中？ --- 二、解决方案 把文件导入到Gatsby项目中使用，有两种方式：import 和 static folder. import ：Gatsby 会在编译期对 import 导入的资源进行优化（压缩、 --- 四、参考文档 Gatsby 中怎么加载使用文件资源？
1.7K20编辑于 2021-12-02 - 来自专栏AVENIRZHENG
Gatsby 博客部署到腾讯云教程
整体流程 Tips: 我正在学习用 Figma 做图，如需上图源文件可以点击这里 准备工作 本地环境 Gatsby 基于 Node.js, Gatsby CLI 依赖 Git，先确保本地开发环境已经 安装 Node.js； 安装 Git； Gatsby 开发环境 Gatsby 的 CLI 工具非常方便，在终端全局安装 gatsby-cli npm install -g gatsby-cli 切换到开发目录 gatsby new ，然后设置项目名称，例如 site ，选择起始模板 starter gatsby new 最后在切换到刚才的 site 目录，gatsby develop cd /code/avenirzheng.net /v6/site #gatsby 站点目录。 Tips: 某些情况下因为代理或者墙的原因，无法使用 Gatsby CLI 从 github 上拉取代码，你可以通过能链通的 npm 源手动创建一个 Gatsby 站点目录。
5K111发布于 2020-03-20 - 来自专栏大前端666
Gatsby入门指南—添加博客文章列表(3)
/components/header' import { Link,graphql } from 'gatsby' const Layout = ({ data }) => { const {
70640发布于 2019-05-28 - 来自专栏大前端666
Gatsby入门指南—安装和博客搭建（0）
1.安装 yarn global add gatsby-cli 2.创建gatsby项目 gatsby new blog 3.开发 gatsby develop 注意报错： error UNHANDLED 打开浏览器浏览图片中地址，看到如下效果就成功了： 1556615422628.png 4.构建 gatsby build 5.查看效果 gatsby serve 打开浏览器：浏览图片中地址，看到如下效果
67450发布于 2019-05-26 - 来自专栏learn-anything.cn
Gatsby中怎么在组件中使用css？
一、Gatsby 中使用 css 的方式 1、导入css文件的两种方式 import * as React from "react" // 1、项目路径中导入css import ".. function HomePage() { return
I'm styled by bootstrap & src/styles/index.css} 2、全局 css 使用 gatsby-browser.js 3、组件样式 gatsby 为自动修改样式组件中的className，使其具有唯一性，避免与其他名称冲突而失效。 新建以 .module.css 为后缀的文件，在其中编写 css 代码。 section className={`container ${containerStyles.container}`}> {children} ) } 二、Gatsby 三、参考文档 Gatsby中怎么在组件中使用css？4.5K60编辑于 2021-12-03 - 来自专栏大前端666
Gatsby入门指南—添加博客内容页(4)
1.查数据 注意，这里跟前面不一样了，我用gatsby-node.js这个文件去提供数据，没有什么为什么，规定，照做就好。 创建内容页模板 在src>templates下创建blogPost.js import React from "react" import { graphql,Link } from 'gatsby
58420发布于 2019-05-29 - ) } export default VideoShow; 三、参考文档 Gatsby来自专栏learn-anything.cn
Gatsby 中怎么加载使用视频文件？
一、简介 Gatsby 项目中怎么播放视频？ 二、解决方案 1、HTML5
1K50编辑于 2021-12-02
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号