从零开始编写博客网站:Next.js中的样式化组件

作者 : IT 大叔 本文共2923个字,预计阅读时间需要8分钟 发布时间: 2020-11-9

尽管此文章是系列文章的一部分,但其目的是使该文章能够独立存在,即使您不遵循该系列教程,您也应该能够学到一些知识。如果您有兴趣,教程系列将从这里开始:第1部分


先决条件

本教程的先决条件在第1部分中进行了说明,我们将在本教程中使用的组件来自第1部分第2部分


Next.js中的样式

就像在其他任何React项目中一样,在Next.js项目中有多种样式化组件的方式。我更喜欢使用,styled-components因为它们使修改CSS变得容易,并且使所有内容都开箱即用,而不用担心会冲突CSS类,而不必担心。这篇文章将styled-components引导您逐步设置静态生成的Next.js项目。

其他样式设计方法包括:


styled-components在Next.js中启用

styled-components在Next.js中启用,我们需要安装一些依赖项,即:

复制
yarn add -D styled-components babel-plugin-styled-components

styled-components是库本身,babel-plugin-styled-components并且需要classNames在环境之间进行一致的哈希处理(styled-components否则,对于SSR / SSG不会表现良好)。

我们还需要.babelrc在项目的根目录中创建自己的目录,以便能够覆盖Next.js使用的默认babel行为:

复制
{
    "presets": [
        "next/babel"
    ],
    "plugins": [
        "babel-plugin-styled-components"
    ]
}

提取和设置导航栏样式

我们在第2部分中留下的博客并不漂亮。让我们对其进行更改,使其看起来更像实际的布局。

让我们首先nav从中提取内联_app.js并将其做成自己的组件。

首先components在根级别创建一个文件夹,然后创建一个名为NavBar.jsinside的文件:

components/NavBar.js

复制
import styled from "styled-components"
import Link from "next/link"

const Nav = styled.nav`
  max-width: 56em;
  margin: 0 auto;
  padding: 0.4em;
`

const Ul = styled.ul`
  display: flex;
  padding: 0;
`

const Li = styled.li`
  display: block;
  padding: 0.4em;
`

// Note that styled-components lets you use SCSS syntax
const A = styled.a`
  &:hover {
    color: blue;
  }
`

const NavBar = () => (
  <Nav>
    <Ul>
      <Li>
        <Link href="/" passHref>
          <A>Home</A>
        </Link>
      </Li>
      <Li>
        <Link href="/blog" passHref>
          <A>Blog</A>
        </Link>
      </Li>
    </Ul>
  </Nav>
)

export default NavBar

_app.js 现在可以简化为如下所示:

复制
import NavBar from "../components/NavBar"
import "../styles/globals.css"

function MyApp({ Component, pageProps }) {
  return (
    <>
      <NavBar />
      <Component {...pageProps} />
    </>
  )
}

export default MyApp

样式其他组件

让我们在其他组件中添加一些基本样式,使它们看起来更令人愉悦。styled-components如果您想做更高级的事情,请随时在这里尝试。

pages/index.js

复制
import styled from "styled-components"

const Main = styled.main`
  max-width: 56em;
  padding: 0.8em;
  margin: 0 auto;
`

export default function Home() {
  return (
    <Main>
      <h1>Welcome!</h1>
      <p>This is the main page</p>
    </Main>
  )
}

pages/blog/index.js

复制
import Link from "next/link"
import styled from "styled-components"
import posts from "../_posts"

const Main = styled.main`
  max-width: 56em;
  padding: 0.8em;
  margin: 0 auto;
`

const Ul = styled.ul`
  padding: 0;
`

const Li = styled.li`
  display: block;
`

// Create a flex box wrapper that can group our blog post attributes
const BlogLink = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid gray;
  transition: margin-left 0.2s ease;

  &:hover {
    margin-left: 20px;
  }
`

// Notice here on the Link element that we do not need passHref,
// that's possible because the anchor tag is the direct child
// of the Link element
const BlogPage = ({ posts }) => (
  <Main>
    <Ul>
      {posts.map((post) => (
        <Li key={post.slug}>
          <Link href={`blog/${post.slug}`}>
            <a>
              <BlogLink>
                <h3>{post.title}</h3>
                <h5>{post.date}</h5>
              </BlogLink>
            </a>
          </Link>
        </Li>
      ))}
    </Ul>
  </Main>
)

export default BlogPage

export async function getStaticProps() {
  return {
    props: {
      posts,
    },
  }
}

这实际上只给我们留下了样式(pages/blog/[slug].js)的一个组成部分,我将其留给读者作为练习。如果您想了解我是如何做到的,可以在这里访问存储库。


现在,我们有一个样式化的Next.js应用程序,该应用程序基于准备用于本教程系列下一部分的数据集来支持动态路由。

这是我的项目在现阶段的样子:https : //github.com/simon-nystrom/nextjs-blog-example/tree/p3

希望您会继续学习本教程,请随时询问您是否有任何疑问,或者告诉我是否错过了什么!

免责声明:
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » 从零开始编写博客网站:Next.js中的样式化组件

常见问题FAQ

没有金币/金币不足 怎么办?
本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
所有资源普通会员都能下载吗?
本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。

发表评论