Cheat Sheet速查表
跳转到主要内容

Middleman 3 速查表

本文根据 Devhints / Middleman 3 翻译。代码示例及版本范围沿用原文。此资料为归档或旧版本参考。

原文归档说明:本指南适用于 Middleman v3。

关于

NB: 本指南针对的是 Middleman 3,而非 Middleman 4 及更高版本。

Compass 配置

compass_config do |config|
  config.output_style = :compact
end

配置

# Automatic image dimensions on image_tag helper
activate :automatic_image_sizes

Gem(Ruby 库)

# Susy grids in Compass
# First: gem install compass-susy-plugin
require 'susy'

# CodeRay syntax highlighting in Haml
# First: gem install haml-coderay
require 'haml-coderay'

# CoffeeScript filters in Haml
# First: gem install coffee-filter
require 'coffee-filter'

Page 命令

# With no layout
page "/path/to/file.html", :layout => false

# With alternative layout
page "/path/to/file.html", :layout => :otherlayout

# A path which all have the same layout
with_layout :admin do
  page "/admin/*"
end

# Proxy (fake) files
page "/this-page-has-no-template.html", :proxy => "/template-file.html" do
  @which_fake_page = "Rendering a fake page with a variable"
end

辅助方法 (Helpers)

helpers do
  def some_helper
    "Helping"
  end
end

目录

set :css_dir, "alternative_css_directory"
set :js_dir, "alternative_js_directory"
set :images_dir, "alternative_image_directory"

构建(Build)专用配置

configure :build do
  activate :minify_css
  activate :minify_javascript

  # Enable cache buster
  activate :cache_buster

  # Use relative URLs
  activate :relative_assets

  # Compress PNGs after build
  # First: gem install middleman-smusher
  # require "middleman-smusher"
  activate :smusher

  # Or use a different image path
  set :http_path, "/Content/images/"
end