Learn-anything.cn

一、Gatsby 中使用 css 的方式1、导入css文件的两种方式import * as React from "react"// 1、项目路径中导入cssimport "../styles/index.css"// 2、已安装包中导入cssimport "bootstrap/dist/css/bootstrap.min.css"export default function HomePage() { return <div>I'm styled by bootstrap

一、Gatsby页面怎么加载图片？在编写网站页面时，总是会遇到有图片要显示，那么怎么加载这些图片呢？1、Gatsby 中图片有三种形式：本地图片，譬如 ： src/images 目录下的图片；远程网络图片，譬如 ：https://learn-anything.cn/static/cf1d0cf910dcc988ea869d56609eca53/096ec/bainian.webpGatsby 数据层中的图片节点。二、加载本地和网络图片Gatsby 下是通过 StaticIma

一、webp 是什么？webp 是一种新的图像格式，用于web项目，可以大大提高网站访问速度。同样的分辨率，大小比 jpg、png 小 25% 以上；Chrome、Firefox、Edge、Opera 等都支持此格式。二、怎么使用？1、下载和安装下载对应平台软件包，软件包中包含 png/jpg 与 webp 相互转换的工具以及开发所需的库和头文件。下载链接libwebp-1.2.1-windows-x64.zip ：适用于 Windows-x64libwebp-1.2.1-l

一、emotion是什么？用 JavaScript 语法来写 css，主要用于两个框架：agnostic 和 React。下面是用于 React 框架的简单示例：import { css, cx } from '@emotion/css'const color = 'white'render( <div className={css` padding: 32px; background-color: hotpink; font-size: 2

一、统计网站流量哪些人访问了网站？访问了那些网站哪些页面？访问者来自于哪个省市区？年龄多大？这些问题，可通过百度统计这个插件完成。二、注册百度账号注册地址：https://tongji.baidu.com/web/welcome/login注册完成后 --> 登录 --> 管理页面 --> 新增网站 --> 填写网站域名等信息 --> 确认 。跳出的页面会看到如下代码，其中 **** 部分是网站的32位标识，复制保存，后面要用。<

一、MDX 是啥？MDX 是一种文档格式，可以在 Markdown 文档中无缝地插入 JSX 代码。import {Chart} from './snowfall.js'export const year = 2018# Last year’s snowfallIn {year}, the snowfall was above average.It was followed by a warm spring which causedflood conditions in many of t

一、简介Gatsby 编译完成后，会为每个页面生成对应的 HTML 文件。而 gatsby-ssr.js 文件中提供了一些API，用于编译完成之前修改这些 HTML 的内容。二、API 说明1、onRenderBody功能：生成HTML之前，修改一些body信息。const React = require("react")const Layout = require("./src/components/layout")// Adds a class name to the body

一、简介gatsby-config.js 位于项目根目录，用于配置项目信息，如果没有就新建一个。plugins用于配置 plugin ，这个是最常用的siteMetadata设置项目的基本信息：title等描述flags可设置的值，看这里！pathPrefix转换 URL http://www.example.com 为 http://www.example.com/blogproxy开发模式下，让不存在的URL 重定向到指定的URL。详细内容，看这里！/

一、简介Gatsby 在 gatsby-browser.js 文件中提供了一些API，可供开发者 监控浏览器的特定事件 和 写一些全局组件。二、API 说明1、onRouteUpdate功能：监控页面切换的事件// gatsby-browser.jsconst React = require("react")// Logs when the client route changesexports.onRouteUpdate = ({ location, prevLocation

一、简介Gatsby 项目中怎么播放视频？二、解决方案1、HTML5 <video>使用 HTML5 的 video 标签，播放 本地视频 和 远程视频。import * as React from 'react'import dog from '../assets/dog.mp4'const VideoShow = () => { return ( <div> <video width="70%" co

一、Gatsby 怎么使用文件资源？对于 图片、音频、视频文、svg、字体等文件，怎么导入Gatsby中？二、解决方案把文件导入到Gatsby项目中使用，有两种方式：import 和 static folder.import ：Gatsby 会在编译期对 import 导入的资源进行优化（压缩、md5等），提高页面访问性能且不会因为文件而产生多余服务器请求。文件资源导入推荐使用此方式。static folder ：作为备用导入文件资源的方式，适用于文件资源想要明确访问路径。1、impo

一、简介Gatsby CLI 用于 Gatsby 项目的创建、启动、编译等。它是发布于 npm 的包，可以用npm进行安装管理 npm install -g gatsby-cli。二、命令1、new功能：新建 Gatsby 项目。详细用法，看这里！gatsby new gatsby new my-awesome-site2、develop功能：用开发模式运行项目# 启动gatsby develop# 访问http://localhost:8000/# 启动网络访问ga

一、Gatsby 是什么？可建立一个访问速度极快的静态网站。轻松发布：只需执行 gatsby build 命令，所有网站数据都被打包到 public 文件夹中，拷贝此文件夹到 nginx 即可完成网站发布。不中断：网站更新也只是文件覆盖操作，不会因更新而中断服务。速度快：网站所需数据在编译期就获取、压缩、优化完成，无需在打开网页时再花费时间从第三方获取数据，所以网站的访问速度非常快。完善的插件库生态：2500多个插件可免费使用，极大缩短网站开发周期。使用场景如果你有一堆用 Markdow