skeleventy

高度入门骨架

Skeleventy为您提供了坚实的基础，以构建快速且易于访问的静态网站。查看演示站点。

特征

• 用SCSS和Laravel混合使用干净，最小的构建管道，用于编译资产
• 戈尔科（Gorko），一个聪明的小笨蛋式公用工具类生成器
• 珀格斯人去除未使用的CSS
• html minifier
• 支持ES2017 JavaScript，并由Babel汇编
• SEO友好页面元数据，包括开放图和Twitter
• 图像懒负荷
• 移动导航
• XML站点地图
• 干净简单的博客，具有类别和特色图像

入门

先决条件

Node v10+

安装

1. Clone the repo git clone https://github.com/josephdyer/skeleventy.git
2. cd into the project folder and run npm install
3. Start the local development server by running npm run dev Tip: Eleventy has live reload baked in!

文件夹结构

高度

• site/ contains all the global data, templates and content
• utilities/ contains Eleventy helper filters and transforms
• Each page should have it's own respective folder containing an index.md file
• 然后，您可以为每个页面选择最合适的布局（如果需要的话，请创建更多）
• 导航由官方高度导航插件提供动力

资产

• css/ for compiled CSS
• js/ for compiled JavaScript
• images/ contains our site's images, an SVG icon sprite and a folder for meta images (OG, Twitter etc)

构建管道

Laravel Mix为我们在WebPack顶部提供了一个不错的API层。 Skeleventy uses a simplistic set up, but you can take advantage of extending Mix with custom Webpack configurations, code splitting and plugins such as PostCSS, if you so wish.

You'll find the site's uncompiled SCSS and JS within resources/ where Mix will be watching these directories for any changes. Tip: it's best to always restart the server when creating any new partials or folders

SCSS

• scss/ is structured into opinionated sub folders
• The _config.scss file is where you can change the site's colours and the utility classes generated by Gorko
• A typographic scale has already been set up using my personal favourite Major Third scale.
• Tip: for more scales, check out Type Scale

戈尔科

我决定取消tailly逆权，纯粹是为了简单性和可维护性（尤其是对于新开发人员而言）。 Not having too much to begin with and adding in what you need, will lead to a simpler, more maintainable codebase. Gorko允许您添加大量可重复使用的公用事业课程，以帮助保持代码干燥。归功于安迪·贝尔（Andy Bell）制造这款方便的小工具

JavaScript

• utilities/ contains any global utility/helper functions
• modules/ contains your site's actual JavaScript, all kept neat and tidy within their respective modular subfolders
• You can import these subfolders into main.js using import '@modules/example-module'
• Tip: you can set up optional import aliases via the webpack.mix.js file

响应式图像的注释

Skeleventy没有响应式响应图像，主要原因是：最好使用CDN。查看有关用Cloudinary设置高度的教程。