当前位置： 文江博客 Node Package Readme @2now/gatsby-theme-minimal-blog 中文文档教程

@2now/gatsby-theme-minimal-blog 中文文档教程

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

盖茨比主题

@lekoarts/gatsby-theme-minimal-blog

@lekoarts/gatsby-theme-minimal-blog 在 MIT 许可证下发布。 当前 npm 包版本。 npm 每月下载量。 npm 上的总下载量。 欢迎 PR！ 关注@lekoarts_de

排版驱动、功能丰富的博客主题，具有极简的美感。 包括标签/类别支持和代码块的广泛功能，例如实时预览、行号和行突出显示。

实时预览View Design on Figma

阅读源代码。

还请务必结帐其他Free & 开源 Gatsby 主题

Features

  • MDX
  • Theme UI-based theming
  • Light Mode / Dark Mode
  • Typography driven, minimal style
  • Tags/Categories support
  • Code highlighting with prism-react-renderer and react-live support. Also allows adding line numbers, line highlighting, language tabs, and file titles.
  • RSS Feed for blog posts

Installation

npm install @lekoarts/gatsby-theme-minimal-blog

Install as a starter

这将生成一个预配置主题使用的新站点。

gatsby new minimal-blog LekoArts/gatsby-starter-minimal-blog

查看入门代码

Usage

Theme options

KeyDefault ValueDescription
basePath/Root url for the theme
blogPath/blogurl for the blog post overview page
tagsPath/tagsurl for the tags overview page and prefix for tags (e.g. /tags/my-tag)
postsPathcontent/postsLocation of posts
postsPrefix/Prefix for all individual blog posts
pagesPathcontent/pagesLocation of additional pages (optional)
mdxtrueConfigure gatsby-plugin-mdx (if your website already is using the plugin pass false to turn this off)
formatStringDD.MM.YYYYConfigure the date format for Date fields
showLineNumberstrueShow line numbers in code blocks
showCopyButtontrueShow copy button in code blocks
navigation[]Add links to your internal sites to the left part of the header
externalLinks[]Add links to your external sites to the right part of the header
feedtrueConfigure gatsby-plugin-feed (if your website already is using the plugin pass false to turn this off)
feedTitleMinimal Blog - @lekoarts/gatsby-theme-minimal-blogPass a string to the title option of gatsby-plugin-feed

Example usage

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `@lekoarts/gatsby-theme-minimal-blog`,
      options: {
        showLineNumbers: false,
        navigation: [
          {
            title: `Blog`,
            slug: `/blog`,
          },
          {
            title: `About`,
            slug: `/about`,
          },
        ],
        externalLinks: [
          {
            name: `Twitter`,
            url: `https://twitter.com/lekoarts_de`,
          },
          {
            name: `Instagram`,
            url: `https://www.instagram.com/lekoarts.de/`,
          },
        ],
      },
    },
  ],
};

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: `Lupin`,
    // Default title of the page
    siteTitleAlt: `Minimal Blog - @lekoarts/gatsby-theme-minimal-blog`,
    // Can be used for e.g. JSONLD
    siteHeadline: `Minimal Blog - Gatsby Theme from @lekoarts`,
    // Will be used to generate absolute URLs for og:image etc.
    siteUrl: `https://minimal-blog.lekoarts.de`,
    // Used for SEO
    siteDescription: `Typography driven, feature-rich blogging theme with minimal aesthetics. Includes tags/categories support and extensive features for code blocks such as live preview, line numbers, and line highlighting.`,
    // 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`,
  },
};

如果您想将其他项目添加到导航或外部链接（左侧和右侧header），将如上所示形状的对象添加到数组中。

Code Highlighting

由于此主题随 prism-react-renderer 和 react-live 某些附加功能。 您可以在 示例存储库！ 如果您想更改某些代码样式或添加其他语言选项卡，您需要隐藏文件 src/@lekoarts/gatsby-theme-minimal-blog/styles/code.js。

语言选项卡：

当您向代码块添加语言（例如 js 或 javascript）时，顶部会出现一个小选项卡左角。

```js
// code goes here
```

代码标题：

您可以在代码块上方显示标题（例如文件路径）。

```jsx:title=your-title
// code goes here
```

或者不使用特定语言：

```:title=your-title
// code goes here
```

行突出显示：

您可以突出显示代码块中的单行或多行（或两行）。 您需要添加一种语言。

```js {2,4-5}
const test = 3
const foo = 'bar'
const harry = 'potter'
const hermione = 'granger'
const ron = 'weasley'
```

隐藏行号：

如果您想隐藏行号，您可以全局禁用它们（请参阅主题选项）或逐块隐藏。 您还可以将其与其他属性结合使用。

```noLineNumbers
// code goes here
```

react-live：

将 react-live 添加到代码块（并呈现组件）以在其下方查看预览。

```js react-live
const onClick = () => {
  alert("You opened me");
};
render(<button onClick={onClick}>Alohomora!</button>);
```

Shadowing

请阅读指南盖茨比主题中的阴影以了解如何自定义此主题！ 一般来说，您会希望将文件放入 src/@lekoarts/gatsby-theme-minimal-blog/ 以隐藏/覆盖文件。

Adding content

Adding a new blog post

新的博客文章将显示在该主题的索引页面（最近的三个）和博客概述页面上。 可以通过在 content/posts 中创建 MDX 文件来添加它们。 常规设置：

  1. Create a new folder inside content/posts
  2. Create a new index.mdx file, and add the frontmatter
  3. Add images to the created folder (from step 1) you want to reference in your blog post
  4. Reference an image as your banner in the frontmatter
  5. Write your content below the frontmatter
  6. Add a slug to the frontmatter to use a custom slug, e.g. slug: "/my-slug" (Optional)

Frontmatter 参考：

---
title: Introduction to "Defence against the Dark Arts"
date: 2019-11-07
description: Defence Against the Dark Arts (abbreviated as DADA) is a subject taught at Hogwarts School of Witchcraft and Wizardry and Ilvermorny School of Witchcraft and Wizardry.
tags:
  - Tutorial
  - Dark Arts
banner: ./defence-against-the-dark-arts.jpg
canonicalUrl: https://random-blog-about-curses.com/curses-counter-curses-and-more
---

description、banner 和 canonicalUrl 字段是可选的！ 如果没有提供描述，将使用博客文章的摘录。 如果未提供横幅，则使用默认的 siteImage（来自 siteMetadata）。 如果未提供 canonicalUrl，则不会包含在标头中。

date 字段必须以 YYYY-MM-DD 格式编写！

Adding a new page

可以通过将 MDX 文件放在 contents/pages 中来创建其他页面，例如“关于”或“联系”页面。 您需要手动链接到这些页面，例如将它们添加到导航中（在 siteMetadata 中）。 一般说明：

  1. Create a new folder inside content/pages
  2. Create a new index.mdx file, and add the frontmatter
  3. Write your content below the frontmatter
  4. Optionally add files/images to the folder you want to reference from the page

Frontmatter 参考：

---
title: About
slug: "/about"
---

Changing the "Hero" text

要编辑英雄文本（“嗨，我是卢平……”），在 src/@lekoarts/gatsby-theme-minimal-blog/texts 创建一个文件/hero.mdx 编辑文本。

Changing the "Projects" part

要编辑“最新帖子”下方的项目部分，请在 src/@lekoarts/gatsby-theme-minimal-blog/texts/bottom.mdx< 创建一个文件/code> 来编辑内容。

Supporting me

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

请为该项目加注星标，在社交媒体上分享或考虑在 Patreon< /a> 或 GitHub 赞助商！

原文

Gatsby Theme

@lekoarts/gatsby-theme-minimal-blog

@lekoarts/gatsby-theme-minimal-blog is released under the MIT license. Current npm package version. Downloads per month on npm. Total downloads on npm. PRs welcome! Follow @lekoarts_de

Typography driven, feature-rich blogging theme with minimal aesthetics. Includes tags/categories support and extensive features for code blocks such as live preview, line numbers, and line highlighting.

Live PreviewView Design on Figma

Read the Source Code.

Also be sure to checkout other Free & Open Source Gatsby Themes

Features

  • MDX
  • Theme UI-based theming
  • Light Mode / Dark Mode
  • Typography driven, minimal style
  • Tags/Categories support
  • Code highlighting with prism-react-renderer and react-live support. Also allows adding line numbers, line highlighting, language tabs, and file titles.
  • RSS Feed for blog posts

Installation

npm install @lekoarts/gatsby-theme-minimal-blog

Install as a starter

This will generate a new site that pre-configures use of the theme.

gatsby new minimal-blog LekoArts/gatsby-starter-minimal-blog

View the starter's code

Usage

Theme options

KeyDefault ValueDescription
basePath/Root url for the theme
blogPath/blogurl for the blog post overview page
tagsPath/tagsurl for the tags overview page and prefix for tags (e.g. /tags/my-tag)
postsPathcontent/postsLocation of posts
postsPrefix/Prefix for all individual blog posts
pagesPathcontent/pagesLocation of additional pages (optional)
mdxtrueConfigure gatsby-plugin-mdx (if your website already is using the plugin pass false to turn this off)
formatStringDD.MM.YYYYConfigure the date format for Date fields
showLineNumberstrueShow line numbers in code blocks
showCopyButtontrueShow copy button in code blocks
navigation[]Add links to your internal sites to the left part of the header
externalLinks[]Add links to your external sites to the right part of the header
feedtrueConfigure gatsby-plugin-feed (if your website already is using the plugin pass false to turn this off)
feedTitleMinimal Blog - @lekoarts/gatsby-theme-minimal-blogPass a string to the title option of gatsby-plugin-feed

Example usage

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `@lekoarts/gatsby-theme-minimal-blog`,
      options: {
        showLineNumbers: false,
        navigation: [
          {
            title: `Blog`,
            slug: `/blog`,
          },
          {
            title: `About`,
            slug: `/about`,
          },
        ],
        externalLinks: [
          {
            name: `Twitter`,
            url: `https://twitter.com/lekoarts_de`,
          },
          {
            name: `Instagram`,
            url: `https://www.instagram.com/lekoarts.de/`,
          },
        ],
      },
    },
  ],
};

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: `Lupin`,
    // Default title of the page
    siteTitleAlt: `Minimal Blog - @lekoarts/gatsby-theme-minimal-blog`,
    // Can be used for e.g. JSONLD
    siteHeadline: `Minimal Blog - Gatsby Theme from @lekoarts`,
    // Will be used to generate absolute URLs for og:image etc.
    siteUrl: `https://minimal-blog.lekoarts.de`,
    // Used for SEO
    siteDescription: `Typography driven, feature-rich blogging theme with minimal aesthetics. Includes tags/categories support and extensive features for code blocks such as live preview, line numbers, and line highlighting.`,
    // 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`,
  },
};

If you want to add additional items to the navigation or external links (left and right side of header), add objects in the shape shown above to the arrays.

Code Highlighting

Since this theme ships with prism-react-renderer and react-live certain additional features were added to code blocks. You can find an overview / usage example in the example repository! If you want to change certain code styles or add additional language tabs, you need to shadow the file src/@lekoarts/gatsby-theme-minimal-blog/styles/code.js.

Language tabs:

When you add a language (such as e.g. js or javascript) to the code block, a little tab will appear at the top left corner.

```js
// code goes here
```

Code titles:

You can display a title (e.g. the file path) above the code block.

```jsx:title=your-title
// code goes here
```

Or without a specific language:

```:title=your-title
// code goes here
```

Line highlighting:

You can highlight single or multiple (or both) lines in a code block. You need to add a language.

```js {2,4-5}
const test = 3
const foo = 'bar'
const harry = 'potter'
const hermione = 'granger'
const ron = 'weasley'
```

Hide line numbers:

If you want to hide line numbers you can either globally disable them (see Theme options) or on a block-by-block basis. You can also combine that with the other attributes.

```noLineNumbers
// code goes here
```

react-live:

Add react-live to the code block (and render the component) to see a preview below it.

```js react-live
const onClick = () => {
  alert("You opened me");
};
render(<button onClick={onClick}>Alohomora!</button>);
```

Shadowing

Please read the guide Shadowing in Gatsby Themes to understand how to customize the this theme! Generally speaking you will want to place your files into src/@lekoarts/gatsby-theme-minimal-blog/ to shadow/override files.

Adding content

Adding a new blog post

New blog posts will be shown on the index page (the three most recent ones) of this theme and on the blog overview page. They can be added by creating MDX files inside content/posts. General setup:

  1. Create a new folder inside content/posts
  2. Create a new index.mdx file, and add the frontmatter
  3. Add images to the created folder (from step 1) you want to reference in your blog post
  4. Reference an image as your banner in the frontmatter
  5. Write your content below the frontmatter
  6. Add a slug to the frontmatter to use a custom slug, e.g. slug: "/my-slug" (Optional)

Frontmatter reference:

---
title: Introduction to "Defence against the Dark Arts"
date: 2019-11-07
description: Defence Against the Dark Arts (abbreviated as DADA) is a subject taught at Hogwarts School of Witchcraft and Wizardry and Ilvermorny School of Witchcraft and Wizardry.
tags:
  - Tutorial
  - Dark Arts
banner: ./defence-against-the-dark-arts.jpg
canonicalUrl: https://random-blog-about-curses.com/curses-counter-curses-and-more
---

The fields description, banner and canonicalUrl are optional! If no description is provided, an excerpt of the blog post will be used. If no banner is provided, the default siteImage (from siteMetadata) is used. If no canonicalUrl is provided, it will not be included in the header.

The date field has to be written in the format YYYY-MM-DD!

Adding a new page

Additional pages can be created by placing MDX files inside contents/pages, e.g. an "About" or "Contact" page. You'll manually need to link to those pages, for example by adding them to the navigation (in siteMetadata). General instructions:

  1. Create a new folder inside content/pages
  2. Create a new index.mdx file, and add the frontmatter
  3. Write your content below the frontmatter
  4. Optionally add files/images to the folder you want to reference from the page

Frontmatter reference:

---
title: About
slug: "/about"
---

Changing the "Hero" text

To edit the hero text ("Hi, I'm Lupin…), create a file at src/@lekoarts/gatsby-theme-minimal-blog/texts/hero.mdx to edit the text.

Changing the "Projects" part

To edit the projects part below "Latest posts", create a file at src/@lekoarts/gatsby-theme-minimal-blog/texts/bottom.mdx to edit the contents.

???? 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!

更多

你可能也喜欢

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文