编辑
2024-08-20
undefined
00
请注意,本文编写于 53 天前,最后修改于 53 天前,其中某些信息可能已经过时。

目录

样式和布局

Docusaurus 网站是一个 React 单页应用。 你可以像一般的 React 应用一样给网站提供样式,像 tailwindcss 与组件库都是支持的。不过引入这些会带来一定的代码体积,因此在这套主题中我所使用的都是全局样式与 css 模块。

修改主题色

可以在 这里 设置主色调与背景色来查看浅色与深色模式下的效果,例如我的主题色是 #12AFFA

@docusaurus/preset-classicInfima 作为底层样式框架。 Infima 提供了灵活的布局,以及常见的 UI 组件样式,适用于以内容为中心的网站(博客、文档、首页)。想要了解更多详情,请查看 Infima 网站

主页

因为设置了仅博客模式,没有专门编写的首页,而是将博文列表设置为首页。需要将 src/pages/index.tsx 文件给删除(或者改个名),否则会导致首页路径冲突。当然你也可以专门搞一个主页,就像 docusaurus 那样,然后跳转至博文列表页。

所以博客页面,也就是首页。但仅仅只有博客是远远不够的,所以便添加了 Hero 组件,也就是首次访问博客的样子。

主页右侧 SVG 背景文件地址: src/components/Hero/img/hero_main.svg, 插画来源于 unDraw,在这个网站可以找到这类插画风格的背景。或者你可以找专门设计插画的人为你设计。

自定义页面

归档友链导航项目以及关于我页面都在 src/pages 目录下定义,根据文件名映射对应路由。页面的创建可以查看 创建页面 | Docusaurus

本文作者:任浪漫

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-ND 4.0 许可协议。转载请注明出处!