Skip to main content

配置文件

docusaurus.config.js

docusaurus.config.js 位于你的网站的根目录,包含了你的站点的配置信息。

在这里可以修改 logo,站点名(title),作者名,顶部的公告(announcementBar),导航栏(navbar),底部导航(footer)等等。

docusaurus.config.js
const config = {
title: '文浩Marvin',
titleDelimiter: '-',
url: 'https://wenhao.cn',
baseUrl: '/',
favicon: 'img/favicon.ico',
organizationName: 'wenhao',
projectName: 'blog',
tagline: '记录所学知识,领略编程之美',
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
themeConfig: {
image: 'img/logo.png',
metadata: [
{
name: 'keywords',
content: '文浩, wenhao, blog, javascript, typescript, node, react, vue, web, 前端, 后端',
},
],
// ...
}

module.exports = config

同时绝大部分的配置信息都可以放在这里,例如搜索(algolia),评论(giscus),社交链接(socials)等等。这些配置都可以通过docusaurus内置的hook(useThemeConfig、useDocusaurusContext)来获取。

完整的配置信息说明 docusaurus.config.js | Docusaurus

sidebars.js

用于配置文档的侧边栏,例如本博客中的技术笔记工具推荐。侧边栏对应的每一项都是一个 markdown 文件,同时这些文件都存放在 docs 目录下,方便管理。

侧边栏 | Docusaurus

相关信息

基本信息

站点名和作者名只需要搜索 文浩 便能找到关键位置

关于我

具体可在 src/pages/about.mdx 中查看与修改。

其中技术栈的图标使用 Shields.io 生成,github 的状态信息使用GitHub Profile Summary Cards生成

所要做的就是将 username 替换成你的 github 名即可。

社交链接

只需要在 docusaurus.config.js 中修改 socials 属性,替换成你的即可。

docusaurus.config.js
socials: {
github: 'https://github.com/wenhao',
twitter: 'https://twitter.com/wenhao',
juejin: 'https://juejin.cn/user/2348212569772654',
csdn: 'https://blog.csdn.net/wenhao12',
qq: 'https://wpa.qq.com/msgrd?v=3&uin=911993023&site=qq',
cloudmusic: 'https://music.163.com/#/user/home?id=1333010742',
},

如果你还有其他社交链接,可以在这里添加对应的链接,然后在 src/components/Hero.index.tsx 中的 SocialLinks 组件中来配置新增或者删除社交链接图标。

友链、导航、项目

这里你需要关注数据部分,如果想了解页面的实现可以看自定义页面

数据部分存放在根目录 /data 下,并使用 ts 用作类型提示。这些数据最终会在这些页面中渲染,你只需要根据符合的类型定义所要展示的数据,访问对应页面就能查看到效果。

其他配置

可能还需要配置下 giscus 评论,搜索,站点统计等等,这些会放在插件中细讲。