Gatsby Starter Portfolio Minimal 主题使用教程
1. 项目的目录结构及介绍
gatsby-starter-portfolio-minimal-theme/
├── content/
│ ├── _theme/
│ │ ├── settings.md
│ │ └── ...
│ ├── about/
│ │ └── index.md
│ ├── contact/
│ │ └── index.md
│ ├── home/
│ │ └── index.md
│ └── ...
├── src/
│ ├── components/
│ ├── images/
│ ├── pages/
│ └── ...
├── static/
│ └── ...
├── gatsby-config.js
├── gatsby-node.js
├── package.json
└── ...
目录结构说明
- content/: 存放网站内容的目录,包括各个页面的Markdown文件和主题设置。
- _theme/: 主题设置文件,如
settings.md
。 - about/, contact/, home/: 各个页面的内容文件。
- _theme/: 主题设置文件,如
- src/: 源代码目录,包括组件、图片、页面等。
- components/: 存放React组件。
- images/: 存放图片资源。
- pages/: 存放页面组件。
- static/: 静态文件目录,如favicon等。
- gatsby-config.js: Gatsby配置文件。
- gatsby-node.js: Gatsby节点文件,用于自定义构建过程。
- package.json: 项目依赖和脚本配置。
2. 项目的启动文件介绍
gatsby-config.js
这是Gatsby的主要配置文件,包含了网站的元数据、插件配置等。
module.exports = {
siteMetadata: {
title: `Portfolio Minimal`,
description: `A modern one-page portfolio with a clean yet expressive design.`,
author: `@konstantinmuenster`,
},
plugins: [
`gatsby-theme-portfolio-minimal`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `content`,
path: `${__dirname}/content`,
},
},
// 其他插件配置
],
};
gatsby-node.js
这个文件用于自定义Gatsby的构建过程,如创建页面、修改Webpack配置等。
exports.createPages = async ({ actions }) => {
const { createPage } = actions;
// 创建页面的逻辑
};
3. 项目的配置文件介绍
package.json
这个文件包含了项目的依赖、脚本命令等。
{
"name": "gatsby-starter-portfolio-minimal-theme",
"version": "1.0.0",
"private": true,
"description": "A modern one-page portfolio with a clean yet expressive design.",
"author": "Konstantin Münster",
"keywords": [
"gatsby"
],
"scripts": {
"develop": "gatsby develop",
"start": "gatsby develop",
"build": "gatsby build",
"serve": "gatsby serve",
"clean": "gatsby clean"
},
"dependencies": {
"gatsby": "^4.0.0",
"gatsby-theme-portfolio-minimal": "^1.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
// 开发依赖
}
}
content/_theme/settings.md
这个文件包含了主题的设置,如网站标题、描述等。
---
title: "Portfolio Minimal"
description: "A modern one-page portfolio with a clean yet expressive design."
author: "Konstantin Münster"
---
通过以上介绍,您可以更好地理解和使用gatsby-starter-portfolio-minimal-theme
项目。希望这份教程对您有所帮助!