使用 Docusaurus 搭建个人网站项目
const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');
/** @type {import('@docusaurus/types').Config} */
const config = {
title: '主标题',
tagline: '副标题，标语',
url: '官网域名',
baseUrl: '/', //前置路径
onBrokenLinks: 'throw', // 编译遇到死链怎么处理
onBrokenMarkdownLinks: 'warn',
favicon: 'img/xx_logo.ico', //图标
organizationName: 'facebook', // GitHub 上的组织名或者用户名
projectName: xx, // GitHub 上仓库的名称
// Even if you don't use internalization, you can use this field to set useful
// metadata like html lang. For example, if your site is Chinese, you may want
// to replace "en" with "zh-Hans".
i18n: {
defaultLocale: 'en',
locales: ['en'],
},
presets: [
[
//此为docusaurus的默认界面风格
'classic',
/** @type {import('@docusaurus/preset-classic').Options} */
({
//此为docs的侧边栏修饰
docs: {
sidebarPath: require.resolve('./'),
//不想要可以去除
editUrl:
//此为网页左下的Edit this page 链接地址
'编辑的gitlab网址',
},
//修饰的css文件格式
theme: {
customCss: require.resolve('./src/css/'),
},
}),
],
],
themeConfig:
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
({
//导航条
navbar: {
title: '左侧导航条显示',
logo: {
alt: 'XX', //导航条左侧多一个XX文字图标，
src: 'img/', //附带左侧XX的图片
},
//导航条显示的产品文档，如果想增加额外的页面，可在此处
items: [
{
to: 'docs/', // 点击后跳转的链接，站内跳转用 to ,站外用 href
activeBasePath: 'docs', // 根据它显示当前高亮
type: 'doc', //此处的格式可为doc或者为blog等，具体要参照docusaurus
docId: 'intro',
position: 'left',
label: '文档',
},
],
},
//下侧栏目
footer: {
//格式为暗黑色
style: 'dark',
links: [
{
title: '帮助与文档',
items: [
{
html: `
<a href="链接" target="_blank" rel="noreferrer noopener" class="footer__link-item">
链接介绍
</a>
`,
},
],
},
//多出来一个下边框
{
title: '友情链接',
items: [
{
html: `
<a href="域名链接" target="_blank" rel="noreferrer noopener" class="footer__link-item">
具体介绍
</a>
`,
},
],
},
],
copyright: `网页最下面的下标`,
},
//网页右上角的 开灯以及关灯，这些都是开源的主题
prism: {
theme: lightCodeTheme,
darkTheme: darkCodeTheme,
},
}),
};
module.exports = config;