Zen Coding 教程补充

今天搞定了如下形式的 Zen Coding:

即之前文章中提出的,当时搞不定的基于指定内容,而非基于通配符 “$” 的多重扩写。

Lesson 7:

在 Sublime Text 2 下,由于其 Koan 输入框只输入一行,貌似必须先写好对应需要的文字内容,按行写: ——是的,我这里用了“貌似”两字。

然后全选文字:

在全选文字的基础上,Ctrl+Alt+Enter 写入 Zen Code:

注意那个乘法,后面并没有跟上数量。因为数量是由所需内容的行数决定的。

这节课我们学习了:

  • 一个称之为 缩写包裹 的技巧,用以解决特定内容下的多行代码生成。
  • 与 $ 生成的编号共存的方法。

至此,差不多 Zen Coding 的内容就完成了,剩下的时间翻翻 CheatSheet 就可以应付绝大部分需求。毕竟 Zen Coding 只是一种快速完成常规工作的方式,对于复杂内容,还是需要工程师借助更强大的软件完成。

总结一下知识图:

Over。

Sublime Text 2 ANSI 格式中文支持插件

如果安装过 Installer ,直接 Command(Mac)/Ctrl(Win)+Shift+P → install → GBK 即可

直接下载地址为:

https://github.com/akira-cn/sublime-gbk

嗯,纯搬运党。

Zen Coding 外一篇

博客使用了 Crayon Syntax Highlighter 插件实现代码框的一些高级功能,不光光是 Highlight。这个插件提供了不少自定义功能和数个预置配色方案,如果还不满意,就自己调整源码 css 和 js。

这也是目前唯一启用的插件。

 

关于 Zen Coding:

其实还有很多没有解决的 Zen Coding 写作问题,比如:

  • 如何写出 <a href=”http://kaikai.info/”></a> 形式

使用 a:link 可以生成<a href=”http://”></a>,虽然感觉上这个应该可以比较简单地实现,但目前能想到的唯一办法也还是 a[href=”http://kaikai.info/]。

  • 如何快速生成包含多个不同内容且不能用 $ 通配的形式

比如:

目前实现的 ZC 代码是 table>tr>td{周一}+td{周二}+td{周三},尝试使用 table>tr>td*3{周一}{周二}{周三} 和 table>tr>td{周一}{周二}{周三}*3 均无法获得想要的效果,不知道还有没有其它的好办法。
 

Zen Coding 简易教程(六分钟学 Zen Coding)

读了一遍 Zen Coding 相关内容,写个教程当作给自己的回顾。

使用的是 Sublime Text 2,安装了 Package Installer 插件与 Zen Coding 插件。Windows/MAC 下均使用 Ctrl+Alt+Enter 调出 Koan(即 Zen Coding 的专用输入框)输入需要的内容。有兴趣的还可以去查一下 Koan 的意思,挺有内涵。

先看下面这段代码:

这段代码等于下面这段代码:

Let’s begin.

Lesson 1:

首先是一个网页文件的最基本结构: <html>、<head> 和 <body> 标签:

这节课我们学了:

  • 元素会自动扩充为对应的两个 html 标签
  • > 代表下级结构
  • + 代表同级结构

Lesson 2:

我们继续扩充结构,在 <body> 下添加了两个 <div> 块,分别放进了一定数量的段落。

这节课我们学到了:

  • 复习 + > 的作用
  • 学习了括号的作用。

Lesson 3:

我们继续添加内容:

这节课我们学习到了:

  • # 设置该元素的 id,用于 css 表
  • . 设置该元素的 class,用于 css 表
  • * n 可以用来代替 n 个重复元素 +++ 的操作

Lesson 4:

我们重新来一遍,这次插入了表格,充分玩了一次花活,还加了点新东西:

这一课我们学到了:

  • 充分利用多层括号和乘法来快速生成大量代码
  • {} 代表往该元素内填充可见内容
  • $ 作为数字通配,一个 $ 代表一位数字

Lesson 5:

我们发现,表格的边框很不好看,我们需要加一些 Style:
这节课我们学到了:
  • [] 添加元素属性,可以加很多属性哦

Lesson 6:

重复代码太多了,我们应该用 css 精简代码,用页内 css 吧,然后我们还要把 html 再规范一下:
这节课我们学到了:
  • 对于部分元素(style),代码扩充会参照给定的特殊规则
  • :  用来选择部分元素的分支,比如 html:4t、html:xml 等
  • {}、[] 等都可以嵌套多层,最外层为 Zen Coding 功能符,里面的均为普通字符,所以你可以直接插入 {}、[] 到生成的 html 代码里

 
 
 

六分钟六课时,到此结束~~~
更多内容,参见 Zen Coding Cheat Sheet:https://code.google.com/p/zen-coding/wiki/CheatSheets
======================= 我是困死了的分割线=============================

最后,Zen Coding 实际上对于需要填充内容的 HTML 文档的语法还不是很完善,比如我希望填入 “周一” 到 “周日” 的序列,就必须通过写七次 “td>str>{内容}” 完成。当然,作为练习 Zen Coding 的技巧而言,一切都是可以接受的。下面,其实也就是文章抬头 Zen Code 的更完整版,是我每周要写的工作周报的 html 源代码,你能写成 Zen Coding 格式么?(正确答案翻到底即可)

正确答案: