Skip to main content

样式修改

这一章节，我们将从代码出发修改各种样式，包括首页、笔记样式等。

首页修改​

我们可以看到首页是下面的结构，而我们希望修改里面的文字和部分样式： 3

首页在哪设置？

src\pages\index.js

但这是一个 React 页面，React 使用函数式编程返回前端 Html 代码。但是，你会问：我并不会写 React 怎么办，别急，你并不需要掌握这个框架的用法，让我们来观察一下这个代码结构。

首先，页面引入了一些必要的组件。包括 React 框架等，这个和你无关。 

import React from 'react';
import clsx from 'clsx';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Layout from '@theme/Layout';
import HomepageFeatures from '@site/src/components/HomepageFeatures';

import styles from './index.module.css';

唯一值得注意的是这一句：

import HomepageFeatures from '@site/src/components/HomepageFeatures';

它从 src\components 文件夹中引入了一个可以反复使用的组件 HomepageFeatures，它对应这一部分：

1

那这就表明，我们要修改这一部分的话，要到 src\components 文件夹中找到这个文件。

但是，我们现在还在设置主页，那么我们先把这个 HomepageFeatures 看为一个黑盒，待会再去改它。

我们先看看这个黑盒是怎么调用的：

index.js
export default function Home() {
  const {siteConfig} = useDocusaurusContext();
  return (
    <Layout
      title={`Hello from ${siteConfig.title}`}
      description="Description will go into a meta tag in <head />">
      <HomepageHeader />
      <main>
        <HomepageFeatures />
      </main>
    </Layout>
  );
}

如上面的代码所示，它创建了一个 Html layout 布局，在这个布局中，它传递了一个叫 title 的参数，这个参数实际上是决定标签页名字的。然后创建了一个 <HomepageHeader /> 这个里面是啥？实际上是调用了前面一个函数。使用 Html 的标签引用了下面的名为 HomepageHeader 的函数，渲染了这个函数中定义的内容。

index.js
function HomepageHeader() {
  const {siteConfig} = useDocusaurusContext();
  return (
    <header className={clsx('hero hero--primary', styles.heroBanner)}>
      <div className="container">
        <h1 className="hero__title">{siteConfig.title}</h1>
        <p className="hero__subtitle">{siteConfig.tagline}</p>
        <div className={styles.buttons}>
          <Link
            className="button button--secondary button--lg"
            to="/docs/intro">
            Docusaurus Tutorial - 5min ⏱️
          </Link>
        </div>
      </div>
    </header>
  );
}

让我们修改一下这边的文字。 

function HomepageHeader() {
  const {siteConfig} = useDocusaurusContext();
  return (
    <header className={clsx('hero hero--primary', styles.heroBanner)}>
      <div className="container">
        <h1 className="hero__title">{siteConfig.title}</h1>
        <p className="hero__subtitle">{siteConfig.tagline}</p>
        
        <div className={styles.buttons}>
          <Link
            className="button button--secondary button--lg"
            to="/docs/intro">
            进入我的文档🎉
          </Link>
        </div>
      </div>
    </header>
  );
}

实现效果：
1

好了，我们该去收拾那三张图片了。

进入 src\components\HomepageFeatures\index.js 文件，我们看看代码。

首先创建了一个列表： 

const FeatureList = [
  {
    title: 'Easy to Use',
    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
    description: (
      <>
        Docusaurus was designed from the ground up to be easily installed and
        used to get your website up and running quickly.
      </>
    ),
  },
  {
    title: 'Focus on What Matters',
    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
    description: (
      <>
        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
        ahead and move your docs into the <code>docs</code> directory.
      </>
    ),
  },
  {
    title: 'Powered by React',
    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
    description: (
      <>
        Extend or customize your website layout by reusing React. Docusaurus can
        be extended while reusing the same header and footer.
      </>
    ),
  },
];

这个列表里面记录了三个图片下面的标题和文字，我们只需要修改里面的内容即可。 

const FeatureList = [
  {
    title: '你好',
    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
    description: (
      <>
        这是我的网站。
      </>
    ),
  },
  {
    title: '我的爱好',
    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
    description: (
      <>
        我的爱好是前端，包括 vue、react 等。
      </>
    ),
  },
  {
    title: '在BJFU学习',
    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
    description: (
      <>
        我现在在北林信息学院学习
      </>
    ),
  },
];

然后通过一个 模板函数 实现了渲染。 

function Feature({Svg, title, description}) {
  return (
    <div className={clsx('col col--4')}>
      <div className="text--center">
        <Svg className={styles.featureSvg} role="img" />
      </div>
      <div className="text--center padding-horiz--md">
        <h3>{title}</h3>
        <p>{description}</p>
      </div>
    </div>
  );
}

这个函数帮我们将图片、标题、内容创建为一个组件，然后再下面的代码中进行调用: 

export default function HomepageFeatures() {
  return (
    <section className={styles.features}>
      <div className="container">
        <div className="row">
          {FeatureList.map((props, idx) => (
            <Feature key={idx} {...props} />
          ))}
        </div>
      </div>
    </section>
  );
}

最终把三个信息合并成了现在这样。

启发

通过这个给我们一种启发，这也是 React 的优势所在，我们只需要把数据填到一个列表中，然后通过一个函数渲染出来，因此，如果有几千条几万条数据，如果我们要修改，就只需要去修改这个函数，当你使用原生代码时，你可能要去修改每条信息对应的代码，尽管它们一样。

实现结果：
3

这边的图片，你只需要替换即可。这里不再赘述。

主题颜色修改​

你可能并不满意原生的绿色，那么要在哪修改呢？

src\css\custom.css

在这个文件中，官方为我们提供了颜色修改的接口。让我们观察这个文件的结构： 

:root {
  --ifm-color-primary: #2e8555;
  --ifm-color-primary-dark: #29784c;
  --ifm-color-primary-darker: #277148;
  --ifm-color-primary-darkest: #205d3b;
  --ifm-color-primary-light: #33925d;
  --ifm-color-primary-lighter: #359962;
  --ifm-color-primary-lightest: #3cad6e;
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}

[data-theme='dark'] {
  --ifm-color-primary: #25c2a0;
  --ifm-color-primary-dark: #21af90;
  --ifm-color-primary-darker: #1fa588;
  --ifm-color-primary-darkest: #1a8870;
  --ifm-color-primary-light: #29d5b0;
  --ifm-color-primary-lighter: #32d8b4;
  --ifm-color-primary-lightest: #4fddbf;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}

这个文件包含了两个类，分别是 light 和 dark 。分别对应了两个主题——浅色和深色。

你可以使用下面的颜色编辑器预览想要的颜色，它会自动生成代码，与此同时你可能发现我的网站随着你的调色而变化。你可以将其复制到你的 src\css\custom.css 文件，覆盖掉原有的样式。

tip

主色调最好至少有 WCAG-AA contrast ratio 对比度，以保证可读性。你可以用 Docusaurus 自己的网站来预览你的配色的效果。深色模式下，你可以换一套配色，因为同一种颜色一般不能在浅色和深色模式下都保持足够的可读性。

CSS Variable NameHexAdjustmentContrast Rating
--ifm-color-primary-lightest#8fbfffFail 🔴
--ifm-color-primary-lighter#61a5ffFail 🔴
--ifm-color-primary-light#529cffFail 🔴
--ifm-color-primary#338bff0Fail 🔴
--ifm-color-primary-dark#147affFail 🔴
--ifm-color-primary-darker#0571ffFail 🔴
--ifm-color-primary-darkest#005cd6AA 👍

把 src/css/custom.css 中的变量替换成这些新变量。

自动生成代码：覆盖并替换 /src/css/custom.css
:root {
  --ifm-color-primary: #338bff;
  --ifm-color-primary-dark: #147aff;
  --ifm-color-primary-darker: #0571ff;
  --ifm-color-primary-darkest: #005cd6;
  --ifm-color-primary-light: #529cff;
  --ifm-color-primary-lighter: #61a5ff;
  --ifm-color-primary-lightest: #8fbfff;
}

你可能注意到上面的对比度评分中，我的颜色表都是 Fail ，但是我觉得还挺显眼的，按照自己喜欢来吧~

我按照上自动生成的代码修改颜色后， src\css\custom.css 文件表现如下： 

:root {
  --ifm-color-primary: #2a7aac;
  --ifm-color-primary-dark: #266e9b;
  --ifm-color-primary-darker: #246892;
  --ifm-color-primary-darkest: #1d5578;
  --ifm-color-primary-light: #2e86bd;
  --ifm-color-primary-lighter: #308cc6;
  --ifm-color-primary-lightest: #459bd2;
}

[data-theme='dark'] {
  --ifm-color-primary: #368cdd;
  --ifm-color-primary-dark: #247ed4;
  --ifm-color-primary-darker: #2277c8;
  --ifm-color-primary-darkest: #1c62a5;
  --ifm-color-primary-light: #4e99e1;
  --ifm-color-primary-lighter: #59a0e3;
  --ifm-color-primary-lightest: #7db4e9;
}

网站表现如下： 浅色模式：
1

深色模式：
2

修改你不满意的样式​

很多时候，你可能对一些样式不太满意。比如下面，你会发现，一二三级标题颜色一模一样。

1

这很不显眼。我们就可以在 src\css\custom.css 文件中覆盖它，但是我并不知道这个东西的css 类名,这里描述一种获取想要元素的 css类名 的方法。

打开浏览器，按 F12 可以进入 调试模式 。

1

使用元素选择器选择希望查看的样式。

3

4

在这里我们可以得知，这个三级标题的 class 为 .markdown > h3 ,我们复制这个 class ，在 src\css\custom.css 修改其字体颜色。（记得为class加上 . ） 

:root {
    /* 省略 */
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
    /* 省略 */
}
.markdown > h3{
  color: var(--ifm-color-primary);
}

var(--ifm-color-primary) 为使用上面变量的方法，通过这个方法可以使颜色以变量存储，能够在代码重构时更加便捷。

现在页面如下：

2

修改其他地方也是同理，这里不再赘述。