ResumeCard 开源项目使用教程

47 0 0

ResumeCard 开源项目使用教程

resumecardYou can see the live demo项目地址:https://gitcode.com/gh_mirrors/re/resumecard

1. 项目的目录结构及介绍

ResumeCard 项目的目录结构如下：

resumecard/ ├── _config.yml ├── _data/ │ └── members.yml ├── _includes/ │ ├── footer.html │ ├── head.html │ ├── header.html │ └── scripts.html ├── _layouts/ │ └── default.html ├── _posts/ │ └── 2014-11-01-about.md ├── assets/ │ ├── css/ │ │ └── main.scss │ ├── images/ │ └── js/ ├── index.html └── README.md

目录结构介绍

_config.yml: 项目的配置文件。
_data/: 存放数据文件，例如 members.yml 用于存储成员信息。
_includes/: 包含页面的各个部分，如页眉 (header.html)、页脚 (footer.html) 和脚本 (scripts.html)。
_layouts/: 页面布局文件，例如 default.html 是默认布局。
_posts/: 存放博客文章，例如 about.md 是关于页面的内容。
assets/: 存放静态资源，包括 CSS、图片和 JavaScript 文件。
index.html: 项目的主页文件。
README.md: 项目的说明文档。

2. 项目的启动文件介绍

项目的启动文件是 index.html，它是整个项目的入口文件。该文件包含了页面的基本结构和引用，通过加载 _includes/ 目录下的各个部分来构建页面。


<!DOCTYPE html>
<html lang="en">
{% include head.html %}
<body>
  {% include header.html %}
  <div class="content">
    {{ content }}
  </div>
  {% include footer.html %}
  {% include scripts.html %}
</body>
</html>

启动文件介绍

{% include head.html %}: 引入页面的头部信息，包括 CSS 文件和元数据。
{% include header.html %}: 引入页面的头部导航栏。
{{ content }}: 插入页面的主要内容。
{% include footer.html %}: 引入页面的底部信息。
{% include scripts.html %}: 引入页面的 JavaScript 文件。

3. 项目的配置文件介绍

项目的配置文件是 _config.yml，它包含了项目的全局配置信息。

title: ResumeCard email: your-email@example.com description: >- # this means to ignore newlines until "baseurl:" Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description. baseurl: "" # the subpath of your site, e.g. /blog url: "http://yourdomain.com" # the base hostname & protocol for your site, e.g. http://example.com twitter_username: jekyllrb github_username: jekyll # Build settings markdown: kramdown theme: minima plugins: - jekyll-feed