# 首页页面修改
- 文件夹路径：`./pages/index.js`
- 被引用的部分要找到对应的文件去修改
```js
//这是一个React组件的JavaScript代码，用于构建一个使用Docusaurus进行管理的站点的首页。import是引用了一些全局文件？
// 这个组件和它的子组件使用了一些CSS类，这些类从`index.module.css`导入，并在`clsx`库的帮助下用于在JavaScript中构建字符串。`clsx`库是一个小巧的JavaScript库，它用于在条件性地构建字符串，尤其是用于构建CSS类名字符串。
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';
//`HomepageHeader`组件，渲染首页头部，主要包括站点标题，副标题，以及一个链接到教程的按钮。使用了`useDocusaurusContext`这个钩子函数来获取Docusaurus的全局上下文，包含了很多有用的数据。它主要用来获取`siteConfig`对象，该对象包含站点的配置数据，如站点的标题和标签。
function HomepageHeader() {
const {siteConfig} = useDocusaurusContext();
return (
<header className={clsx('hero hero--primary', styles.heroBanner)}>
<div className="container">
// config文件中的title，subtitle属性
<h1 className="hero__title">{siteConfig.title}</h1>
<p className="hero__subtitle">{siteConfig.tagline}</p>
//`Link`是Docusaurus提供的一个组件，用于在Docusaurus站点中创建链接。这里，它被用来创建一个链接到`/docs/intro`页面的教程按钮。
<div className={styles.buttons}>
<Link
className="button button--secondary button--lg"
to="/docs/intro">
Docusaurus Tutorial - 5min ⏱️
</Link>
</div>
</div>
</header>
);
}
//`Home`组件，`Home`是此文件导出的默认组件，表示网站的首页。 它同样使用了`useDocusaurusContext`来获取站点配置。
//`Layout`组件来设置页面的基本布局，包括头部、主体等。
//头部部分是由`HomepageHeader`组件渲染的，主体部分是`HomepageFeatures`组件渲染的。
//title显示的是<head>中的title标签内容
//description显示的是<head>中的description标签内容
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`组件渲染的，上面的function */
<HomepageHeader />
<main>
/*主体部分是`HomepageFeatures`组件渲染的,@site/src/components/HomepageFeatures*/
<HomepageFeatures />
</main>
</Layout>
);
}
```
## 首页颜色修改
- 文件夹路径：`./css/custom.css`
- 修改操作：[[Styling and Layout]]
## 首页头部修改：
标题、副标题、链接到教程的按钮
- 文件夹路径：`./docusaurus.config.js`
## 首页主体部分修改
3个主题div块
- 文件夹路径：`./src/components/HomepageFeatures./index.js` 和 `./src/components/HomepageFeatures./style.module.css`
- 参考：https://github.com/tansongchen/notes/blob/master/src/pages/index.tsx
```
import React from 'react';
import clsx from 'clsx';
import styles from './styles.module.css';
const FeatureList = [
{
title: '职业/工作',
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: '学习/成长',
Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
description: (
<>
Docusaurus lets you focus on your docs, and we'll do the chores. Go
ahead and move your docs into the <code>docs</code> directory.
</>
),
},
{
title: '创造/兴趣',
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.
</>
),
},
];
/**** 主体部分每个布局内的内容的样式，采用bootstrap布局，每个盒子占33.3%，字体居中；svg使用了./src/components/HomepageFeatures./style.module.css文件中的fratureSvg选择器样式；title和description使用居中布局，title用h3标题，description用了p段落 *****/
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>
);
}
/*** 相当于HTML页面布局的结构，格子的容器层container - row层 - 调用featureList的内容层 ***/
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>
);
}
```
### 修改后的文件
>[!info]
> - 用到[[🗃️ 卡片盒子/110 - 前端开发/Docusaurus/React]]的组件需要import，例如这里用到的link
> - 在react中，class的写法是className={styles.featureTitle}。 styles是css文件，featureTitle是class属性写法，不能用`-`的写法
> - 修改link的样式
> - 不能直接用Link标签在css中更改，令命名为className={styles.link}
> - 在custom.css文件中加入`--ifm-link-color: #fff; --ifm-link-decoration:#0078ca;`的全局link样式
> - 在styles.modules.css中添加以下内容:
> ```
> .link :hover {
color: var(--ifm-link-color);
text-decoration: underline var(--ifm-link-decoration);
}
> ```
```js
import React from 'react';
import clsx from 'clsx';
import styles from './styles.module.css';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Layout from '@theme/Layout';
const FeatureList = [
{
title: '职业/工作',
url: 'http://localhost:3000/docs/tutorial-basics/create-a-page'
},
{
title: '学习/成长',
url: 'http://localhost:3000/docs/tutorial-basics/create-a-document'
},
{
title: '创造/兴趣',
url: 'http://localhost:3000/docs/tutorial-basics/create-a-blog-post'
},
];
function Feature({title,url}) {
return (
<div className={clsx('col col--4')}>
<div className="text--center padding-horiz--md">
<Link className = {styles.link} to={url}>
<div className = {styles.featureTitle}>{title}</div>
</Link>
</div>
</div>
);
}
export default function HomepageFeatures() {
return (
<section className={styles.features}>
<div className="container">
<div className="row">
<div className={clsx('col col--12')}>
<div className="text--center padding-horiz--md">
<p>这是一段描述文本</p>
</div>
<hr />
</div>
{FeatureList.map((props, idx) => (
<Feature key={idx} {...props} />
))}
</div>
</div>
</section>
);
}
```