当前位置：首页 > news >正文

gh_mirrors/co/codespaces-project-template-js扩展指南：添加教育经历与技能展示模块全流程

news 2026/7/27 10:43:35

gh_mirrors/co/codespaces-project-template-js扩展指南：添加教育经历与技能展示模块全流程

【免费下载链接】codespaces-project-template-jsCodespaces template for creating and deploying your own React portfolio项目地址: https://gitcode.com/gh_mirrors/co/codespaces-project-template-js

GitHub 加速计划的 codespaces-project-template-js 是一个基于 React 的个人作品集模板，能帮助开发者快速搭建专业的在线展示平台。本指南将详细介绍如何为该模板添加教育经历与技能展示模块，让你的作品集更加全面和专业。

准备工作：搭建开发环境

在开始扩展之前，需要先搭建好开发环境。首先克隆项目仓库：

git clone https://gitcode.com/gh_mirrors/co/codespaces-project-template-js

然后进入项目目录并安装依赖：

cd codespaces-project-template-js npm install

接着启动开发服务器：

npm run start

启动成功后，你可以在浏览器中访问http://localhost:1234查看当前的作品集网站。

创建教育经历组件

首先，我们需要创建一个教育经历组件。在src/Components目录下新建Education.jsx文件：

import React from "react"; const Education = () => { const educationList = [ { school: "示例大学", degree: "计算机科学学士学位", period: "2018 - 2022", description: "主修计算机科学，辅修软件工程。在校期间参与多个开源项目，获得优秀毕业生称号。" }, { school: "示例高中", degree: "高中文凭", period: "2015 - 2018", description: "专注于数学和物理学科，参加多项科技竞赛并获奖。" } ]; return ( <section className="padding" id="education"> <h2 style={{ textAlign: "center" }}>教育经历</h2> <div className="container"> {educationList.map((edu, index) => ( <div className="box" key={index}> <h3>{edu.school}</h3> <p className="small">{edu.degree} | {edu.period}</p> <p>{edu.description}</p> </div> ))} </div> </section> ); }; export default Education;

创建技能展示组件

接下来，创建技能展示组件。在src/Components目录下新建Skills.jsx文件：

import React from "react"; const Skills = () => { const skills = [ { name: "React", level: "熟练" }, { name: "JavaScript", level: "精通" }, { name: "HTML/CSS", level: "精通" }, { name: "Node.js", level: "熟练" }, { name: "Git", level: "熟练" }, { name: "UI/UX设计", level: "了解" } ]; return ( <section className="padding" id="skills"> <h2 style={{ textAlign: "center" }}>技能展示</h2> <div className="container" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: "1rem" }}> {skills.map((skill, index) => ( <div className="box" key={index} style={{ textAlign: "center" }}> <h3>{skill.name}</h3> <p className="small">掌握程度: {skill.level}</p> </div> ))} </div> </section> ); }; export default Skills;

修改主应用组件

现在需要将新创建的组件添加到主应用中。编辑src/App.jsx文件，导入并使用 Education 和 Skills 组件：

import Education from "./Components/Education"; import Skills from "./Components/Skills"; // 在 render 方法中添加 <Education /> <Skills />

更新导航栏

为了让访问者能够导航到新添加的模块，需要更新导航栏。编辑src/Components/Header.jsx文件，添加教育经历和技能展示的链接：

<a href="#education">教育经历</a> <a href="#skills">技能展示</a>

添加样式

为了让新模块看起来更美观，需要添加一些样式。编辑src/styles.css文件，添加以下样式：

/* 教育经历和技能展示模块样式 */ #education .box, #skills .box { margin-bottom: 2rem; padding: 1.5rem; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } #education h3, #skills h3 { color: #2c3e50; margin-bottom: 0.5rem; } #skills .container { margin-top: 2rem; }