> ## 文章索引
> 在这里获取全部文章的索引：https://lrd.im/blog/llms.txt
> 这是 lrd.im 的个人博客，记录设计、技术与思考。
# 用 Next.js 重构个人网站 (二)：核心和通用模块
这一部分我会记录下在重构 [LRD.IM](https://lrd.im) 项目中，部分核心或比较通用功能的实现过程，以及一些我花了点巧思来设计的地方。
## 数据源和循环遍历
我的网站中常常会有字段是能在多个地方复用的，比如作品的标题、描述等信息。
这些字段会在多个页面中使用，当文案调整时也需要同步改动，影响到所有相关的地方。所以为了达到「一改全改」的效果，改进网站迭代的效率，这里我会用到**数据源和循环遍历**来做（以前还真就手动一个个来改的）。
#### 数据源
数据源像是一个专门存储数据的库，里面记载了某个模块会被用到的字段名称及其对应的值。这里面本身没有功能、交互和样式，就像一个仓库。作用就是给到具体的页面或者组件来调用。
#### 循环遍历
有了数据源之后会需要将其逐个安放进统一的容器里面。容器的样式是一致的，布局和适配也通过 CSS 来统一处理好，只是里面的文本、配图、跳转链接等这些属于数据源的内容有差异，所以这里会用到`map()`来遍历数据，将数据逐一安放进容器里。
### 功能实现
#### 构建数据源
举个例子，「作品」页面包含了好几个字段：
1. 公司名称
2. 公司 LOGO 图片链接
3. 公司官网网址
4. 公司相关作品
1. 作品名称
2. 作品描述
3. 作品缩略图链接
4. 作品跳转链接
这其中「公司」和「作品」是一对多的关系，一个公司可以对应有多个作品。所以这里据源的结构是：
```js
const ProjectItemData = [
{
name: "公司名称",
img: "公司 LOGO 图片链接",
url: "公司官网网址",
projects: [
{
title: "作品名称",
desc: "作品描述",
img: "作品缩略图链接",
url: "作品跳转链接",
},
],
},
];
export default ProjectItemData;
```
#### 应用在实际页面中
数据源在我的网站里有两种使用方式：**直接引用**数据源里的某一个字段，或者通过**遍历循环**来填充进容器里面。
**1. 直接引用字段**
比如作品详情页里面的 \ 标签，需要将作品标题，siteMetadata 里的一个字段拼接，我会直接将他们引用到页面当中。
```js
// 导入数据：
import siteMetadata from "/data/siteMetadata";
import ProjectItemData from "/data/ProjectItemData";
// 使用数据：
const title = ProjectItemData[2].projects[0].title; // 指定获取某个字段
{title} - {siteMetadata.title} // 应用在页面中
// 输出:
// SHOPLINE App 组件库构建 - 李瑞东 LRD.IM
```
**2. 循环遍历，将内容逐一填进容器**
[LRD.IM](https://lrd.im) 的首页会列出我之前任职公司时的实际项目，实际上这就可以将一组数据按顺序地填入设定好样式和交互的容器当中。
我使用 [Array.prototype.map()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map) 来实现这个循环遍历。
**关键代码**
```js title="index.js" {3,9}
import ProjectItemData from "/data/ProjectItemData"; //导入数据源
<>
{ProjectItemData.map((company) => ( //查找数据源中的一级数据
//公司 LOGO 图片
{company.name} //公司名称，点击跳转到公司官网网址
{company.projects.map((project) => ( //查找数据源中的二级数据
//作品跳转链接
//作品缩略图
{project.title}
//作品名称
{project.desc}
// 作品描述
))}