Jekyll-MDL 项目教程

随笔1年前 (2024)发布武汉金领培训学校

90 0 0

Jekyll-MDL 项目教程

jekyll-mdlA Jekyll theme based in Google Material Design Lite library.项目地址:https://gitcode.com/gh_mirrors/je/jekyll-mdl

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

Jekyll-MDL 项目的目录结构如下：

jekyll-mdl/ ├── _includes/ ├── _layouts/ ├── _posts/ ├── _sass/ ├── assets/ ├── .gitignore ├── .ruby-version ├── CHANGELOG.md ├── CONTRIBUTING.md ├── Gemfile ├── LICENSE ├── README.md ├── _config.yml ├── about.md ├── feed.xml ├── index.html └── jekyll-mdl-screen.png

目录介绍

_includes/: 包含可重用的 HTML 片段。
_layouts/: 包含页面布局模板。
_posts/: 包含博客文章。
_sass/: 包含 SASS 样式文件。
assets/: 包含静态资源文件，如图片、CSS 和 JavaScript。
.gitignore: 指定 Git 忽略的文件和目录。
.ruby-version: 指定 Ruby 版本。
CHANGELOG.md: 记录项目变更日志。
CONTRIBUTING.md: 贡献指南。
Gemfile: 指定项目依赖的 Gem 包。
LICENSE: 项目许可证。
README.md: 项目说明文档。
_config.yml: 项目配置文件。
about.md: 关于页面内容。
feed.xml: RSS 订阅文件。
index.html: 首页内容。
jekyll-mdl-screen.png: 项目截图。

2. 项目的启动文件介绍

项目的启动文件是 index.html，这是 Jekyll 项目的默认入口文件。它包含了页面的基本结构和内容。


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Jekyll MDL</title>
    <link rel="stylesheet" href="assets/css/main.css">
  </head>
  <body>
    {% include header.html %}
    <div class="page-content">
      <div class="wrapper">
        {{ content }}
      </div>
    </div>
    {% include footer.html %}
  </body>
</html>