@2now/gatsby-theme-minimal-blog 中文文档教程
@lekoarts/gatsby-theme-minimal-blog
排版驱动、功能丰富的博客主题,具有极简的美感。 包括标签/类别支持和代码块的广泛功能,例如实时预览、行号和行突出显示。
阅读源代码。
还请务必结帐其他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
Key | Default Value | Description |
---|---|---|
basePath | / | Root url for the theme |
blogPath | /blog | url for the blog post overview page |
tagsPath | /tags | url for the tags overview page and prefix for tags (e.g. /tags/my-tag ) |
postsPath | content/posts | Location of posts |
postsPrefix | / | Prefix for all individual blog posts |
pagesPath | content/pages | Location of additional pages (optional) |
mdx | true | Configure gatsby-plugin-mdx (if your website already is using the plugin pass false to turn this off) |
formatString | DD.MM.YYYY | Configure the date format for Date fields |
showLineNumbers | true | Show line numbers in code blocks |
showCopyButton | true | Show 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 |
feed | true | Configure gatsby-plugin-feed (if your website already is using the plugin pass false to turn this off) |
feedTitle | Minimal Blog - @lekoarts/gatsby-theme-minimal-blog | Pass 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 文件来添加它们。 常规设置:
- Create a new folder inside
content/posts
- Create a new
index.mdx
file, and add the frontmatter - Add images to the created folder (from step 1) you want to reference in your blog post
- Reference an image as your
banner
in the frontmatter - Write your content below the frontmatter
- 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
中)。 一般说明:
- Create a new folder inside
content/pages
- Create a new
index.mdx
file, and add the frontmatter - Write your content below the frontmatter
- 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 赞助商!
@lekoarts/gatsby-theme-minimal-blog
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.
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
Usage
Theme options
Key | Default Value | Description |
---|---|---|
basePath | / | Root url for the theme |
blogPath | /blog | url for the blog post overview page |
tagsPath | /tags | url for the tags overview page and prefix for tags (e.g. /tags/my-tag ) |
postsPath | content/posts | Location of posts |
postsPrefix | / | Prefix for all individual blog posts |
pagesPath | content/pages | Location of additional pages (optional) |
mdx | true | Configure gatsby-plugin-mdx (if your website already is using the plugin pass false to turn this off) |
formatString | DD.MM.YYYY | Configure the date format for Date fields |
showLineNumbers | true | Show line numbers in code blocks |
showCopyButton | true | Show 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 |
feed | true | Configure gatsby-plugin-feed (if your website already is using the plugin pass false to turn this off) |
feedTitle | Minimal Blog - @lekoarts/gatsby-theme-minimal-blog | Pass 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:
- Create a new folder inside
content/posts
- Create a new
index.mdx
file, and add the frontmatter - Add images to the created folder (from step 1) you want to reference in your blog post
- Reference an image as your
banner
in the frontmatter - Write your content below the frontmatter
- 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:
- Create a new folder inside
content/pages
- Create a new
index.mdx
file, and add the frontmatter - Write your content below the frontmatter
- 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!