beego静态页面设置

介绍 (Introduction)

GatsbyJS is a React-based static site generator powered by GraphQL. It makes it possible for you to code and develop your site while Gatsby transforms it into a directory with a single HTML file with all your static assets. On it’s own, Gatsby is fast and comes preconfigured with service workers, code splitting, server-side rendering, intelligent image loading, asset optimization, and data prefetching.

GatsbyJS是由GraphQL支持的基于React的静态站点生成器。 这样一来，您就可以对网站进行编码和开发，而Gatsby会将其转换为包含所有静态资产的单个HTML文件的目录。 Gatsby本身速度很快，并预先配置了服务人员，代码拆分，服务器端渲染，智能图像加载，资产优化和数据预取。

GatsbyJS, however, does not come with animated page transitions out of the box. In this tutorial, in order to enhance your front-end design capabilities, you will see a few strategies to add page transitions to your GatsbyJS application, such as using a React transition group and using a transition plugin.

但是，GatsbyJS并未提供动画页面转换功能。 在本教程中，为了增强前端设计功能，您将看到一些将页面转换添加到GatsbyJS应用程序的策略，例如使用React转换组和转换插件。

先决条件 (Prerequisites)

To get started with this tutorial, you need preliminary knowledge of React.js. This will help you navigate the code we’ll use here.

要开始学习本教程，您需要具备React.js的初步知识。 这将帮助您浏览我们将在此处使用的代码。

第1步-创建新的Gatsby应用 (Step 1 — Creating a New Gatsby App)

If you haven’t already, go ahead and install the Gatsby CLI tool with the following command:

如果尚未安装，请继续使用以下命令安装Gatsby CLI工具：

With that installed, we can now run Gatsby specific commands to create, build, and deploy our applications.

安装该程序后，我们现在可以运行Gatsby特定的命令来创建，构建和部署我们的应用程序。

To create a new Gatsby project, open a terminal window in your preferred directory and run:

要创建新的Gatsby项目，请在您的首选目录中打开一个终端窗口，然后运行：

This will create a new Gatsby project for you. You can navigate into the project folder and run the server command to launch the development server:

这将为您创建一个新的Gatsby项目。 您可以导航到项目文件夹并运行server命令以启动开发服务器：

This will launch the project on localhost:8000: if you open that up in your browser, you will see your Gatsby project live.

这将在localhost:8000上启动该项目：如果在浏览器中将其打开，您将看到Gatsby项目正在运行。

第2步—使用React Transition组添加页面过渡 (Step 2 — Adding Page Transitions with React Transition Group)

The React transition group is the first and most popular way of adding transitions to Gatsby applications. It is worthy to note this is not an animation library by design, so it doesn’t have the ability to animate styles by itself. Instead it exposes transition stages, manages classes and group elements, and manipulates the DOM in useful ways, making the implementation of actual visual transitions much easier.

React过渡组是向Gatsby应用程序添加过渡的第一种也是最受欢迎的方法。 值得注意的是，这并不是设计上的动画库，因此它本身无法对样式进行动画处理。 相反，它公开了过渡阶段，管理类和组元素，并以有用的方式操作DOM，从而使实际视觉过渡的实现更加容易。

安装依赖项 (Installing the Dependencies)

Let’s go ahead and install it and demonstrate how we can leverage it to transition between the pages in our application.

让我们继续进行安装，并演示如何利用它在应用程序的页面之间进行转换。

It will monitor the entry and exit state of elements in the DOM and then apply transitions to them accordingly with respect to our custom transition styles.

它将监视DOM中元素的entry和exit状态，然后根据我们的自定义过渡样式对元素进行过渡。

The next package we’ll need to install is the Gatsby layout plugin. It gives us the ability to provide a location property required for transitions to work and injects our layout on every page.

我们需要安装的下一个软件包是Gatsby布局插件。 它使我们能够提供工作过渡所需的location属性，并在每页上注入我们的布局。

配置GatsbyJS (Configuring GatsbyJS)

The first we’ll need to do after installing the dependencies is to configure the gatsby-config.js file to use the layout we just installed. Open up the file and add the layout plugin in the plugins array:

安装依赖项后，我们首先需要配置gatsby-config.js文件以使用刚刚安装的布局。 打开文件，然后在plugins数组中添加布局插件：

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `My new Gatsby site`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`, 
    {
      resolve: `gatsby-plugin-layout`,
      options: {
        component: require.resolve(`./src/layouts/index.js`),
      },
    },
  ],
}

For this plugin to work correctly, we need to move the layout file from inside the components folder to the root of our project src folder and rename the layout.js file to index.js. Then within the components folder, create a new file called transition.js to host our transition logic implementations. Once done, our application structure will look more like this:

为了使该插件正常工作，我们需要将layout文件从components文件夹内部移动到项目src文件夹的根目录，并将layout.js文件重命名为index.js 。 然后在components文件夹中，创建一个名为transition.js的新文件，以托管我们的过渡逻辑实现。 完成后，我们的应用程序结构将如下所示：

Now let’s go ahead and implement these transitions in our pages. Open the transition.js file we created in the components folder and update it with this code:

现在，让我们继续并在页面中实现这些过渡。 打开我们在components文件夹中创建的transition.js文件，并使用以下代码对其进行更新：

import React from "react"
import {
  TransitionGroup,
  Transition as ReactTransition,
} from "react-transition-group"
const timeout = 500
const getTransitionStyles = {
  entering: {
    position: `absolute`,
    opacity: 0,
  },
  entered: {
    transition: `opacity ${timeout}ms ease-in-out`,
    opacity: 1,
  },
  exiting: {
    transition: `opacity ${timeout}ms ease-in-out`,
    opacity: 0,
  },
}
class Transition extends React.PureComponent {
  render() {
    const { children, location } = this.props
    return (
      <TransitionGroup>
        <ReactTransition
          key={location.pathname}
          timeout={{
            enter: timeout,
            exit: timeout,
          }}
        >
          {status => (
            <div
              style={{
                ...getTransitionStyles[status],
              }}
            >
              {children}
            </div>
          )}
        </ReactTransition>
      </TransitionGroup>
    )
  }
}
export default Transition

Let’s walk through the code in bits. First, we imported TransitionGroup, and ReactTransition from the react-transition-group package we installed earlier. TransitionGroup helps us manage the mounting and unmounting of components in the DOM while the ReactTransition tracks the entry and exit states of elements passed to it.

让我们逐位浏览代码。 首先，我们从之前安装的react-transition-group包中导入TransitionGroup和ReactTransition 。 当ReactTransition跟踪传递给它的元素的entry和exit状态时， TransitionGroup帮助我们管理DOM中组件的安装和卸载。

Next, we declared a timeout variable that will be responsible for our animation durations. We then defined the getTransitionStyles object that will contain the CSS styles for our animation. Finally, we destructured children and location from props for ease of usage.

接下来，我们声明一个timeout变量，该变量将负责动画的持续时间。 然后，我们定义了getTransitionStyles对象，该对象将包含动画CSS样式。 最后，为了方便使用，我们从道具上拆除了children和location 。

Notice that ReactTransition accepts a key *key*={*location.*pathname}, which is how it tracks the entry and exit of elements in the DOM. With that, we apply the styles depending on the status of the page/element (entering, exiting, entered) in the DOM.

注意， ReactTransition接受键*key* ={ *location.* pathname} ，这是它跟踪DOM中元素的入口和出口的方式。 这样，我们将根据DOM中页面/元素的status (输入，退出，输入)来应用样式。

That’s it for our transition component. Next thing we need to do is to use this component to wrap all our pages. The way it works is that we can wrap all the pages in our application as children in the layout component and then wrap the entire layout component with the transition component.

我们的过渡组件就是这样。 接下来，我们需要使用此组件来包装所有页面。 它的工作方式是，我们可以将应用程序中的所有页面作为children包装在layout组件中，然后用过渡组件包装整个layout组件。

This way, the location prop we defined in the the transition component will take effect and animate our pages accordingly as they enter and exit the DOM. Open the index.js file in the layouts folder and update it with the code below.

这样，我们在过渡组件中定义的位置道具将生效，并在页面进入和退出DOM时对其进行相应的动画处理。 打开layouts文件夹中的index.js文件，并使用以下代码对其进行更新。

//src/layouts/index.js

import React from "react"
import PropTypes from "prop-types"
import { StaticQuery, graphql } from "gatsby"
import Header from "../components/header"
import "./layout.css"
import Transition from '../components/transition'

const Layout = ({ children, location }) => (
  <StaticQuery
    query={graphql`query SiteTitleQuery {
        site {
          siteMetadata {
            title
          }
        }
      }`}
    render={data => (
      <>
        <Header siteTitle={data.site.siteMetadata.title} />
        <div
          style={{
            margin: `0 auto`,
            maxWidth: 960,
            padding: `0px 1.0875rem 1.45rem`,
            paddingTop: 0,
          }}
        >
        <Transition location = {location}>
          {children}
        </Transition>
        </div>
      </>
    )}
  />
)
Layout.propTypes = {
  children: PropTypes.node.isRequired,
}
export default Layout

Here, we imported the Transition component that we created before, then we used it to wrap the children, which represents all the pages in our app. We also passed the location prop to the Transition component to track the locations of the pages as they enter and exit the DOM.

在这里，我们导入了之前创建的Transition组件，然后用它包装了children ，它们代表了我们应用程序中的所有页面。 我们还将location属性传递给Transition组件，以跟踪页面进入和退出DOM时的位置。

Finally, let’s modify the index.js file in our pages folder to add more pages on the homepage so we can test our transitions. Open it and update it with the following code:

最后，让我们修改pages文件夹中的index.js文件，以在首页上添加更多页面，以便我们测试过渡。 打开它，并使用以下代码对其进行更新：

// src/pages/index.js

import React from "react"
import { Link } from "gatsby"
import SEO from "../components/seo"

const IndexPage = () => (
  <div>
    <SEO title="Home" keywords={[`gatsby`, `application`, `react`]} />
     <h1>Hi people</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>

    <Link to="/blog/">Go to my blog</Link> <br />
    <Link to="/about/">Go to my about page</Link> <br />
    <Link to="/contact/">Go to my contact page</Link> <br />
    <Link to="/404/">404</Link> <br/>
    <Link to="/page-2/">Go to page 2</Link>
  </div>
)
export default IndexPage

Now when we run our app, we will see all our pages rendered on the homepage, and when we click on any of them, it will transition into the new page as expected.

现在，当我们运行我们的应用程序时，我们将在主页上看到所有呈现的页面，当我们单击它们中的任何一个时，它将按预期过渡到新页面。

步骤3 —使用GatsbyJS页面转换插件添加页面转换 (Step 3 — Adding Page Transitions with the GatsbyJS Page Transition Plugin)

The previous step showed one way to transition pages in GatsbyJS. Let’s take a look at an entirely different way to do this with a page transition plugin. The gatsby-plugin-page-transitions is a plugin that allows you to declaratively add page transitions, as well as specify custom page transitions for any page on your project.

上一步显示了一种在GatsbyJS中转换页面的方法。 让我们看一下使用页面转换插件执行此操作的完全不同的方法。 gatsby-plugin-page-transitions是一个插件，可让您声明性地添加页面过渡，以及为项目中的任何页面指定自定义页面过渡。

Just like in the last example, we’ll install the necessary dependencies and demonstrate how to add this plugin to our Gatsby app and use it to transition our application’s pages.

就像在上一个示例中一样，我们将安装必要的依赖项，并演示如何将该插件添加到我们的Gatsby应用程序并使用它来转换应用程序的页面。

安装依赖项 (Installing Dependencies)

配置GatsbyJS (Configuring GatsbyJS)

Having installed the plugin, let’s add it to our project through the Gatsby config file in the root of our project. Open the gatsby-config.js file and update the plugins array with the following code:

安装插件后，让我们通过项目根目录中的Gatsby配置文件将其添加到我们的项目中。 打开gatsby-config.js文件，并使用以下代码更新插件数组：

plugins: [
`gatsby-plugin-react-helmet`, 
`gatsby-plugin-page-transitions`,
{
  resolve: 'gatsby-plugin-page-transitions',
  options: {
    transitionTime: 500
  }
}
]

过渡类型 (Transition Types)

The gatsby-plugin-page-transitions plugin provides us with different transition types. There are:

gatsby-plugin-page-transitions插件为我们提供了不同的过渡类型。 有：

• Default transitions
  默认过渡
• Custom Transitions
  自定义过渡
• No Transitions
  没有过渡
• Multiple Transitions
  多重转换

Let’s start with the default transition, which is actually the same as what we saw in the last example. To get this transition working in our pages, wrap all the pages where we need the transition with the plugin.

让我们从默认过渡开始，该过渡实际上与在上一个示例中看到的相同。 为了使这种转换在我们的页面中有效，请使用插件将所有需要转换的页面包装起来。

To demonstrate this, let’s import the plugin into our Index page and a few other pages in our app, then run the app.

为了演示这一点，让我们将插件导入到我们的应用程序的“索引”页面和其他几个页面中，然后运行该应用程序。

import React from "react"
import { Link } from "gatsby"
import SEO from "../components/seo"
import Header from "../components/header"
import PageTransition from 'gatsby-plugin-page-transitions';

const IndexPage = () => (
  <PageTransition>
    <Header siteTitle="Gatsby Default Starter" />
    <h1>Hi people</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>

    <Link to="/blog/">Go to my blog</Link> <br />
    <Link to="/about/">Go to my about page</Link> <br />
    <Link to="/contact/">Go to my contact page</Link> <br />
  </PageTransition>
)
export default IndexPage

Now when we run the app, we get exactly the same transitions we had in our last example, since we are using the same transition time of 500ms.

现在，当我们运行该应用程序时，我们将获得与上一个示例完全相同的转换，因为我们使用的转换时间为500ms。

You can set your preferred transition duration for your transitions; the higher the number you set, the slower the transition speed.

您可以为过渡设置首选的过渡持续时间； 设置的数字越高，过渡速度越慢。

The custom transition type gives you the flexibility to determine how you want your pages to transition. The default transition style only performs a kind of reveal animation to transition in any new page. However, there’s so much more you can do with the plugin. For instance you can decide to transition-in pages from the side of the browser or from the top, zoom pages in and out, swirl pages across the screen, and more.

自定义过渡类型使您可以灵活地确定您希望页面如何过渡。 默认过渡样式仅执行一种显示动画以在任何新页面中过渡。 但是，您可以使用该插件做更多的事情。 例如，您可以决定从浏览器侧面或从顶部过渡页面，放大和缩小页面，在屏幕上旋转页面等等。

To do this, you define your custom transition styles with CSS and pass it into the PageTransition element as prop. Here’s how we can change the default transition behavior in the Index and About pages to a custom sliding transition.

为此，您可以使用CSS定义自定义过渡样式，并将其作为prop传递给PageTransition元素。 这是我们如何将“索引”和“关于”页面中的默认过渡行为更改为自定义滑动过渡的方法。

import React from "react"
import { Link } from "gatsby"
import Header from "../components/header"
import PageTransition from 'gatsby-plugin-page-transitions';

const IndexPage = () => (
  <PageTransition
    defaultStyle={{
      transition: 'left 500ms cubic-bezier(0.47, 0, 0.75, 0.72)',
      left: '100%',
      position: 'absolute',
      width: '100%',
    }}
    transitionStyles={{
      entering: { left: '0%' },
      entered: { left: '0%' },
      exiting: { left: '100%' },
    }}
    transitionTime={500}
  >
    <Header siteTitle="Gatsby Default Starter" />
    <h1>Hi people</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>

    <Link to="/blog/">Go to my blog</Link> <br /><br></br>
    <Link to="/about/">Go to my about page</Link> <br /><br></br>
    <Link to="/contact/">Go to my contact page</Link> <br />
  </PageTransition>
)
export default IndexPage

Make the same update in your about page and run the app again. We should now get the slide transitions working in both pages.

在您的about页面中进行相同的更新，然后再次运行该应用程序。 现在，我们应该在两个页面中都可以使用幻灯片过渡。

You can also have more than one transition type in your projects. You can have a different transition for every single page in your app if you so please. The only concern here is that sometimes too many transition types can negatively impact user experience.

您的项目中还可以有多个过渡类型。 如果需要，您可以为应用程序中的每个页面进行不同的转换。 这里唯一需要考虑的是，有时过渡类型太多会对用户体验产生负面影响。

If you decide to implement different transitions in different pages, style your PageTransition elements separately and you’ll have different transitions for different pages.

如果您决定在不同的页面中实现不同的过渡，请分别设置PageTransition元素的样式，并且不同的页面将具有不同的过渡。

修复滚动交互 (Fixing Scrolling Interactions)

If your application’s pages are filled with content that will require your users to scroll all the way down to the bottom of your pages, you may experience some weird behaviors when your pages transition in and out. This is because, by default, when there are enough elements on the page, it jumps to the top of the page first before triggering transitions.

如果您的应用程序页面中充满了需要用户一直向下滚动到页面底部的内容，则当页面移入和移出时，您可能会遇到一些奇怪的行为。 这是因为，默认情况下，当页面上有足够的元素时，它会在触发转换之前首先跳到页面顶部。

To fix this, we can set a time out for the transition so it can wait for the transition to be executed before the page scrolls to the top. Open the gatsby-browser.js file in the application’s root directory and update it with this code:

要解决此问题，我们可以为过渡设置超时，以便它可以等待过渡执行后页面才滚动到顶部。 在应用程序的根目录中打开gatsby-browser.js文件，并使用以下代码对其进行更新：

const transitionDelay = 500

exports.shouldUpdateScroll = ({
    routerProps: { location },
    getSavedScrollPosition,
}) => {
    if (location.action === 'PUSH') {
        window.setTimeout(() => window.scrollTo(0, 0), transitionDelay)
    } else {
        const savedPosition = getSavedScrollPosition(location)
        window.setTimeout(
            () => window.scrollTo(...(savedPosition || [0, 0])),
            transitionDelay
        )
    }
    return false
    }

结论 (Conclusion)

In this tutorial, we have gone through the various ways you can implement page transitions in your Gatsby projects. In the process we looked at how to set up a new Gatsby project from scratch, how to install the necessary dependencies for the transitions, and how to use them to build pages.

在本教程中，我们介绍了可在Gatsby项目中实现页面转换的各种方法。 在此过程中，我们研究了如何从头开始建立新的Gatsby项目，如何为过渡安装必要的依赖项以及如何使用它们来构建页面。

You can find the source code for this project at this GitHub repository. Switch between branches for the transition demonstrations.

您可以在此GitHub存储库中找到该项目的源代码。 在分支之间切换以进行过渡演示。

翻译自: https://www.digitalocean.com/community/tutorials/how-to-animate-page-transitions-on-a-static-gatsbyjs-site

beego静态页面设置