跳转至主内容
Version: 2.0.0-alpha.73

样式及布局

传统 CSS#

If you're using @docusaurus/preset-classic, you can create your own CSS files (e.g. /src/css/custom.css) and import them globally by passing it as an option into the preset.

docusaurus.config.js
module.exports = {  // ...  presets: [    [      '@docusaurus/preset-classic',      {        theme: {          customCss: [require.resolve('./src/css/custom.css')],        },      },    ],  ],};

Any CSS you write within that file will be available globally and can be referenced directly using string literals. This is the most traditional approach to writing CSS and is fine for small websites that do not have much customization.

Infima 装饰您的站点#

@docusaurus/preset-classic uses Infima as the underlying styling framework. Infima provides flexible layout and common UI components styling suitable for content-centric websites (blogs, documentation, landing pages). For more details, check out the Infima website.

When you init your Docusaurus 2 project, the website will be generated with basic Infima stylesheets and default styling. You may customize the styling by editing the /src/css/custom.css file.

/src/css/custom.css
/** * You can override the default Infima variables here. * Note: this is not a complete list of --ifm- variables. */:root {  --ifm-color-primary: #25c2a0;  --ifm-color-primary-dark: rgb(33, 175, 144);  --ifm-color-primary-darker: rgb(31, 165, 136);  --ifm-color-primary-darkest: rgb(26, 136, 112);  --ifm-color-primary-light: rgb(70, 203, 174);  --ifm-color-primary-lighter: rgb(102, 212, 189);  --ifm-color-primary-lightest: rgb(146, 224, 208);  --ifm-code-font-size: 95%;}

Infima uses 7 shades of each color. We recommend using ColorBox to find the different shades of colors for your chosen primary color.

Alternatively, use the following tool to generate the different shades for your website and copy the variables into /src/css/custom.css.

CSS Variable NameHexAdjustment
--ifm-color-primary-lightest#80aaef
--ifm-color-primary-lighter#5a91ea
--ifm-color-primary-light#4e89e8
--ifm-color-primary#3578e50
--ifm-color-primary-dark#1d68e1
--ifm-color-primary-darker#1b62d4
--ifm-color-primary-darkest#1751af

Replace the variables in src/css/custom.css with these new variables.

--ifm-color-primary: #3578e5;--ifm-color-primary-dark: #1d68e1;--ifm-color-primary-darker: #1b62d4;--ifm-color-primary-darkest: #1751af;--ifm-color-primary-light: #4e89e8;--ifm-color-primary-lighter: #5a91ea;--ifm-color-primary-lightest: #80aaef;

暗色模式#

To customize the Infima variables for dark mode you can add the following to src/css/custom.css.

/src/css/custom.css
html[data-theme='dark'] {  --ifm-color-primary: #4e89e8;  --ifm-color-primary-dark: #5a91ea;  /* any other colors you wish to overwrite */}

样式方法#

A Docusaurus site is a single-page React application. You can style it the way you style React apps.

There are a few approaches/frameworks which will work, depending on your preferences and the type of website you are trying to build. Websites that are highly interactive and behave more like web apps will benefit from a more modern styling approaches that co-locate styles with the components. Component styling can also be particularly useful when you wish to customize or swizzle a component.

全局样式#

This is the most traditional way of styling that most developers (including non-front end developers) would be familiar with.

Assuming you are using @docusaurus/preset-classic and /src/css/custom.css was passed in to the preset config, styles inside that file would be available globally.

/src/css/custom.css
.purple-text {  color: rebeccapurple;}
function MyComponent() {  return (    <main>      <h1 className="purple-text">Purple Heading!</h1>    </main>  );}

Theme Class Names#

We provide some predefined CSS class names to provide access for developers to style layout of a page globally in Docusaurus. The purpose is to have stable classnames shared by all themes that are meant to be targeted by custom CSS.

export const ThemeClassNames = {  page: {    blogListPage: 'blog-list-page',    blogPostPage: 'blog-post-page',    blogTagsListPage: 'blog-tags-list-page',    blogTagsPostPage: 'blog-tags-post-page',    docPage: 'doc-page',    mdxPage: 'mdx-page',  },  wrapper: {    main: 'main-wrapper',    blogPages: 'blog-wrapper',    docPages: 'docs-wrapper',    mdxPages: 'mdx-wrapper',  },};

CSS 模块#

To style your components using CSS Modules, name your stylesheet files with the .module.css suffix (e.g. welcome.module.css). webpack will load such CSS files as CSS modules and you have to reference the class names from the imported CSS module (as opposed to using plain strings). This is similar to the convention used in Create React App.

styles.module.css
.main {  padding: 12px;}
.heading {  font-weight: bold;}
.contents {  color: #ccc;}
import styles from './styles.module.css';
function MyComponent() {  return (    <main className={styles.main}>      <h1 className={styles.heading}>Hello!</h1>      <article className={styles.contents}>Lorem Ipsum</article>    </main>  );}

The class names which will be processed by webpack into a globally unique class name during build.

JS 内 CSS#

注意

此章节尚未完成。 Welcoming PRs.

Sass/SCSS#

To use Sass/SCSS as your CSS preprocessor, install the unofficial Docusaurus 2 plugin docusaurus-plugin-sass. This plugin works for both global styles and the CSS modules approach:

  1. Install docusaurus-plugin-sass:
npm install --save docusaurus-plugin-sass
  1. Include the plugin in your docusaurus.config.js file:
docusaurus.config.js
module.exports = {  // ...  plugins: ['docusaurus-plugin-sass'],  // ...};
  1. Write and import your stylesheets in Sass/SCSS as normal.

使用 Sass/SCSS 的全局样式#

You can now set the customCss property of @docusaurus/preset-classic to point to your Sass/SCSS file:

docusaurus.config.js
module.exports = {  presets: [    [      '@docusaurus/preset-classic',      {        // ...        theme: {          customCss: [require.resolve('./src/css/custom.scss')],        },        // ...      },    ],  ],};

使用 Sass/SCSS 的模块#

Name your stylesheet files with the .module.scss suffix (e.g. welcome.module.scss) instead of .css. Webpack will use sass-loader to preprocess your stylesheets and load them as CSS modules.

styles.module.scss
.main {  padding: 12px;
  article {    color: #ccc;  }}
import styles from './styles.module.scss';
function MyComponent() {  return (    <main className={styles.main}>      <article>Lorem Ipsum</article>    </main>  );}