Daemonite/material 项目教程

2024-09-27 11:25:40作者：尤峻淳Whitney

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

daemonite-material/
├── assets/
│   ├── js/
│   └── scss/
├── css/
│   ├── material.css
│   ├── material.css.map
│   ├── material.min.css
│   └── material.min.css.map
├── docs/
│   └── 4.1/
│       └── js/
├── js/
│   ├── material.js
│   ├── material.js.map
│   ├── material.min.js
│   └── material.min.js.map
├── _config.yml
├── Gemfile
├── Gemfile.lock
├── LICENSE
├── README.md
└── package.json

目录结构介绍

assets/: 包含项目的资源文件，如JavaScript和SCSS文件。
css/: 包含编译后的CSS文件，包括未压缩和压缩版本，以及对应的source maps。
docs/: 包含项目的文档文件，特别是版本4.1的文档。
js/: 包含编译后的JavaScript文件，包括未压缩和压缩版本，以及对应的source maps。
_config.yml: Jekyll配置文件。
Gemfile: 定义了项目所需的Ruby依赖。
Gemfile.lock: 锁定Gemfile中定义的依赖版本。
LICENSE: 项目的开源许可证文件。
README.md: 项目的介绍和使用说明。
package.json: 定义了项目所需的Node.js依赖。

2. 项目的启动文件介绍

项目的启动文件主要是index.html，它位于项目的根目录下。这个文件是项目的入口点，包含了基本的HTML结构和引入的CSS、JavaScript文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Material Design for Bootstrap 4</title>
    <link rel="stylesheet" href="css/material.min.css">
</head>
<body>
    <!-- 页面内容 -->
    <script src="js/material.min.js"></script>
</body>
</html>

启动文件介绍

index.html: 项目的入口文件，包含了基本的HTML结构和引入的CSS、JavaScript文件。
css/material.min.css: 引入的Material Design样式文件。
js/material.min.js: 引入的Material Design JavaScript文件。

3. 项目的配置文件介绍

_config.yml

_config.yml 是Jekyll的配置文件，用于配置Jekyll站点的各种设置。

# Jekyll配置文件示例
title: Material Design for Bootstrap 4
description: A cross-platform and fully responsive front-end interface based on Google Material Design.
baseurl: "" # 站点的基础URL
url: "http://daemonite.github.io/material/" # 站点的完整URL

package.json

package.json 是Node.js项目的配置文件，定义了项目所需的依赖和脚本。

{
  "name": "daemonite-material",
  "version": "4.1.1",
  "description": "Material Design for Bootstrap 4",
  "scripts": {
    "dist": "npm run css && npm run js",
    "css": "sass --update scss:css",
    "js": "babel js --out-dir js",
    "docs": "npm run css && npm run js && jekyll build"
  },
  "dependencies": {
    "bootstrap": "^4.0.0",
    "jquery": "^3.2.1",
    "popper.js": "^1.12.9"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "sass": "^1.0.0"
  }
}