@adamquadmon/gatsby-theme-lucifero 中文文档教程

Question

@adamquadmon/gatsby-theme-lucifero

Chakra UI 深色/浅色主题的 Satanic Gatsby 主题

具有 MDX 和其他灵感的

• @LekoArts/gatsby-themes
• gatsby-theme-catalyst
• gatsby-theme-nicky-blog
• emgoto.com

Features

• Chakra UI-based theming
• Light/Dark mode
• MDX

Installation

mkdir my-site
cd my-site
yarn init
# install gatsby-theme-lucifero and it's dependencies
yarn add gatsby react react-dom @adamquadmon/gatsby-theme-lucifero

Usage

Theme options

：在 src/config/ 文件夹中，您将找到 defaultConfig.js

Key	Default Value	Description
basePath	/	Root url for the theme

Example usage

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

Shadowing

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

What's inside

这是包含插件的列表，以*结尾的是社区插件

Design

• @chakra-ui/gatsby-plugin* - integrate Chakra UI
• gatsby-plugin-svgr* - SVGR plugin to transform SVGs into React components
• gatsby-plugin-image - responsive images
• gatsby-plugin-sharp - image processing functions built on the Sharp image processing library
• gatsby-transformer-sharp - creates ImageSharp nodes
• react-wordcloud react D3 wordcloud component

Data

• gatsby-source-filesystem - create data, pages, locales folders
• gatsby-plugin-react-i18next* - translate your website using react-i18next
• gatsby-transformer-yaml-full* - YAML parser for data content
• gatsby-plugin-mdx - use MDX for page content
• mdx-yaml-full - convert !mdx yaml tags to mdx
• gatsby-remark-images - processes images in markdown so they can be used in the production build
• gatsby-remark-responsive-iframe - wraps iframes or objects within markdown files in a responsive elastic container with a fixed aspect ratio.
• gatsby-remark-prismjs - adds syntax highlighting to code blocks in markdown files using PrismJS
• gatsby-remark-copy-linked-files - copies local files linked to/from Markdown files to the root directory
• gatsby-remark-unwrap-images - unwrap remark images nodes from paragraph nodes
• gatsby-remark-embed-video - display videos in Markdown
• gatsby-remark-relative-images - convert markdown image src(s) to be relative for gatsby-remark-images
• gatsby-remark-normalize-paths - normalize paths in frontmatter and body of markdown files to be gatsby compliant
• gatsby-remark-external-links - adds the target and rel attributes to external links in markdown
• remark-codesandbox - create CodeSandbox directly from code blocks
• rehype-slug - add id attributes to headings
• rehype-sanitize - sanitize HTML

SEO & Performances

• gatsby-plugin-robots-txt* - creates robots.txt for your site
• gatsby-plugin-react-helmet - implement React Helmet for SEO stuff
• gatsby-plugin-breadcrumb - add breadcrumbs
• gatsby-plugin-sitemap - create a sitemap for your website
• gatsby-plugin-gdpr-cookies* - add Google Analytics (V4 is supported), Google Tag Manager, Facebook Pixel, TikTok Pixel and Hotjar in a GDPR form to your site
• gatsby-plugin-nprogress - shows the nprogress indicator when a page is delayed
• gatsby-plugin-lodash - Lodash webpack & Babel plugins

Design

Theming

这个主题使用Chakra UI用于css-in-js 样式。 您可以在 src/gatsby-theme-lucifero/@chakra-ui/gatsby-plugin/ 文件夹中覆盖主题，入口点是 theme.js

Fonts

添加一个 GoolgeFonts 来自 fontsource 使用 yarn：

yarn add @fontsource/im-fell-english

include the font in gatsby-browser.js：

import '@fontsource/im-fell-english';

在主题文件中使用字体，例如在typography.js中：

export const typography = {
  fonts: {
    body: 'IM Fell English',
  },
};

Theme Modes

Chakra UI配置为深色和浅色模式，您可以在 components.js 文件中找到一些示例

export const components = {
  components: {
    Heading: {
      baseStyle: ({ colorMode }) => ({
        color: colorMode === 'dark' ? 'gray.300' : 'gray.600',
      }),
    }
  }
}

Colors

Chakra 利用 TailwindCSS 基色。 您可以在这里找到 所有 Tailwind 颜色

Components

该主题提供以下组件：

• LayoutPage - Layout for Pages
• LayoutContainer - Base Container including:
• NavBar - full responsive navbar with LangSelector, ThemeSwitcher, SocialButtons, Logo, address and cell info
• Footer - Logo with organization info, navigation items, LangSelector, SocialButtons and a Map
• SEO - with ogImage and SchemaOrg
• Cards - Dispaly responsive Cards for content
• CookieConsent - The GDPR stuff
• Hero - Hero component for home pages

Data

YAML

添加一个 data/collection.yaml 文件

character: a
number: 1

---

character: b
number: 2

，您可以使用 GraphQL 查询内部数据：

{
  allCollectionYaml {
    edges {
      node {
        character
        number
      }
    }
  }
}

MDX

在 pages 文件夹中，您可以添加 MDX 文件来创建页面和帖子

NavItems

要覆盖菜单的导航链接，您可以创建文件 src/gatsby-theme-lucifero/hooks/use-navItems.js

Changelog

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

Questions?

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