Плагин sparkup, вдохновленный популярным ZenCoding, позволяет быстро создавать HTML-структуры. Это важный инструмент в вашей сумочке Vim!
использование
Sparkup невероятно прост в использовании. Давайте рассмотрим несколько вариантов использования.
1. Создайте неупорядоченный список ссылок
|
1
|
nav > ul > li > a*4 { Links }
|
Выход
|
01
02
03
04
05
06
07
08
09
10
|
<nav>
<ul>
<li>
<a href=»»> Links </a>
<a href=»»> Links </a>
<a href=»»> Links </a>
<a href=»»> Links </a>
</li>
</ul>
</nav>
|
Обратите внимание, что мы можем создавать вложенные элементы, используя символ > . Кроме того, чтобы создать несколько элементов одного типа, используйте символ * (подумайте умножить). Наконец, мы можем установить значение каждого элемента, заключив строку в фигурные скобки.
2. Создать базовую структуру сайта
|
1
|
div#container > header > h1 { My Header } < + div#content { My Content } + footer > h2 { My Footer }
|
Выход
|
1
2
3
4
5
6
7
8
9
|
<div id=»container»>
<header>
<h1> My Header </h1>
</header>
<div id=»content»> My Content </div>
<footer>
<h2> My Footer </h2>
</footer>
</div>
|
На этот раз мы используем символ < для перемещения вверх по цепочке. Это позволяет нам создавать вложенные структуры HTML, а затем возвращаться к началу цепочки для дальнейшего создания родственных элементов.
3. Применить атрибуты к элементам
|
1
|
ul[class=nav]>li*5>a[href=http://url.com] { Link }
|
Выход
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
<ul class=»nav»>
<li>
<a href=»http://url.com»> Link </a>
</li>
<li>
<a href=»http://url.com»> Link </a>
</li>
<li>
<a href=»http://url.com»> Link </a>
</li>
<li>
<a href=»http://url.com»> Link </a>
</li>
<li>
<a href=»http://url.com»> Link </a>
</li>
</ul>
|
Атрибуты можно применять к элементам, помещая их в квадратные скобки ( [ ). Если вы опустите значение, например, a[href] , вы можете вставить его вручную после раскрытия. В MacVim вы можете использовать сочетания клавиш Control + N и Control + P для переключения между следующей и предыдущей точками останова.