Gatsby Starter Portfolio Emilia 使用文档

Gatsby Starter Portfolio Emilia 使用文档

gatsby-starter-portfolio-emiliaMinimalistic portfolio/photography site with masonry grid, page transitions and big images. Themeable with Theme UI. Includes Light/Dark mode.项目地址:https://gitcode.com/gh_mirrors/ga/gatsby-starter-portfolio-emilia

1. 项目的目录结构及介绍

Gatsby Starter Portfolio Emilia 是一个基于 Gatsby 的个人作品集模板。以下是其主要目录结构及其介绍：

/gatsby-starter-portfolio-emilia
├── content
│   └── projects
│       └── example-project.mdx
├── src
│   ├── assets
│   │   ├── images
│   │   └── scss
│   ├── components
│   │   ├── Footer
│   │   ├── Header
│   │   ├── Layout
│   │   ├── Project
│   │   └── SEO
│   ├── pages
│   │   ├── 404.js
│   │   ├── index.js
│   │   └── using-typescript.tsx
│   ├── templates
│   │   └── project-template.js
│   └── utils
│       └── scroll.js
├── static
│   └── icons
├── gatsby-config.js
├── gatsby-node.js
├── package.json
└── README.md

目录结构说明：

• content: 存放项目内容的目录，例如 projects 目录下存放的是各个项目的 Markdown 文件。
• src: 源代码目录，包含所有前端资源和组件。
  • assets: 静态资源，如图片和样式文件。
  • components: React 组件，如页眉、页脚、布局等。
  • pages: 页面组件，对应网站的不同页面。
  • templates: 页面模板，如项目详情页模板。
  • utils: 工具函数，如滚动处理函数。
• static: 静态文件目录，如图标等。
• gatsby-config.js: Gatsby 配置文件。
• gatsby-node.js: Gatsby 节点文件，用于构建时的自定义逻辑。
• package.json: 项目依赖和脚本配置。
• README.md: 项目说明文档。

2. 项目的启动文件介绍

项目的启动文件主要是 gatsby-config.js 和 gatsby-node.js。

gatsby-config.js

gatsby-config.js 是 Gatsby 的主要配置文件，包含网站的元数据、插件配置等。以下是一个简化的示例：

module.exports = {
  siteMetadata: {
    title: `Emilia`,
    description: `Minimalistic portfolio/photography site with masonry grid, page transitions and big images. Themeable with Theme UI.`,
    author: `@lekoarts_de`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/assets/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-portfolio-emilia`,
        short_name: `portfolio`,
        start_url: `/`,
        background_color: `#ffffff`,
        theme_color: `#3182ce`,
        display: `minimal-ui`,
        icon: `static/icons/icon.png`,
      },
    },
    `gatsby-plugin-offline`,
  ],
}

gatsby-node.js

gatsby-node.js 文件用于在构建过程中执行自定义逻辑，例如创建页面。以下是一个简化的示例：

const path = require(`path`)

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  const projectTemplate = path.resolve(`src/templates/project-template.js`)

  const result = await graphql(`
    {
      allMdx(
        sort: { fields: [frontmatter___date], order: DESC }
        limit: 1000
      ) {
        edges {
          node {
            fields {
              slug
            }
          }
        }
      }

gatsby-starter-portfolio-emiliaMinimalistic portfolio/photography site with masonry grid, page transitions and big images. Themeable with Theme UI. Includes Light/Dark mode.项目地址:https://gitcode.com/gh_mirrors/ga/gatsby-starter-portfolio-emilia