当前位置：文江博客 Node Package Readme @abwhb/gatsby-theme-cara 中文文档教程

@abwhb/gatsby-theme-cara 中文文档教程

发布于 3年前浏览 21 项目主页更新于 3年前

@lekoarts/gatsby-theme-cara

具有视差效果和动画的俏皮多彩单页作品集。特别是设计师和/或摄影师会喜欢这个主题！使用 MDX 和主题 UI 构建。

阅读源代码。

还请务必查看其他免费 & 开源 Gatsby 主题和我的个人网站。

Features

Theme UI-based theming
react-spring parallax effect
CSS Animations on Shapes
Light/Dark mode

Installation

npm install @lekoarts/gatsby-theme-cara

Install as a starter

这将生成一个新站点（文件夹名称为“cara”），该站点预先配置主题的使用，包括示例内容和其他插件。

gatsby new cara LekoArts/gatsby-starter-portfolio-cara

查看入门代码

Usage

Theme options

Key	Default Value	Description
`basePath`	`/`	Root url for the theme
`mdx`	`true`	Configure `gatsby-plugin-mdx` (if your website already is using the plugin pass false to turn this off)

Example usage

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `@lekoarts/gatsby-theme-cara`,
      options: {
        // basePath defaults to `/`
        basePath: `/sideproject`,
      },
    },
  ],
};

Additional configuration

除了主题选项，还有一些您可以通过站点 gatsby-config.js 中的 siteMetadata 对象自定义的项目

// gatsby-config.js
module.exports = {
  siteMetadata: {
    // Used for the title template on pages other than the index site
    siteTitle: `Cara`,
    // Default title of the page
    siteTitleAlt: `Cara - @lekoarts/gatsby-theme-cara`,
    // Can be used for e.g. JSONLD
    siteHeadline: `Cara - Gatsby Theme from @lekoarts`,
    // Will be used to generate absolute URLs for og:image etc.
    siteUrl: `https://cara.lekoarts.de`,
    // Used for SEO
    siteDescription: `Playful and Colorful One-Page portfolio featuring Parallax effects and animations`,
    // Will be set on the <html /> tag
    siteLanguage: `en`,
    // Used for og:image and must be placed inside the `static` folder
    siteImage: `/banner.jpg`,
    // Twitter Handle
    author: `@lekoarts_de`,
  },
};

Shadowing

请阅读指南 Gatsby 主题中的阴影了解如何自定义主题！一般来说，您会希望将文件放入 src/@lekoarts/gatsby-theme-cara/ 以隐藏/覆盖文件。可以通过在 src/gatsby-plugin-theme-ui/ 中隐藏其文件来配置主题 UI 配置。

Editing the content

页面内容由主题的 sections 文件夹内的 .mdx 文件管理。您可以通过在站点中隐藏文件来编辑这些文件。

这些文件可用：intro.mdx、projects.mdx、about.mdx、contact.mdx

> 示例通过 < code>src/@lekoarts/gatsby-theme-cara/sections/intro.mdx:

# Hi, I'm Jane Doe

I'm creating noice web experiences for the next generation of consumer-facing companies

其他标题应该是
标题！

您还可以访问在 projects.mdx 部分中使用的组件/简码。该组件采用道具 title（字符串）、link（字符串）、bg（字符串）和 children（反应.反应节点）。您可以这样使用它：

## Projects

<ProjectCard title="Freiheit" link="https://www.behance.net/gallery/58937147/Freiheit" bg="linear-gradient(to right, #D4145A 0%, #FBB03B 100%)">
This project is my entry to Adobe's #ChallengeYourPerspective contest.
</ProjectCard>

Changelog

您可以找到广泛的更新日志GitHub 上的更改。您将能够看到每个补丁、次要和主要更改以及拉取请求对它们的贡献。

Questions?

如果您有一般性问题或需要有关 Gatsby 的帮助，请转到支持平台在 Gatsby 的文档中提到。如果您对此主题有具体问题，可以前往存储库的 GitHub 讨论。

Supporting me

感谢您使用这个项目！我一直很想知道人们对我的项目做了什么，所以不要犹豫，在 Twitter 上标记我并与我分享项目.

请为这个项目加注星标，在社交媒体上分享它，或者考虑在 Patreon 或 GitHub 赞助商！

原文

@lekoarts/gatsby-theme-cara

Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Especially designers and/or photographers will love this theme! Built with MDX and Theme UI.

Read the Source Code.

Also be sure to check out other Free & Open Source Gatsby Themes and my Personal Website.

Features

Theme UI-based theming
react-spring parallax effect
CSS Animations on Shapes
Light/Dark mode

Installation

npm install @lekoarts/gatsby-theme-cara

Install as a starter

This will generate a new site (with the folder name "cara") that pre-configures use of the theme including example content and additional plugins.

gatsby new cara LekoArts/gatsby-starter-portfolio-cara

View the starter's code

Usage

Theme options

Key	Default Value	Description
`basePath`	`/`	Root url for the theme
`mdx`	`true`	Configure `gatsby-plugin-mdx` (if your website already is using the plugin pass false to turn this off)

Example usage

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `@lekoarts/gatsby-theme-cara`,
      options: {
        // basePath defaults to `/`
        basePath: `/sideproject`,
      },
    },
  ],
};

Additional configuration

In addition to the theme options, there are a handful of items you can customize via the siteMetadata object in your site's gatsby-config.js

// gatsby-config.js
module.exports = {
  siteMetadata: {
    // Used for the title template on pages other than the index site
    siteTitle: `Cara`,
    // Default title of the page
    siteTitleAlt: `Cara - @lekoarts/gatsby-theme-cara`,
    // Can be used for e.g. JSONLD
    siteHeadline: `Cara - Gatsby Theme from @lekoarts`,
    // Will be used to generate absolute URLs for og:image etc.
    siteUrl: `https://cara.lekoarts.de`,
    // Used for SEO
    siteDescription: `Playful and Colorful One-Page portfolio featuring Parallax effects and animations`,
    // Will be set on the <html /> tag
    siteLanguage: `en`,
    // Used for og:image and must be placed inside the `static` folder
    siteImage: `/banner.jpg`,
    // Twitter Handle
    author: `@lekoarts_de`,
  },
};

Shadowing

Please read the guide Shadowing in Gatsby Themes to understand how to customize the theme! Generally speaking you will want to place your files into src/@lekoarts/gatsby-theme-cara/ to shadow/override files. The Theme UI config can be configured by shadowing its files in src/gatsby-plugin-theme-ui/.

Editing the content

The content of the page is managed by .mdx files inside the theme's sections folder. You can edit the files by shadowing them in your site.

These files are available: intro.mdx, projects.mdx, about.mdx, contact.mdx

See the example that shadows via src/@lekoarts/gatsby-theme-cara/sections/intro.mdx:

# Hi, I'm Jane Doe

I'm creating noice web experiences for the next generation of consumer-facing companies

The other headings should be <h2> headings!

You also have access to the <ProjectCard /> component/shortcode which is used in the projects.mdx section. The component takes the props title (string), link (string), bg (string) and children (React.ReactNode). You would use it like that:

## Projects

<ProjectCard title="Freiheit" link="https://www.behance.net/gallery/58937147/Freiheit" bg="linear-gradient(to right, #D4145A 0%, #FBB03B 100%)">
This project is my entry to Adobe's #ChallengeYourPerspective contest.
</ProjectCard>

Changelog

You can find the extensive changelog of changes on GitHub. You'll be able to see each patch, minor, and major changes and what pull requests contributed to them.

Questions?

If you have general questions or need help with Gatsby, please go to one of the support platforms mentioned in Gatsby's documentation. If you have a specific question about this theme, you can head to the GitHub Discussions of the repository.

???? Supporting me

Thanks for using this project! I'm always interested in seeing what people do with my projects, so don't hesitate to tag me on Twitter and share the project with me.

Please star this project, share it on Social Media or consider supporting me on Patreon or GitHub Sponsor!

友情链接

文江博客

@abwhb/gatsby-theme-cara 中文文档教程

@lekoarts/gatsby-theme-cara

Features

Installation

Install as a starter

Usage

Theme options

Example usage

Additional configuration

Shadowing

Editing the content

标题！

Changelog

Questions?

Supporting me

@lekoarts/gatsby-theme-cara

Features

Installation

Install as a starter

Usage

Theme options

Example usage

Additional configuration

Shadowing

Editing the content

Changelog

Questions?

???? Supporting me

你可能也喜欢

友情链接