example
April 09, 2024
4 min read
#攥写文章
- 在
content
目录下新建一个markdown
文件,文件名可以自定义,但是需要以.md
或者.mdx
结尾。 - 在文件的头部添加以下内容,这是文章的元数据,可以根据自己的需求进行修改。
content/articles/tip.mdmarkdown
1234567891011121314---title: "个人博客模版"description: "blog-example"date: 2024-04-09lastUpdated: 2024-04-09template: articleslug: markdownicon: mdxcategories:- Markdowntags:- Markdownpublished: true---
#template
- 渲染模版
默认为 post
-> src/templates/post.tsx
,可以根据自己的需求进行修改。
gatsby-node.tsts
1234567const postPage = path.resolve('./src/templates/post.tsx')createPage({...component: postPage,...})
#slug
- 文章路径
#icon
- 文章图标
可选值为 Languages
类型
src/utils/code.tsts
12345678export type Languages =| 'javascript'| 'typescript'| 'jsx'| 'tsx'| 'md'| 'mdx'···
#categories
- 文章分类
文章属于哪些分类,可以根据分类进行文章的筛选。
当 categories
包含Highlight
时,会筛选渲染到热门内容中
#tags
- 文章标签
文章属于哪些标签,可以根据标签进行文章的筛选。
#published
- 文章是否发布
#代码高亮行
-
代码高亮使用
prism-react-renderer
+@mdx-js/react
解析markdown
文件中的代码块。 -
标记行使用
highlight
属性或简写{}
,可以高亮指定的行。 -
代码高亮的行数是从
1
开始的,如果需要高亮多行,可以使用-
连接行数。 -
使用
title
属性可以为代码块添加标题。
代码高亮markdown
1234567891011title="代码高亮"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
可根据需求自行修改。
#评论模块
由 giscus 提供支持
- 在
src/config/index.ts
中配置siteConfig
的comment
属性,即可开启评论功能。
src/config/index.tsts
1234const siteConfig: SiteConfig = {comment: true, // 是否开启评论...}
#主题
-
项目中使用了
antd
+antd-style
的主题方案。可在src/config/index.ts
中可以修改antd
的主题配置
#修改主题色
src/config/index.tsts
123456789101112const siteConfig: SiteConfig = {...theme: {brandColor: "#6c4cff", // 主题色light:{...},dark:{...}},}
#修改 light/dark 主题配置
src/customize-theme/theme/light.tsts
12345678910111213export const lightTheme: ThemeConfig = {components,token: {...},algorithm: (seedToken, mapToken) => {return {...mapToken!,...lightMode.tokens,}},}
#添加自定义 Token
src/customize-theme/customToken.tsts
123456export const createCustomToken: GetCustomToken<SiteToken> = ({ isDarkMode, token }) => {return {...}}
#修改组件默认配置
src/customize-theme/theme/components.tsts
123export const components = {...}
#header/footer
#header
src/config/index.tsts
12345678910headers: {menu: [...// 导航路由],social: [...// 社交链接],}
#footer
src/config/index.tsts
1234567891011footers: {menu: [...// 导航路由],friend: [...// 友链],ICPRecord: '', // TCP备案号},