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
}
}
}
}