hexo-pwa_支持PWA和暗模式的gatsby-image

hexo-pwa

Building responsive web apps involves the cumbersome task of adding media queries in CSS.

构建响应式Web应用程序涉及在CSS中添加媒体查询的繁琐任务。

Thanks to the rapid advancements in CSS and CSS-in-JS libraries, web responsiveness is only a few lines of code away.

由于CSS和CSS-in-JS库的快速发展，Web响应能力仅需几行代码。

This three-part series explains how to use the React component gatsby-image to create a responsive banner-and-grid gallery with remote, optimized images sourced from Cloudinary. Specifically:

这个由三部分组成的系列文章介绍了如何使用React组件的gatsby-image创建具有响应性的横幅和网格画廊，其中包含来自Cloudinary的远程优化图像。 特别：

• Part 1 explains how to build an optimized webpage by leveraging Cloudinary’s gatsby-transformer-cloudinary plugin and gatsby-image, sourcing and transforming responsive remote images in a GatsbyJS project.
  第1部分介绍了如何利用Cloudinary的gatsby-transformer-cloudinary插件和gatsby-image构建优化的网页，以及在GatsbyJS项目中寻找和转换响应式远程图像。
• Part 2 describes how to source images from Cloudinary into gatsby-image by means of the getFluidImageObject and getFixedImageObject APIs—without GraphQL queries.
  第2部分描述了如何通过getFluidImageObject和getFixedImageObject API将Cloudinary中的图像源转换为gatsby-image，而无需GraphQL查询。
• This post, part 3, expounds how to add dark mode to the gallery with Chakra UI and convert the site to a progressive web app (PWA).
  这篇文章（第3部分）阐述了如何使用Chakra UI将暗模式添加到图库中以及如何将网站转换为渐进式Web应用程序（PWA）。

Here's what the final build looks like:

最终版本如下所示：

Note: You need not read parts 1 and 2 before stepping through the procedures described herein part 3.

注意 ：在逐步执行此处第3部分中描述的过程之前，无需阅读第1部分和第2部分。

暗模式和PWA ( Dark Mode and PWAs )

Dark mode is popular because it saves energy and also, feels good to look at. With Chakra UI, you can easily add dark mode as a default theme with the flexibility to toggle between light and dark modes.

深色模式之所以受欢迎，是因为它节省了能源，而且看起来也不错。 使用Chakra UI，您可以轻松地将黑暗模式添加为默认主题，并可以灵活地在明亮和黑暗模式之间切换。

PWAs are web apps, yet optimized to also run on mobile, just like native mobile apps. To gain that flexibility, you create a manifest file with configuration data for your PWA, enabling users to add the app to mobile devices.

PWA是Web应用程序，但经过优化可在移动设备上运行，就像本机移动应用程序一样。 为了获得这种灵活性，您可以使用PWA的配置数据创建清单文件，使用户可以将应用程序添加到移动设备。

初步步骤 ( Preliminary Steps )

See the section Preliminary Steps in part 2 for installation details. Alternatively, clone this branch of the previous project to get all the packages, layout, pages, and UI to get started quickly.

有关安装详细信息，请参阅第2部分中的“初步步骤” 部分 。 或者，克隆上一个项目的此分支以获取所有程序包，布局，页面和UI，以快速入门。

Be sure to copy the files in components and pages directories of the project in part 2.

确保在第2部分中将文件复制到项目的component和pages目录中。

使用Chakra UI添加黑暗模式 ( Addition of Dark Mode With Chakra UI )

By default, gatsby-plugin-chakra-ui adds the Chakra UI <CSSReset /> component and wraps the root element with the color mode provider. Subsequently, the Chakra UI plugin makes the default Chakra UI theme available throughout the Gatsby app.

默认情况下， gatsby-plugin-chakra-ui添加Chakra UI <CSSReset />组件，并使用颜色模式提供程序包装根元素。 随后，Chakra UI插件将在整个Gatsby应用程序中提供默认的Chakra UI主题。

In addition, the useColorMode hook in gatsby-plugin-chakra-ui enables access to the color-mode context set by the plugin by default. After adopting the default Chakra UI theme, you toggle colorMode from light to dark.

此外， useColorMode ，gatsby-plugin-chakra-ui中的useColorMode钩子允许访问由插件设置的颜色模式上下文。 采用默认的Chakra UI主题后，可以将colorMode从浅切换为暗。

Perform these steps:

执行以下步骤：

1. Edit the Header functional component in the src/components/header.js file with the code below to add a button that toggles the color mode of your site.
   使用下面的代码在src/components/header.js文件中编辑Header功能组件，以添加一个按钮来切换网站的颜色模式。

import {useColorMode} from "@chakra-ui/core";

const Header = ({siteTitle}) => {
    const {colorMode, toggleColorMode} = useColorMode();
    return (
        <Flex
            as="nav"
            align="center"
            justify="space-between"
            wrap="wrap"
            padding="1.5rem"
            bg="blue.900"
            color="white"
        >
            <Flex align="center" mr={5}>
                <Heading as="h1" size="lg">
                    <GatsbyLink to="/">
                        <Box color={'white.800'}>{siteTitle}</Box>
                    </GatsbyLink>
                </Heading>
            </Flex>
            <Button onClick={toggleColorMode} color={colorMode === "light" ? "black" : "white"}>
                Toggle {colorMode === 'light' ? 'Dark' : 'Light'}
            </Button>
        </Flex>
    )
};

useColorMode() fetches the current color mode and conditionally toggles the button style, which switches the color.

useColorMode()获取当前的颜色模式并有条件地切换按钮样式，从而切换颜色。

For full dark mode, use Chakra UI components only and implement the style you desire by setting the appropriate Chakra UI properties.

对于全黑模式，仅使用Chakra UI组件，并通过设置适当的Chakra UI属性来实现所需的样式。

Below is how the app looks in dark mode. As described above, applying dark mode is easy as pie.

以下是该应用在黑暗模式下的外观。 如上所述，应用暗模式很容易。

支持PWA ( Enablement of Support for PWAs )

GatsbyJS touts numerous plugins that deliver extended capabilities. To enable both online and offline PWA support for GatsbyJS apps, leverage these two plugins:

GatsbyJS吹捧许多提供扩展功能的插件。 要同时为GatsbyJS应用程序启用在线和离线PWA支持，请利用以下两个插件：

• gatsby-plugin-manifest, which generates for the app a manifest file, in which you specify the appropriate PWA configuration parameters so that users can add the app to their home screen.
  gatsby-plugin-manifest ，为应用程序生成一个清单文件，您可以在其中指定适当的PWA配置参数，以便用户可以将应用程序添加到其主屏幕。

gatsby-plugin-manifest contains seven options:

gatsby-plugin-manifest包含七个选项：

• name: The name of the PWA

  name ：PWA的名称

• short_name: The short name of the PWA, which is displayed if you do not specify a value for the name option

  short _ name ：PWA的简称，如果未为name选项指定值，则显示该名称

• short_url: The entry URL of the app

  简短的 _ url ：应用程序的输入URL

• background_color: The app’s default background color for the generated splash screen

  background _ color ：生成的初始屏幕的应用程序的默认背景色

• theme_color: The app’s color theme, which is applied to places like the browser bar if they are visible

  theme _ color ：应用程序的颜色主题，该主题适用于浏览器栏等可见的地方

• display: The browser UI of the app: stand-alone, full-screen, minimal-ui, or browser

  display ：应用程序的浏览器用户界面：独立，全屏，最小用户界面或浏览器

• icon: The app icon that is shown on the splash screen and in the app list on mobile devices

  图标 ：显示在初始屏幕和移动设备上的应用程序列表中的应用程序图标

• gatsby-plugin-offline, which enables GatsbyJS apps to continue to run while offline by caching resources during runtime for subsequent requests. If the network is down, the plugin serves to users those cached resources, including the cached pages.
  gatsby-plugin-offline，通过在运行时期间为后续请求缓存资源来使GatsbyJS应用程序在脱机状态下继续运行。 如果网络中断，该插件将为用户提供那些缓存的资源，包括缓存的页面。

When you scaffold the app with the default starter, GatsbyJS adds both plugins. Their configurations reside in the gatsby-config.js file.

当您使用默认启动程序来搭建应用程序时，GatsbyJS会添加两个插件。 它们的配置位于gatsby-config.js文件中。

Do the following:

请执行下列操作：

1. Configure gatsby-plugin-manifest in gatsby-config.js with the code below:
   使用以下代码在gatsby-config.js中配置gatsby-plugin-manifest：

require('dotenv').config();

module.exports = {
    siteMetadata: {
        title: `Ten Brushes Gallery`,
        description: `An art gallery demoing the use of Gatsby-Transformer-Cloudinary`,
        author: `William Imoh`,
    },
    plugins: [
        [...]
        {
            resolve: `gatsby-plugin-manifest`,
            options: {
                name: `Ten Brushes Gallery`,
                short_name: `Ten Brushes`,
                start_url: `/`,
                background_color: `#082254`,
                theme_color: `#082254`,
                display: `fullscreen`,
                icon: `src/images/tbg-image.png`, // This path is relative to the root of the site.
            },
        },
        `gatsby-plugin-offline`,
    ],
}

1. Add an icon of your choice to the src/images directory, matching the path you specified in the options object while configuring the plugin.

   将您选择的图标添加到src/images目录中，以匹配您在配置插件时在options对象中指定的路径。

2. Restart the app for a full-fledged PWA, complete with offline support.

   重新启动应用以获取完整的PWA，并提供离线支持。

To see a PWA in action,

要查看实际的PWA，

• Deploy the app to a provider like Netlify
  将应用程序部署到Netlify等提供商
• Open the app on your browser, preferably on an Android device
  在浏览器（最好是在Android设备上）中打开应用
• Use the browser's Add to Home Screen option to add the app to your device.
  使用浏览器的“ 添加到主屏幕”选项将应用添加到您的设备。

Here's what the app looks like on my device:

这是我的设备上的应用程序外观：

Feel free to try out the deployed version of the app on Netlify.

随时在Netlify上试用该应用程序的已部署版本 。

摘要 ( Summary )

To recap, this post explains how to add dark mode to a GatsbyJS app with the default Chakra UI theme and to turn the site into a PWA with offline support. All you need are a couple of short code snippets.

回顾一下，本文介绍了如何使用默认的Chakra UI主题将暗模式添加到GatsbyJS应用中，以及如何将网站转变为具有离线支持的PWA。 您只需要几个简短的代码片段。

The three-part series covers two processes:

这个由三部分组成的系列涵盖两个过程：

1. Sourcing images served from a content delivery network (CDN) on Cloudinary.
   采购从Cloudinary上的内容交付网络（CDN）提供的图像。
2. Building an image gallery with the React component gatsby-image and populate the gallery with responsive, optimized images and text according to a page layout.
   使用React组件gatsby-image构建图像库，并根据页面布局用响应式，优化的图像和文本填充图像库。

For the complete code, see its repository on GitHub.

有关完整的代码，请参见其在GitHub上的存储库 。

翻译自: https://scotch.io/tutorials/gatsby-image-w-support-for-pwa-and-dark-mode

hexo-pwa