用于代码瘦身。

老鸟建议:不要混写js 和 html,如果避免不了,当前文件可以改为erb格式,混用slim和erb不是什么问题。


git:  https://github.com/slim-template/slim

不同编译器有不同的高亮等工具,在git最底部。

atom: 直接从设置里面搜索language-slim选择下载最多的那个。然后自行设置。

可选:

Auto Ident自动缩进。

Scroll Past End 窗口下面增加一大段空白,可选。

Show indent Guide和Show Invisibles都选上,代码结构更清晰。

Preferred Line Length 设定每行字符数,超过了就换行必须和soft Wrap At。。。一起用。

Soft Wrap 根据编辑器的窗口宽度来自动换行。和Soft Wrap Hanging Indent一起用,下一行选择缩进的字符默认0,设置2最好,关键字不会断,会换行显示。。


text输出:| 和 '

p
  | This is a test

等同于

<p>This is a test</p>

p
  | <h1>fuck you!</h1>

可以插入HTML代码到文本行,等同于

<p><small>fuck you!</small></p>

另外HTML tag可以直接在p内简写:

p
  strong Name:
可以产生 <p><strong>Name:</strong></p>

加上<strong>尖括号更容易分辨,不过由于加入了slim高亮插件, HTML代码以红色字体显示,所以无需加尖括号也容易分辨。

p
  '
    This is a test

一个单独的 ,和pipe类似,不过文本最后会加一个空格,等同于

<p>This is a test</p>

Inline html <作用和  |  类似,可以直接写Html tags

这样Slim和Html可以混合用。

<div>

<span>hello

一定写上</span></div>

否则,后面的代码都会放入这个div中了。

 

Control code -,  代表了控制代码,如条件和循环

不能在最后添加 end . 块是通过缩进定义的。如果你需要多行,可以在每行后添加一个 \

。如果本行以逗号,结束则无需添加blackslash 。相当于<% ...%>

 
- if 3 >4
  | 耶耶耶
- else
  | NO

Output =

相当于<%= ... %>, 同样,主动换行使用 \  , 也同样,逗号相当于换行符。

= javascript_include_tag \

"jquery",

"application"

另外,=>, =< ,等同于=。 ⚠️注意 =>会在HTML的文本输出最后增加一个空格, =<会在HTML文本输出的前面加入一个空格。

=> link_to 'Edit', edit_product_path(@product)
'| 
=< link_to 'Back', products_path

屏幕上显示:Edit | Back

类似于 |

不过会在一行text末尾加上一个空格。因此在新一行 || 

,相当于“|”字符串,而 '|  ,  相当于一个加y空格字符串"| "

Output without HTML escaping == ❌不明白

Code comment /

会生成注释,颜色变淡代表成功。快捷键不变command + /

HTML comment /!

同样,注释颜色会变淡。

P
  | his is a test
  /!ddd  

会生成,产生一个HTML的注释,<!-- >

<p>his is a test<!--ddd  --></p>

HTML tags

Closed tags (trailing /)

明确一个html tag的尾部,在尾部添加一个 反斜杠。通常是不必要的。

标签<a>的写法

可以直接写a href="#" Link1

如果写a>或者a<, 只的是添加空格在末尾和前头 , a<>代表前后都加空格

a> href='url1' Link1
||
a< href='url2' Link2

结果是:Link1 | Link2

Inline tags  a 

ul
  li.first: a href="/a" A link
  li: a [href="#"] B line
选择性加上[]方括号。

Text content

写一行无需 |   , 分2行则需要加上 |

h1 id="headline" Listing products
h2 id="headline2"
  | 标题2

Dynamic content 

插入=或者==,就是插入ruby语法,在同一行,或者换下一行都可以拉。

==用在render和yield 


Attributes 

可以直接把属性写如tag中。必须加引号。

a href="http://slim-lang.com" title='Slim Homepage' Goto the Slim homepage

等同于

<a href="http://slim-lang.com" title="Slim Homepage">Goto the Slim homepage</a>

为了方便阅读,可以把Attributs, class, id 用括号wrap起来,(),{},[]都可以。

还可以把括号分行 :

h2 [id="tagline"
class="small tagline"] = page_tagline

插入Ruby代码,使用 = ,也可以使用#{} 

a> href="#" Link #{@product.name}
||
a< href='url2' = "Link " + @product.name 

得到的结果是一样的。

Boolean 属性, 直接使用true, falses, nil

input type="text" disabled=true

属性中的类,的合并。有几种写法

第一种,混用:

a.menu class="highlight" href="#" Slim-lang.com

第二种,链式:

a.menu.highlight  href="#" Slim-lang.com

⚠️加上id的写法, a#laber1.menu.highlight href="#" Slim-lang.com

第三种,传统写法:

br

a class="menu highlight" href="#" Slim-lang.com

第四种, 传统变形:

a class=["menu","highlight"]

a class=:menu,:highlight

还有Splat attributes * 的写法,觉得不方便

就是把*{"xxx" => "ddd", ...}转化为正常的属性写法。 *后面可以添加实例变量,或者方法,只要它返回的是hash就行。

使用动态标签tags *, 不经常用到,忽略

, 主要是为了配合方法。

定义了一个方法:
  def a_unless_current
    @page_current ? {tag: 'span'} : {tag: 'a', href: 'http://slim-lang.com/'}
  end
- @page_current = true#把实例变量赋值为true
*a_unless_current Link#使用*调用方法,因为方法返回的是hash,所以可以这么用。
- @page_current = false
*a_unless_current Link

转化为HTML:

<span>Link</span>

<a href="http://slim-lang.com/">Link</a>


Helpers, capturing and includes (没看)

capture(*args) 把块转化为一个String object并返回。

defined?(::Rails),没有找到defined?方法的出处: 猜测某个对象是否在::Rails中定义了,返回它的类型。

main.defined?(::Rails) => "constant"


文本插入:

h1 Welcome #{@product.name} to the show.

如果使用反斜杠 \ , \#{}, 则插入符失效。

h1 Welcome \#{"dd"} to the show.

显示结果是 Welcome #{"dd"} to the show.


Embedded engines(ruby:, javascript:, css:, sass:, ...)

slim使用了Tilt gem,可以直接在view中插入其他的模版engines。

如:

javascript:
  $("#my-click").click(function(){$("#foo").html('<h1>zoo</h1>');})

⚠️有些engines需要配置, 如插入Markdown,具体看git.


Slim有4个官方插件提供更多的简写方式。(忽略)


slim(4621✨)的更多相关文章

  1. tf.contrib.slim.data数据加载(1) reader

    reader: 适用于原始数据数据形式的Tensorflow Reader 在库中parallel_reader.py是与reader相关的,它使用多个reader并行处理来提高速度,但文件中定义的类 ...

  2. 第8章 用户模式下的线程同步(3)_Slim读写锁(SRWLock)

    8.5 Slim读/写锁(SRWLock)——轻量级的读写锁 (1)SRWLock锁的目的 ①允许读者线程同一时刻访问共享资源(因为不存在破坏数据的风险) ②写者线程应独占资源的访问权,任何其他线程( ...

  3. 2015年11月25 Java基础系列(二)Thread Runnable线程初级讲解

    序,线程是比进程小的进程,非常广泛的被使用. 一.继承Thread实现线程操作 1.注意setDaemon(boolean)方法,参数为true时为守护线程,参数为false时为用户线程. 守护线程的 ...

  4. Windows Internals学习笔记(五)Synchronization

    参考资料: 1. <Windows Internals> 2. 自旋锁spinlock剖析与改进 3. Lock指令前缀 4. Lock指令前缀(二) 5. Kernel Dispatch ...

  5. 最小生成树练习2(Kruskal)

    两个BUG鸣翠柳,一行代码上西天... hdu4786 Fibonacci Tree(生成树)问能否用白边和黑边构成一棵生成树,并且白边数量是斐波那契数. 题解:分别优先加入白边和黑边,求出生成树能包 ...

  6. Microsoft SQL2000 错误代码 (@@error)

    Microsoft SQL 2000 错误代码(@@error) 0 操作成功完成.  1 功能错误.  2 系统找不到指定的文件.  3 系统找不到指定的路径.  4 系统无法打开文件.  5 拒绝 ...

  7. 《Troubleshooting SQL Server》读书笔记-CPU使用率过高(下)

    <Troubleshooting SQL Server>读书笔记-CPU使用率过高(下) 第三章 High CPU Utilization. CPU使用率过高的常见原因 查询优化器会尽量从 ...

  8. 从并发处理谈PHP进程间通信(二)System V IPC

    .container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px } .conta ...

  9. 用C写一个web服务器(一) 基础功能

    .container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px } .conta ...

随机推荐

  1. PAT 1146 Topological Order[难]

    1146 Topological Order (25 分) This is a problem given in the Graduate Entrance Exam in 2018: Which o ...

  2. java通过URL获取文本内容

    原文地址https://www.cnblogs.com/myadmin/p/7634262.html public static String readFileByUrl(String urlStr) ...

  3. Xcode插件开发案例教程

    引言 在平时开发过程中我们使用了很多的Xcode插件,虽然官方对于插件制作没有提供任何支持,但是加载三方的插件,默认还是被允许的.第三方的插件,存放在 ~/Library/Application Su ...

  4. 安装mysql8.0.11以及修改root密码、连接navicat for mysql。

    最近在学习node.js,少不得要跟数据库打交道,于是打算安装一个数据库软件,在mongedb和mysql之间选择了mysql.作为一个数据库新人不敢评论孰好孰坏,最后选择mysql纯属因为公司在用m ...

  5. OpenStack学习(二)

    虚机安装成功后,,学习虚机的管理 虚机的管理主要使用以下命令 1. 虚机的管理 a. 创建 virt-install --name=wintest01 --ram 512 --vcpus=2 --di ...

  6. java泛型的实现原理

    java泛型的实现原理是类型擦除.Java的泛型是伪泛型.在编译期间,所有的泛型信息都会被擦除掉.   Java中的泛型基本上都是在编译器这个层次来实现的.在生成的Java字节码中是不包含泛型中的类型 ...

  7. iOS 大批量弹幕小论(粒子弹幕)

    一.现状 如今直播类.视频播放器等基本都有弹幕模式. 为了保持性能和内存可控,基本是在初始化的时候生成一个Pool(Pool的容量是设定好的), 也就是利用重用机制(可以想象一下UITableView ...

  8. U盘在制作Ubuntu启动盘后Windows系统下显示空间不对的解决办法(Ubuntu系统下格式化U盘的方法)

    用Ubuntu系统自带的启动盘制作工具后,将U盘拿到Windows系统下使用显示出的空间与U盘大小不同. 解决该问题的办法: 使用Linux终端: 第一步:sudo fdisk -l 这个命令主要是查 ...

  9. iis原理介绍

    它是一个程序,负责对网站的内容进行管理,以及对客户的请求(就是Http请求)做出反应.当用户对一个页面提出请求时,IIS做如下反应(忽略权限):1.把对方请求的虚拟路径转换成物理路径2.根据物理路径搜 ...

  10. window连接linux共享

    前提说明:windows主机信息:192.168.1.100 帐号:abc 密码:123 共享文件夹:sharelinux主机信息:192.168.1.200 帐号:def 密码:456 共享文件夹: ...