Jekyll 模板项目教程
1. 项目的目录结构及介绍
.
├── _config.yml
├── _data
│ └── navigation.yml
├── _includes
│ ├── footer.html
│ ├── head.html
│ ├── header.html
│ ├── hero.html
│ ├── page_blocks.html
│ └── scripts.html
├── _layouts
│ ├── default.html
│ ├── page.html
│ └── post.html
├── _posts
│ └── 2023-01-01-welcome-to-jekyll.markdown
├── _sass
│ ├── _base.scss
│ ├── _layout.scss
│ └── _syntax-highlighting.scss
├── assets
│ ├── css
│ │ └── main.scss
│ ├── images
│ └── js
│ └── main.js
├── about.md
├── index.html
└── search.json
目录结构介绍
_config.yml
: 项目的配置文件。_data
: 存储数据文件,如navigation.yml
用于导航菜单。_includes
: 包含可重用的 HTML 片段,如页眉、页脚等。_layouts
: 定义页面的布局模板。_posts
: 存储博客文章。_sass
: 包含 SASS 文件,用于生成 CSS。assets
: 存储静态资源,如 CSS、JavaScript 和图片。about.md
: 关于页面。index.html
: 首页。search.json
: 用于搜索功能的 JSON 文件。
2. 项目的启动文件介绍
项目的启动文件是 index.html
,它是网站的首页。这个文件通常包含了网站的基本结构和内容。在 Jekyll 项目中,index.html
会使用 _layouts
目录下的布局文件来渲染页面。
---
layout: default
---
<header>
{% include header.html %}
</header>
<main>
{{ content }}
</main>
<footer>
{% include footer.html %}
</footer>
3. 项目的配置文件介绍
项目的配置文件是 _config.yml
,它包含了 Jekyll 项目的所有配置选项。以下是一些常见的配置项:
title: 我的 Jekyll 网站
email: example@example.com
description: >-
这是一个使用 Jekyll 构建的示例网站。
baseurl: "" # 网站的子路径,如 "/blog"
url: "http://example.com" # 网站的完整 URL
twitter_username: jekyllrb
github_username: jekyll
# 构建设置
markdown: kramdown
theme: minima
plugins:
- jekyll-feed
配置文件介绍
title
: 网站的标题。email
: 联系邮箱。description
: 网站的描述。baseurl
: 网站的子路径。url
: 网站的完整 URL。twitter_username
: Twitter 用户名。github_username
: GitHub 用户名。markdown
: 使用的 Markdown 处理器。theme
: 使用的主题。plugins
: 启用的插件列表。
通过这些配置,可以自定义网站的外观和行为。