基本目录结构

优质
小牛编辑
141浏览
2023-12-01

一个基本的 HTML5 Boilerplate 站点,最初的目录结构就像这样:

.
├── css
│   ├── main.css
│   └── normalize.css
├── doc
├── img
├── js
│   ├── main.js
│   ├── plugins.js
│   └── vendor
│       ├── jquery.min.js
│       └── modernizr.min.js
├── .editorconfig
├── .htaccess
├── 404.html
├── apple-touch-icon.png
├── browserconfig.xml
├── index.html
├── humans.txt
├── robots.txt
├── crossdomain.xml
├── favicon.ico
├── tile-wide.png
└── tile.png

下面是有关该目录的组成及使用方式的整体概述:

css

/css 文件夹保存项目中的所有CSS文件。文件夹中包含了一些用于初始化的 CSS,为开发者在构建项目前提供标准化的开发环境。

doc

/doc 文件夹保存 HTML5 Boilerplate 的所有开发文档。可以使用它作为开发者个人项目的基础文档。

js

/js 文件夹保存项目中的所有 js 文件。库、插件和自定义代码都可以放在这里,此外还包括了一些用于初始化的 js,以帮助开发者构建项目。

.htaccess

该文件默认为 Apache 的网络服务器配置信息。更多信息,请参考 Apache Server Configs repository

如果网站托管的服务器不是 Apache,那么可以在 Server Configs项目中找到相关服务器的配置信息。

404.html

一个自定义的404页面,有益于开发者快速开始构建项目。

browserconfig.xml

该文件包含 IE11 动态瓷贴的设置信息。

更多信息,请参考MSDN

.editorconfig

该文件的作用在于,帮助和激励开发者及其团队,在编辑器和 IDE 之的范。

index.html

该页面包含默认的 HTML 结构,建议开发者使用它作为页面的基础结构。如果开发者正在使用一个服务器端的模版引擎,那么可能需要在项目构建之初,将该页面结构整合入模版引擎。

如果开发者修改了目录结构,请确保同时更新了 CSS 和 JavaScript 的引用地址。

如果开发者使用了谷歌分析脚本(Google Analytics),请确保网页底部相关脚本的 Analytics ID 书写正确。

humans.txt

该文件记录网站、应用程序的开发团队及开发技术等信息。

robots.txt

该文件记录对搜索引擎屏蔽的页面。

crossdamin.xml

一个用作跨域请求的模板。

Icons

可以根据需要替换默认的 favicon.ico,tile.png,tile-wide.png 和 Apple Touch Icon。

更多信息,可以参考 Hans 的这篇文章——HTML5 Boilerplate Favicon and Apple Touch Icon PSD-Template