example

#攥写文章

  • content目录下新建一个markdown文件,文件名可以自定义,但是需要以.md或者.mdx 结尾。
  • 在文件的头部添加以下内容,这是文章的元数据,可以根据自己的需求进行修改。
content/articles/tip.md
markdown
1234567891011121314
---
title: "个人博客模版"
description: "blog-example"
date: 2024-04-09
lastUpdated: 2024-04-09
template: article
slug: markdown
icon: mdx
categories:
- Markdown
tags:
- Markdown
published: true
---
#template
  • 渲染模版

默认为 post -> src/templates/post.tsx ,可以根据自己的需求进行修改。

gatsby-node.ts
ts
1234567
const postPage = path.resolve('./src/templates/post.tsx')
createPage({
...
component: postPage,
...
})
#slug
  • 文章路径
#icon
  • 文章图标

可选值为 Languages 类型

src/utils/code.ts
ts
12345678
export type Languages =
| 'javascript'
| 'typescript'
| 'jsx'
| 'tsx'
| 'md'
| 'mdx'
···
#categories
  • 文章分类

文章属于哪些分类,可以根据分类进行文章的筛选。 当 categories包含Highlight 时,会筛选渲染到热门内容中

#tags
  • 文章标签

文章属于哪些标签,可以根据标签进行文章的筛选。

#published
  • 文章是否发布

#代码高亮行

  • 代码高亮使用 prism-react-renderer+@mdx-js/react解析markdown 文件中的代码块。

  • 标记行使用 highlight属性或简写{} ,可以高亮指定的行。

  • 代码高亮的行数是从 1开始的,如果需要高亮多行,可以使用- 连接行数。

  • 使用 title 属性可以为代码块添加标题。

代码高亮
markdown
1234567891011
title="代码高亮"
highlight={1}
highlight={1,3-6}
highlight={1,3-6,8}
highlight={1,3-6,8,9-11}
{1}
{1,3-6}
{1,3-6,8}
{1,3-6,8,9-11}

#附加组件

  • 目前支持的附加组件有: 在 src/components/PrismSyntaxHighlight/components.tsx 可根据需求自行修改。

Antd Alert

Antd Tag

success processing error warning default

#评论模块

giscus 提供支持

  • src/config/index.ts中配置siteConfigcomment 属性,即可开启评论功能。
src/config/index.ts
ts
1234
const siteConfig: SiteConfig = {
comment: true, // 是否开启评论
...
}

#主题

#修改主题色
src/config/index.ts
ts
123456789101112
const siteConfig: SiteConfig = {
...
theme: {
brandColor: "#6c4cff", // 主题色
light:{
...
},
dark:{
...
}
},
}
#修改 light/dark 主题配置
src/customize-theme/theme/light.ts
ts
12345678910111213
export const lightTheme: ThemeConfig = {
components,
token: {
...
},
algorithm: (seedToken, mapToken) => {
return {
...mapToken!,
...lightMode.tokens,
}
},
}
#添加自定义 Token
src/customize-theme/customToken.ts
ts
123456
export const createCustomToken: GetCustomToken<SiteToken> = ({ isDarkMode, token }) => {
return {
...
}
}
#修改组件默认配置
src/customize-theme/theme/components.ts
ts
123
export const components = {
...
}

#header/footer

#header
src/config/index.ts
ts
12345678910
headers: {
menu: [
...
// 导航路由
],
social: [
...
// 社交链接
],
}
#footer
src/config/index.ts
ts
1234567891011
footers: {
menu: [
...
// 导航路由
],
friend: [
...
// 友链
],
ICPRecord: '', // TCP备案号
},