example

#攥写文章

• 在 content目录下新建一个markdown文件，文件名可以自定义，但是需要以.md或者.mdx 结尾。
• 在文件的头部添加以下内容，这是文章的元数据，可以根据自己的需求进行修改。

content/articles/tip.md
 Markdown
---
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
 TypeScript
const postPage = path.resolve('./src/templates/post.tsx')

createPage({
 ...
 component: postPage,
 ...
})

#slug

• 文章路径

#icon

• 文章图标

可选值为 Languages 类型

src/utils/code.ts
 TypeScript
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
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中配置siteConfig的comment 属性，即可开启评论功能。

src/config/index.ts
 TypeScript
const siteConfig: SiteConfig = {
 comment: true, // 是否开启评论
 ...
}

#主题

• 项目中使用了 antd+antd-style的主题方案。可在src/config/index.ts中可以修改antd 的主题配置

• 参考：Ant Design - 主题定制

• 参考：Ant Design - 主题编辑器

• 参考：Ant Design Style - API

#修改主题色

src/config/index.ts
 TypeScript
const siteConfig: SiteConfig = {
 ...
  theme: {
    brandColor: "#6c4cff", // 主题色
    light:{
      ...
    },
    dark:{
      ...
    }
  },
}

#修改 light/dark 主题配置

src/customize-theme/theme/light.ts
 TypeScript
export const lightTheme: ThemeConfig = {
 components,
 token: {
   ...
 },
 algorithm: (seedToken, mapToken) => {
   return {
     ...mapToken!,

     ...lightMode.tokens,
   }
 },
}

#添加自定义 Token

src/customize-theme/customToken.ts
 TypeScript
export const createCustomToken: GetCustomToken<SiteToken> = ({ isDarkMode, token }) => {
 return {
   ...

 }
}

#修改组件默认配置

src/customize-theme/theme/components.ts
 TypeScript
export const components = {
 ...
}

#header/footer

#header

src/config/index.ts
 TypeScript
headers: {
   menu: [
     ...
     // 导航路由
   ],
   social: [
     ...
     // 社交链接
   ],
 }

#footer

src/config/index.ts
 TypeScript
footers: {
   menu: [
     ...
     // 导航路由
   ],
   friend: [
     ...
     // 友链
   ],
   ICPRecord: '', // TCP备案号
 },