docusaurus.config.ts
位于你的网站的根目录,包含了你的站点的配置信息。
在这里可以修改 logo,站点名(title),作者名,顶部的公告(announcementBar),导航栏(navbar),底部导航(footer)等等。
typescriptconst config: Config = {
title: '愧怍的小站',
url: 'https://kuizuo.cn',
baseUrl: '/',
favicon: 'img/favicon.ico',
organizationName: 'kuizuo',
projectName: 'blog',
themeConfig: {
image: 'img/logo.png',
metadata: [
{
name: 'keywords',
content: '愧怍, kuizuo, blog, javascript, typescript, node, react, vue, web, 前端, 后端',
},
],
// ...
}
export default config
同时绝大部分的配置信息都可以放在这里,例如搜索(algolia),评论(giscus),社交链接(socials)等等。这些配置都可以通过docusaurus内置的hook(useThemeConfig、useDocusaurusContext)来获取。
完整的配置信息说明 docusaurus.config.ts | Docusaurus
用于配置文档的侧边栏,例如本博客中的技术笔记,工具推荐。侧边栏对应的每一项都是一个 markdown 文件,同时这些文件都存放在 docs 目录下,方便管理。
站点名和作者名只需要搜索 愧怍 或 kuizuo 便能找到关键位置,将其更改为你的便可。
具体可在 src/pages/about.mdx
中查看与修改。
这里你可能需要展示你的技术栈,这里我推荐使用 skillicons 来生成技术栈的图标,就如下面这样
而 github 的状态信息使用GitHub Profile Summary Cards 或 github-stats ,这里我选用 github-stats 因为带有动画,但需要图片需要自行构建。
这三个页面是通过 plugin-content-pages 实现自定义页面的,如果想了解页面的实现可以看自定义页面
这里你主要关注数据部分,数据都存放至根文件夹 /data
下,并使用 ts 用作类型提示。这些数据最终会在这些页面中渲染,你只需要根据符合的类型定义所要展示的数据,访问对应页面就能查看到效果。
只需要在 data/social.ts
中修改 social 对象即可。
内置了以下主流的可供选择的几个社交账号。
typescriptexport type Social = {
github?: string
twitter?: string
juejin?: string
qq?: string
wx?: string
cloudmusic?: string
zhihu?: string
email?: string
discord?: string
}
可能还需要配置下 giscus 评论,搜索,站点统计等等,这些会放在插件中细讲。
本文作者:任浪漫
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-ND 4.0 许可协议。转载请注明出处!